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

Summary

Introduce a warning that is shown in tour and edit mode when viewed on small screens (#194 (closed) ).

Focus

The warning elements and the toggling have been added to tour.js and edit_mode.js.

Test Environment

Simply open and close the tour while reducing the window size and check that the warning appears if and only if the tour is open on small screens. Log in and verify the same for the edit mode.

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related Issues
• Up-to-date CHANGELOG.md
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there spezifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/edit_mode.js

@@ -531,6 +531,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 +1736,11 @@ 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");
+	// 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) {