Merge pull request #230 from IGNF/feature/fullscreen-mobile

Feat(dsfr:widgets): Plein écran en mode mobile, affichage responsive des panels en mode DSFR

DRAFT_CHANGELOG.md

@@ -44,6 +44,7 @@ Un nouvelle version du GFI avec un fonctionnement et des options differentes de
   * Mise à jour de la documentation pour les nouveaux widgets (#170)
   * SearchEngine : Modification de l'option `opened:false` en `collapsible:true`
   * CI : Build des binaires et des sources du projet (#13)
+  * Responsive : Amelioration sur le responsive des widgets en mode mobile (#230) 
 
 * 🔥 [Deprecated]
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-232",
-  "date": "25/10/2024",
+  "version": "1.0.0-beta.0-230",
+  "date": "24/10/2024",
   "module": "src/index.js",
   "directories": {},
   "engines": {

src/packages/CSS/Controls/Catalog/DSFRcatalogStyle.css

@@ -1,4 +1,13 @@
 .gpf-btn-icon-catalog::after {
     -webkit-mask: url("img/dsfr/catalog.svg") center no-repeat;
     mask: url("img/dsfr/catalog.svg") center no-repeat;
+}
+
+/* Mode mobile doit prendre le dessus */
+
+@media (max-width: 576px) {
+    .gpf-mobile-fullscreen .GPtabContent {
+        max-height: unset !important;
+        height: 100vh;
+    }
 }

src/packages/CSS/Controls/ElevationPath/DSFRelevationPathStyle.css

@@ -45,4 +45,12 @@ div[id^=GPelevationPathInformationsContainer] {
 
 .GPelevationPathInformations > span {
   white-space: nowrap;
+}
+
+/* Mode Mobile */
+
+@media (max-width: 576px) {
+  div[id^=GPelevationPathInformationsContainer], #GPelevationPathProfil {
+    margin: auto;
+  }
 }

src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css

@@ -50,7 +50,7 @@ div[id^=GPisochronValueDist] {
   min-width: 2.5rem;
 }
 
-
 [id^=GPisochronSubmit-] {
   width: 80%;
 }
+

src/packages/CSS/Controls/Route/DSFRrouteStyle.css

@@ -94,3 +94,11 @@ div[id^=GProuteResultsDetails-] {
   gap: 0.5rem;
   color: var(--text-label-grey);
 }
+
+/* Mode Mobile */
+
+@media (max-width: 576px) {
+  .gpf-mobile-fullscreen div[id^="GProuteResultsDetails-"] {
+    max-width: unset;
+  }
+}

src/packages/CSS/DSFRgeneralWidget.css

@@ -534,6 +534,16 @@
       width: 100vw !important;
   }
 
+  .gpf-mobile-fullscreen form div, .gpf-mobile-fullscreen form p {
+    margin: auto;
+    text-align: center;
+  }
+
+  .gpf-mobile-fullscreen .gpf-mobile-form {
+    max-height: unset;
+    height: 100vh;
+  }
+
   .position-container-top-right .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog,
   .position-container-bottom-right .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog,
   .position-container-top-left .gpf-mobile-fullscreen > button[aria-pressed="true"] ~ dialog,

src/packages/Controls/Catalog/CatalogDOM.js

@@ -45,7 +45,7 @@ var CatalogDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPcatalog");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/Drawing/DrawingDOM.js

@@ -22,7 +22,7 @@ var DrawingDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPdrawing");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/ElevationPath/ElevationPathDOM.js

@@ -20,7 +20,7 @@ var ElevationPathDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPelevationPath");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js

@@ -50,7 +50,7 @@ var GetFeatureInfoDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPgetFeatureInfo");
-        container.className = "GPgetFeatureInfo GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPgetFeatureInfo gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/Isocurve/IsocurveDOM.js

@@ -20,7 +20,7 @@ var IsoDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPisochron");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 
@@ -178,7 +178,7 @@ var IsoDOM = {
 
         var form = document.createElement("form");
         form.id = this._addUID("GPisochronForm");
-        form.className = "GPform gpf-panel__content fr-modal__content";
+        form.className = "GPform gpf-panel__content gpf-mobile-form fr-modal__content";
 
         form.addEventListener("submit", function (e) {
             e.preventDefault();

src/packages/Controls/LayerImport/LayerImport.js

@@ -943,6 +943,8 @@ var LayerImport = class LayerImport extends Control {
         this.contentService = null;
 
         if (this._isCurrentImportTypeStatic) {
+            // on ferme le widget à l'import d'une couche statique
+            this.setCollapsed(true);
             this._importStaticLayer();
         } else {
             this._importServiceLayers();

src/packages/Controls/LayerImport/LayerImportDOM.js

@@ -32,7 +32,7 @@ var LayerImportDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPimport");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 
@@ -206,7 +206,7 @@ var LayerImportDOM = {
 
         var form = document.createElement("form");
         form.id = this._addUID("GPimportForm");
-        form.className = "GPform GPelementVisible gpf-visible gpf-panel__content fr-modal__content";
+        form.className = "GPform GPelementVisible gpf-visible gpf-mobile-form gpf-panel__content fr-modal__content";
 
         // TODO ?
         if (form.addEventListener) {

src/packages/Controls/Legends/LegendsDOM.js

@@ -18,7 +18,7 @@ var LegendsDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPlegends");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/MousePosition/MousePositionDOM.js

@@ -18,7 +18,7 @@ var MousePositionDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPmousePosition");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js

@@ -18,7 +18,7 @@ var ReverseGeocodeDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPreverseGeocoding");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },
 

src/packages/Controls/Route/Route.js

@@ -1158,7 +1158,7 @@ var Route = class Route extends Control {
      * @private
      */
     onRouteOriginLabelClick () {
-        this._formRouteContainer.className = "gpf-panel__content fr-modal__content";
+        this._formRouteContainer.className = "gpf-panel__content gpf-mobile-form fr-modal__content";
         // on désactive l'écouteur d'événements sur la carte (pour ne pas placer un marker au clic)
         // map.un(
         //     "click",

src/packages/Controls/Route/RouteDOM.js

@@ -25,7 +25,7 @@ var RouteDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GProute");
-        container.className = "GPwidget gpf-widget gpf-widget-button";
+        container.className = "GPwidget gpf-widget gpf-widget-button gpf-mobile-fullscreen";
         return container;
     },