Merge pull request #360 from IGNF/fix/responsive-widgets

evol(widgets): Amélioration du caractère responsive des widgets

DRAFT_CHANGELOG.md

@@ -50,5 +50,7 @@ Version 1.0.1 de l'entrée cartographique de la Géoplateforme.
 
 * Placement correct de la barre latéral de widget actif sous Firefox et Chrome [extensions:#219](https://github.com/IGNF/geopf-extensions-openlayers/pull/219)
 
+* Ouverture responsive des panels des widgets sur petits écrans [#360](https://github.com/IGNF/cartes.gouv.fr-entree-carto/pull/360)
+
 #### 🔒 [Sécurité]
 ---

package.json

@@ -42,7 +42,7 @@
     "@gouvminint/vue-dsfr": "^5.14.2",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "geopf-extensions-openlayers": "./geopf-extensions-openlayers-1.0.0-beta.0-232.tgz",
+    "geopf-extensions-openlayers": "./geopf-extensions-openlayers-1.0.0-beta.0-230.tgz",
     "ol": "8.2.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/components/CartoAndTools.vue

@@ -98,4 +98,15 @@ const selectedControls = computed(() => {
       height: calc(100vh - 92.5px - 56px);
     }
   }
-</style>
+</style>
+
+<style>
+/* FIXME Style non scopé pour cacher les boutons partage et de menu
+à voir si c'est factorisable avec ce qui est fait l153 de MenuLateralWrapper.vue */
+@media (max-width: 576px) {
+  #map-and-tools-container:has(.gpf-mobile-fullscreen > button[aria-pressed="true"]) .navButton,
+  #map-and-tools-container:has(.gpf-mobile-fullscreen > button[aria-pressed="true"]) #share-button-position {
+    display: none;
+  }
+}
+</style>

src/components/carte/Controls.vue

@@ -1,9 +1,9 @@
 <script lang="js">
   /**
    * @description
-   * 
+   *
    * @property { Array } controlOptions tableau contenant les controls disponibles
-   * 
+   *
    */
   export default {
     name: 'Controls'
@@ -460,7 +460,26 @@ const mousePositionOptions = {
   .position-container-top-right {
     height: calc(100% - 214px);
   }
+
+  /* Mode mobile : on positionne les dialog par dessus la barre de recherche
+  en position fix, sous le header DSFR, et on annule le positionnement introduit
+  par la classe gpf-mobile-fullscree (right ou left) à l'aide de marges */
+  .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog {
+    position: fixed;
+    margin-top: 96.5px;
+  }
+
+  .position-container-bottom-right .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog,
+  .position-container-top-right .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog {
+    margin-right: 4px;
+  }
+
+  .position-container-bottom-left .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog,
+  .position-container-top-left .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog {
+    margin-left: 8px;
+  }
 }
+
 @media (max-width: 627px) and (min-width: 576px){
   .position-container-top-right,
   .position-container-top-left {