Merge pull request mviewer#1225 from jdev-org/issue-1223

Affichage du bouton de la légende en mode s et u

Author: lecault

css/mviewer.css

@@ -2118,6 +2118,10 @@ body:has(>#main.mode-s) #layers-container-box-header>.btn {
 	left: 1em;
 }
 
+.mode-u.xs #btn-mode-su-menu {
+	display: block!important;
+}
+
 .mode-u:not(.xs) #searchtool {
 	position: fixed;
 	top: 1em;
@@ -2177,7 +2181,7 @@ body:has(>#main.mode-s) #layers-container-box-header>.btn {
 
 #legend-panel {
 	position: fixed;
-	top: 4em;
+	top: 1em;
 	left: 1em;
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -2186,7 +2190,7 @@ body:has(>#main.mode-s) #layers-container-box-header>.btn {
 }
 
 .mode-s #legend-panel {
-	top: calc(var(--mv-navbar-h) + 4em);
+	top: calc(var(--mv-navbar-h) + 1em);
 }
 
 #legend-panel .card-header {
@@ -2221,6 +2225,10 @@ body:has(>#main.mode-s) #layers-container-box-header>.btn {
     display: none;
 }
 
+:has(#legend-panel.open) #btn-mode-su-menu {
+    display: none;
+}
+
 /* New nav mobile */
 
 #mvNavbarMobile {

js/mviewer.js

@@ -1007,7 +1007,7 @@ mviewer = (function () {
     var $panel = $("#legend-panel");
     if (!$panel.length) {
       $("#main").append(`
-        <div id="legend-panel" class="legend-panel card">
+        <div id="legend-panel" class="legend-panel card open">
           <div class="card-header d-flex justify-content-between align-items-center">
             <span i18n="legend.modal.title">Légende</span>
             <button type="button" class="btn-close"></button>
@@ -1048,11 +1048,14 @@ mviewer = (function () {
 
     $btn.on("click", function (e) {
       e.preventDefault();
-      $("#legend-panel").toggle();
+      const $legend = $("#legend-panel");
+      $legend.toggle();
+      $legend.toggleClass("open", $legend.is(":visible"));
     });
 
     $("#legend-panel .btn-close").on("click", function () {
       $("#legend-panel").hide();
+      $("#legend-panel").removeClass("open");
     });
 
     var legendmini = configuration.getConfiguration().themes.legendmini || null;