ENH: Show min-width warning in tour and edit mode

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 

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) {

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();
             }
         }

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>-->