feat(css): panels à 100% de la hauteur de la carte + scrollbar si con…

…tenu + haut que la carte, adapté au contenu sinon (#266)
IGNF · Nov 18, 2024 · bc72164 · bc72164
1 parent cf9aa41
commit bc72164
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-263",
+  "version": "1.0.0-beta.0-266",
   "date": "15/11/2024",
   "module": "src/index.js",
   "directories": {},

diff --git a/src/packages/CSS/Controls/Catalog/GPFcatalog.css b/src/packages/CSS/Controls/Catalog/GPFcatalog.css
@@ -12,7 +12,8 @@ button[id^=GPshowCatalogPicto][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowCatalogPicto-"][aria-pressed="true"] + dialog {
-    display: block;
+    display: flex;
+    flex-direction: column;
     visibility: visible;
     opacity: 100%;
     width: 370px;
@@ -32,4 +33,4 @@ form[id^=GPcatalogForm] {
 
 .catalog-container-tabs .fr-accordion .fr-collapse--expanded {
     padding-bottom: 0;
-}
+}
diff --git a/src/packages/CSS/Controls/Drawing/GPFdrawing.css b/src/packages/CSS/Controls/Drawing/GPFdrawing.css
@@ -16,7 +16,8 @@ button[id^="GPshowDrawingPicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowDrawingPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/ElevationPath/GPFelevationPath.css b/src/packages/CSS/Controls/ElevationPath/GPFelevationPath.css
@@ -14,7 +14,8 @@ button[id^="GPshowElevationPathPicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowElevationPathPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }
@@ -55,4 +56,4 @@ button[id^=GPelevationPathPanelInfo] {
 .tooltipFadeOut {
   transition: opacity 500ms ease 0ms;
   opacity: 0;
-}
+}
diff --git a/src/packages/CSS/Controls/Isochron/GPFisochron.css b/src/packages/CSS/Controls/Isochron/GPFisochron.css
@@ -14,7 +14,8 @@ button[id^="GPshowIsochronPicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowIsochronPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/LayerImport/GPFlayerImport.css b/src/packages/CSS/Controls/LayerImport/GPFlayerImport.css
@@ -16,9 +16,10 @@ button[id^="GPshowImportPicto-"][aria-pressed="false"] + dialog {
     visibility: hidden;
     opacity: 0%;
 }
-  
+
 button[id^="GPshowImportPicto-"][aria-pressed="true"] + dialog {
-    display: block;
+    display: flex;
+    flex-direction: column;
     visibility: visible;
     opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/LayerSwitcher/GPFlayerSwitcher.css b/src/packages/CSS/Controls/LayerSwitcher/GPFlayerSwitcher.css
@@ -35,7 +35,8 @@ button[id^=GPshowLayersListPicto][aria-pressed="false"] + dialog {
 
 
 button[id^="GPshowLayersListPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/Legends/GPFlegends.css b/src/packages/CSS/Controls/Legends/GPFlegends.css
@@ -16,7 +16,8 @@ button[id^=GPshowLegendsPicto][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowLegendsPicto-"][aria-pressed="true"] + dialog {
-    display: block;
+    display: flex;
+    flex-direction: column;
     visibility: visible;
     opacity: 100%;
     width: 350px;

diff --git a/src/packages/CSS/Controls/MousePosition/GPFmousePosition.css b/src/packages/CSS/Controls/MousePosition/GPFmousePosition.css
@@ -18,7 +18,8 @@ button[id^="GPshowMousePositionPicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowMousePositionPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/ReverseGeocoding/GPFreverseGeocoding.css b/src/packages/CSS/Controls/ReverseGeocoding/GPFreverseGeocoding.css
@@ -14,7 +14,8 @@ button[id^="GPshowReverseGeocodingPicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowReverseGeocodingPicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/Route/GPFroute.css b/src/packages/CSS/Controls/Route/GPFroute.css
@@ -14,7 +14,8 @@ button[id^="GPshowRoutePicto-"][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowRoutePicto-"][aria-pressed="true"] + dialog {
-  display: block;
+  display: flex;
+  flex-direction: column;
   visibility: visible;
   opacity: 100%;
 }

diff --git a/src/packages/CSS/Controls/Territories/GPFterritories.css b/src/packages/CSS/Controls/Territories/GPFterritories.css
@@ -12,7 +12,8 @@ button[id^=GPshowTerritoriesPicto][aria-pressed="false"] + dialog {
 }
 
 button[id^="GPshowTerritoriesPicto-"][aria-pressed="true"] + dialog {
-    display: block;
+    display: flex;
+    flex-direction: column;
     visibility: visible;
     opacity: 100%;
     max-width: 470px;
@@ -22,4 +23,4 @@ button[id^="GPshowTerritoriesPicto-"][aria-pressed="true"] + dialog {
 
 dialog[id^="GPterritoriesPanel-"] {
     position: absolute;
-}
+}
diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
@@ -20,11 +20,10 @@
   position: relative;
   background-color: unset;
   width: max-content;
+  max-height: 100%;
 }
 
-/* FIXME A remplacer avec gestion des collisions */
 .gpf-panel form {
-  max-height: 400px;
   overflow: auto;
   padding: 0 2rem 2rem 2rem;
 }
@@ -36,6 +35,11 @@
 .gpf-panel__body {
   overflow: unset;
   position: relative;
+  max-height: 100% !important;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .gpf-panel__header {}
@@ -328,10 +332,12 @@
 
 .gpf-panel::after {
   height: unset;
+  flex: 0;
 }
 
 .gpf-panel::before {
   height: unset;
+  flex: 0;
 }
 
 /***********/