diff --git a/CHANGELOG.md b/CHANGELOG.md index 153552a63e2e31ee2937d59b535f26c2687fbd59..36110d47c977a9e209928acf71921d09993e3e85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 the module documentation for more information. - Added a menu/toc for the tour - Added a previous and next buttons for pages in the tour +- Added warnings to inform about minimum width when accessing tour and + edit mode on small screens. ### Changed (for changes in existing functionality) - The heading attributes datatype, path, checksum and size are now placed diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js index ddbc9126fad7ae8cfcb8b3106683c75d13eeacc8..b2c474f630512912735629c8cc289441c5c2fb14 100644 --- a/src/core/js/edit_mode.js +++ b/src/core/js/edit_mode.js @@ -70,6 +70,10 @@ var edit_mode = new function() { if (this.is_edit_mode()) { edit_mode.enter_edit_mode(); edit_mode.toggle_edit_panel(); + // This is for the very specific case of reloading the + // page while the edit mode is active on small screens + $(".caosdb-edit-min-width-warning").removeClass("d-none"); + $(".caosdb-edit-min-width-warning").addClass("d-block"); } $('.caosdb-f-edit').css("transition", "top 1s"); } else { @@ -531,6 +535,9 @@ var edit_mode = new function() { $(target).append(edit_mode_li); $(".caosdb-f-btn-toggle-edit-mode").click(toggle_function); + var min_width_warning = $('<div class="alert alert-warning caosdb-edit-min-width-warning d-lg-none d-none" role="alert"><strong>Warning</strong> The edit mode is optimized for screens wider than 992px. If you have trouble using it, please try accessing it on a larger screen.</div>'); + $(".navbar").append(min_width_warning); + return edit_mode_li[0]; } @@ -1733,6 +1740,15 @@ var edit_mode = new function() { //$(".caosdb-f-main").toggleClass("container-fluid").toggleClass("container"); //$(".caosdb-f-main-entities").toggleClass("col-xs-8"); $(".caosdb-f-edit").toggle();//.toggleClass("col-xs-4"); + this._toggle_min_width_warning(); + } + + this._toggle_min_width_warning = function() { + // Somewhat counter-intuitive, but when we're not in edit mode + // and toggle the panel, we're entering and the warning should + // be shown on small screens and vice-versa. + $(".caosdb-edit-min-width-warning").toggleClass("d-none", edit_mode.is_edit_mode()); + $(".caosdb-edit-min-width-warning").toggleClass("d-block", !(edit_mode.is_edit_mode())); } this.leave_edit_mode_template = function(app) { diff --git a/src/core/js/tour.js b/src/core/js/tour.js index 57ffe0f5192f6693e1e99319df0ab2109869b115..c5232aae81c6ecba4d8eadc967959dd19068b2f1 100644 --- a/src/core/js/tour.js +++ b/src/core/js/tour.js @@ -1207,6 +1207,9 @@ var tour = new function () { var menuitem = $('<li class="nav-item" id="caosdb-navbar-tour"><a href="#" class="d-none nav-link caosdb-f-start-tour-btn" title="Start a Tour">Tour</a><a href="#" title="Leave the Tour" class="d-none caosdb-f-leave-tour-btn nav-link">Tour</a></li>') $(".caosdb-navbar").append(menuitem); + var min_width_warning = $('<div class="alert alert-warning caosdb-tour-min-width-warning d-lg-none" role="alert"><strong>Warning</strong> This tour is optimized for screens wider than 992px. If you have trouble displaying elements of this tour, please try accessing it on a larger screen.</div>'); + $(".navbar").append(min_width_warning); + for (const element of this.config.elements) { const next = tour.add_tour_element(element, this, this.elements.length); this.elements.push(next); @@ -1238,6 +1241,7 @@ var tour = new function () { this._tour_pages = []; this._index_elements(this._elements_by_id, this._tour_pages, this); this._toggle_tour_buttons(); + this._toggle_width_warning(); } _toggle_tour_buttons() { @@ -1245,6 +1249,11 @@ var tour = new function () { $(".caosdb-f-start-tour-btn").toggleClass("d-none", this.active); } + _toggle_width_warning() { + $(".caosdb-tour-min-width-warning").toggleClass("d-block", this.active); + $(".caosdb-tour-min-width-warning").toggleClass("d-none", !this.active); + } + _tour_active () { return this.active; } @@ -1368,6 +1377,7 @@ var tour = new function () { this.active = false; this._hide_tour_sidebar(); this._toggle_tour_buttons(); + this._toggle_width_warning(); this.update(); } } @@ -1387,6 +1397,7 @@ var tour = new function () { this.active = true; this._show_tour_sidebar(); this._toggle_tour_buttons(); + this._toggle_width_warning(); this.update(); } } diff --git a/src/core/webcaosdb.xsl b/src/core/webcaosdb.xsl index 96e29d6776d6ac8eafbee7b05f19a63bbcd8f857..9b4dae580ce69c11c8b994fc6d29bbc8093903b5 100644 --- a/src/core/webcaosdb.xsl +++ b/src/core/webcaosdb.xsl @@ -44,8 +44,7 @@ <div class="caosdb-v-tour-toc-header"> <h3>Tour</h3> </div> - <div class="caosdb-f-tour-toc-body"> - </div> + <div class="caosdb-f-tour-toc-body"></div> <!--<button class="btn btn-light caosdb-f-leave-tour">Leave Tour</button>--> <!--<div class="caosdb-v-tour-footer">--> <!--<button class="caosdb-f-tour-toc-toggle btn btn-light">Hide</button>-->