From c6dfd58bbbf758bb03b7576938b331c5523f6e43 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Wed, 23 Oct 2024 15:08:35 +0200 Subject: [PATCH 1/7] style(widgets): ajout de la classe fullscreen-mobile aux containers --- src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css | 2 +- src/packages/CSS/DSFRgeneralWidget.css | 5 +++++ src/packages/Controls/Catalog/CatalogDOM.js | 2 +- src/packages/Controls/Drawing/DrawingDOM.js | 2 +- src/packages/Controls/ElevationPath/ElevationPathDOM.js | 2 +- src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js | 2 +- src/packages/Controls/Isocurve/IsocurveDOM.js | 2 +- src/packages/Controls/LayerImport/LayerImportDOM.js | 2 +- src/packages/Controls/Legends/LegendsDOM.js | 2 +- src/packages/Controls/MousePosition/MousePositionDOM.js | 2 +- src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js | 2 +- src/packages/Controls/Route/RouteDOM.js | 2 +- src/packages/Controls/SearchEngine/SearchEngineDOM.js | 2 +- 13 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css b/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css index 7f2215dac..a781ca587 100644 --- a/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css +++ b/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css @@ -50,7 +50,7 @@ div[id^=GPisochronValueDist] { min-width: 2.5rem; } - [id^=GPisochronSubmit-] { width: 80%; } + diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css index a5874baaf..1b67ae447 100644 --- a/src/packages/CSS/DSFRgeneralWidget.css +++ b/src/packages/CSS/DSFRgeneralWidget.css @@ -534,6 +534,11 @@ width: 100vw !important; } + .gpf-mobile-fullscreen form div,p { + margin: auto; + text-align: center; + } + .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, diff --git a/src/packages/Controls/Catalog/CatalogDOM.js b/src/packages/Controls/Catalog/CatalogDOM.js index 30c26ef4f..0dca15b43 100644 --- a/src/packages/Controls/Catalog/CatalogDOM.js +++ b/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; }, diff --git a/src/packages/Controls/Drawing/DrawingDOM.js b/src/packages/Controls/Drawing/DrawingDOM.js index b3f189f76..5156a7350 100644 --- a/src/packages/Controls/Drawing/DrawingDOM.js +++ b/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; }, diff --git a/src/packages/Controls/ElevationPath/ElevationPathDOM.js b/src/packages/Controls/ElevationPath/ElevationPathDOM.js index 2e2f50904..a2d4e95b8 100644 --- a/src/packages/Controls/ElevationPath/ElevationPathDOM.js +++ b/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; }, diff --git a/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js b/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js index cf15da136..d4965f5b0 100644 --- a/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js +++ b/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 gpf-widget gpf-widget-button"; + container.className = "GPgetFeatureInfo gpf-widget gpf-widget-button gpf-mobile-fullscreen"; return container; }, diff --git a/src/packages/Controls/Isocurve/IsocurveDOM.js b/src/packages/Controls/Isocurve/IsocurveDOM.js index 600e40b6a..2e41c128b 100644 --- a/src/packages/Controls/Isocurve/IsocurveDOM.js +++ b/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; }, diff --git a/src/packages/Controls/LayerImport/LayerImportDOM.js b/src/packages/Controls/LayerImport/LayerImportDOM.js index da418e2d2..196e4d8e3 100644 --- a/src/packages/Controls/LayerImport/LayerImportDOM.js +++ b/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; }, diff --git a/src/packages/Controls/Legends/LegendsDOM.js b/src/packages/Controls/Legends/LegendsDOM.js index 91d40dd51..88e855fd2 100644 --- a/src/packages/Controls/Legends/LegendsDOM.js +++ b/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; }, diff --git a/src/packages/Controls/MousePosition/MousePositionDOM.js b/src/packages/Controls/MousePosition/MousePositionDOM.js index dffbcbfd7..ae03792ff 100644 --- a/src/packages/Controls/MousePosition/MousePositionDOM.js +++ b/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; }, diff --git a/src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js b/src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js index d1f0a66ec..869cb846e 100644 --- a/src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js +++ b/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; }, diff --git a/src/packages/Controls/Route/RouteDOM.js b/src/packages/Controls/Route/RouteDOM.js index 14a8ceb68..5eed4dfb9 100644 --- a/src/packages/Controls/Route/RouteDOM.js +++ b/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; }, diff --git a/src/packages/Controls/SearchEngine/SearchEngineDOM.js b/src/packages/Controls/SearchEngine/SearchEngineDOM.js index bcd9ade4a..91054cdaa 100644 --- a/src/packages/Controls/SearchEngine/SearchEngineDOM.js +++ b/src/packages/Controls/SearchEngine/SearchEngineDOM.js @@ -22,7 +22,7 @@ var SearchEngineDOM = { _createMainContainerElement : function () { var container = document.createElement("div"); container.id = this._addUID("GPsearchEngine"); - container.className = "GPwidget gpf-widget"; + container.className = "GPwidget gpf-widget gpf-mobile-fullscreen"; return container; }, From c3649ff8976bbddcf98cf85ea862a0334d98bcdf Mon Sep 17 00:00:00 2001 From: elias couppe Date: Thu, 24 Oct 2024 17:25:50 +0200 Subject: [PATCH 2/7] =?UTF-8?q?style(elevation:mobile):=20centrage=20des?= =?UTF-8?q?=20r=C3=A9sultats=20en=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CSS/Controls/ElevationPath/DSFRelevationPathStyle.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/packages/CSS/Controls/ElevationPath/DSFRelevationPathStyle.css b/src/packages/CSS/Controls/ElevationPath/DSFRelevationPathStyle.css index b20211ce9..4cca0c794 100644 --- a/src/packages/CSS/Controls/ElevationPath/DSFRelevationPathStyle.css +++ b/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; + } } \ No newline at end of file From 21ea782b8a944fe9c89b768c08afbe956325eacb Mon Sep 17 00:00:00 2001 From: elias couppe Date: Thu, 24 Oct 2024 17:27:41 +0200 Subject: [PATCH 3/7] style(widget:mobile): form sur toute la hauteur si pertinent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + résultats itinéraire sur toute la largeur --- src/packages/CSS/Controls/Catalog/DSFRcatalogStyle.css | 9 +++++++++ src/packages/CSS/Controls/Route/DSFRrouteStyle.css | 8 ++++++++ src/packages/CSS/DSFRgeneralWidget.css | 5 +++++ src/packages/Controls/Isocurve/IsocurveDOM.js | 2 +- src/packages/Controls/LayerImport/LayerImportDOM.js | 2 +- src/packages/Controls/Route/Route.js | 2 +- src/packages/Controls/SearchEngine/SearchEngineDOM.js | 2 +- 7 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/packages/CSS/Controls/Catalog/DSFRcatalogStyle.css b/src/packages/CSS/Controls/Catalog/DSFRcatalogStyle.css index a6dcaeba1..319ed378b 100644 --- a/src/packages/CSS/Controls/Catalog/DSFRcatalogStyle.css +++ b/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; + } } \ No newline at end of file diff --git a/src/packages/CSS/Controls/Route/DSFRrouteStyle.css b/src/packages/CSS/Controls/Route/DSFRrouteStyle.css index 0b88609a9..6a7069b0f 100644 --- a/src/packages/CSS/Controls/Route/DSFRrouteStyle.css +++ b/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; + } +} \ No newline at end of file diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css index 1b67ae447..2d2b224a8 100644 --- a/src/packages/CSS/DSFRgeneralWidget.css +++ b/src/packages/CSS/DSFRgeneralWidget.css @@ -539,6 +539,11 @@ 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, diff --git a/src/packages/Controls/Isocurve/IsocurveDOM.js b/src/packages/Controls/Isocurve/IsocurveDOM.js index 2e41c128b..046f8adab 100644 --- a/src/packages/Controls/Isocurve/IsocurveDOM.js +++ b/src/packages/Controls/Isocurve/IsocurveDOM.js @@ -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(); diff --git a/src/packages/Controls/LayerImport/LayerImportDOM.js b/src/packages/Controls/LayerImport/LayerImportDOM.js index 196e4d8e3..506abd5dc 100644 --- a/src/packages/Controls/LayerImport/LayerImportDOM.js +++ b/src/packages/Controls/LayerImport/LayerImportDOM.js @@ -176,7 +176,7 @@ var LayerImportDOM = { var form = document.createElement("form"); form.id = this._addUID("GPimportForm"); - form.className = "GPform gpf-panel__content fr-modal__content"; + form.className = "GPform gpf-panel__content gpf-mobile-form fr-modal__content"; // TODO ? if (form.addEventListener) { diff --git a/src/packages/Controls/Route/Route.js b/src/packages/Controls/Route/Route.js index 045fa13bc..734e365a8 100644 --- a/src/packages/Controls/Route/Route.js +++ b/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", diff --git a/src/packages/Controls/SearchEngine/SearchEngineDOM.js b/src/packages/Controls/SearchEngine/SearchEngineDOM.js index 91054cdaa..bcd9ade4a 100644 --- a/src/packages/Controls/SearchEngine/SearchEngineDOM.js +++ b/src/packages/Controls/SearchEngine/SearchEngineDOM.js @@ -22,7 +22,7 @@ var SearchEngineDOM = { _createMainContainerElement : function () { var container = document.createElement("div"); container.id = this._addUID("GPsearchEngine"); - container.className = "GPwidget gpf-widget gpf-mobile-fullscreen"; + container.className = "GPwidget gpf-widget"; return container; }, From f1371f58f355675f9a225b89098fbe5b31ad9c77 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Thu, 24 Oct 2024 17:42:43 +0200 Subject: [PATCH 4/7] =?UTF-8?q?evol(layerimport):=20fermeture=20du=20panel?= =?UTF-8?q?=20=C3=A0=20l'import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/Controls/LayerImport/LayerImport.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/packages/Controls/LayerImport/LayerImport.js b/src/packages/Controls/LayerImport/LayerImport.js index da7917c20..118b9fd57 100644 --- a/src/packages/Controls/LayerImport/LayerImport.js +++ b/src/packages/Controls/LayerImport/LayerImport.js @@ -921,7 +921,8 @@ var LayerImport = class LayerImport extends Control { */ _onImportSubmit () { logger.log("import d'une couche de type : " + this._currentImportType); - + // on ferme le widget à l'import + this.setCollapsed(true); // reinitialisation du contenu d'un import de type // - static (KML ou GPX ou GeoJSON) this.contentStatic = null; From 9ad5943e09328f9ce2648d1d50d2876d8b456625 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Thu, 24 Oct 2024 18:38:31 +0200 Subject: [PATCH 5/7] =?UTF-8?q?update(package):=20mise=20=C3=A0=20jour=20d?= =?UTF-8?q?u=20package=20et=20du=20changelog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DRAFT_CHANGELOG.md | 1 + package.json | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/DRAFT_CHANGELOG.md b/DRAFT_CHANGELOG.md index d7270d219..776d0c667 100644 --- a/DRAFT_CHANGELOG.md +++ b/DRAFT_CHANGELOG.md @@ -37,6 +37,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] diff --git a/package.json b/package.json index 99f6a3ab9..61e08fd8c 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "geopf-extensions-openlayers", "description": "French Geoportal Extensions for OpenLayers libraries", - "version": "1.0.0-beta.0-219", - "date": "21/10/2024", + "version": "1.0.0-beta.0-230", + "date": "24/10/2024", "module": "src/index.js", "directories": {}, "engines": { From 839bb2dc1b73c0cbf5ce07d90f8e61e8141921b3 Mon Sep 17 00:00:00 2001 From: elias75015 Date: Fri, 25 Oct 2024 12:08:12 +0200 Subject: [PATCH 6/7] Fix: bad css selector Co-authored-by: Amaury Zarzelli --- src/packages/CSS/DSFRgeneralWidget.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css index 2d2b224a8..a0f3b4896 100644 --- a/src/packages/CSS/DSFRgeneralWidget.css +++ b/src/packages/CSS/DSFRgeneralWidget.css @@ -534,7 +534,7 @@ width: 100vw !important; } - .gpf-mobile-fullscreen form div,p { + .gpf-mobile-fullscreen form div, .gpf-mobile-fullscreen form p { margin: auto; text-align: center; } From 49d405e9539d2413b0f1e88cd60ea31adca1efc0 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Fri, 25 Oct 2024 14:44:47 +0200 Subject: [PATCH 7/7] fix(import): fermeture lors d'import de couche statique uniquement --- src/packages/Controls/LayerImport/LayerImport.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/packages/Controls/LayerImport/LayerImport.js b/src/packages/Controls/LayerImport/LayerImport.js index f64e8d42f..ab513b907 100644 --- a/src/packages/Controls/LayerImport/LayerImport.js +++ b/src/packages/Controls/LayerImport/LayerImport.js @@ -935,8 +935,7 @@ var LayerImport = class LayerImport extends Control { */ _onImportSubmit () { logger.log("import d'une couche de type : " + this._currentImportType); - // on ferme le widget à l'import - this.setCollapsed(true); + // reinitialisation du contenu d'un import de type // - static (KML ou GPX ou GeoJSON) this.contentStatic = null; @@ -944,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();