Merge pull request #270 from IGNF/fix/button-grid-position

Fix(css): Better buttons positions into the grid

package.json

@@ -17,7 +17,7 @@
     "@gouvminint/vue-dsfr": "^5.14.2",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "geoportal-extensions-openlayers": "./geoportal-extensions-openlayers-1.0.0-beta.97.tgz",
+    "geoportal-extensions-openlayers": "./geoportal-extensions-openlayers-1.0.0-beta.107.tgz",
     "ol": "8.2.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/components/carte/Controls.vue

@@ -38,7 +38,7 @@ log.debug(props.controlOptions);
 // liste des options pour les contrôles
 const layerSwitcherOptions = {
   options: {
-    // position : "top-right",
+    position : "top-right",
     collapsed: true,
     panel: true,
     counter: true
@@ -159,13 +159,31 @@ const measureAzimuthOptions = {
 </template>
 
 <style>
+
   .position-container-bottom-left,
   .position-container-bottom-right,
   .position-container-top-left,
   .position-container-top-right {
-    border-style: unset;
+    margin: 0;
+    padding: 0;
   }
-  .position-container-top-right {
-    top: 90px;
+
+  @media (min-width: 576px) {
+    .position-container-top-right,
+    .position-container-top-left {
+      top: 56px;
+    }
+  }
+  @media (max-width: 576px) {
+    .position-container-top-right,
+    .position-container-top-left {
+      top: 210px;
+    }
+  }
+  @media (max-width: 627px) and (min-width: 576px){
+    .position-container-top-right,
+    .position-container-top-left {
+      top: 120px;
+    }
   }
 </style>

src/components/carte/control/LayerSwitcher.vue

@@ -103,22 +103,5 @@ const onChangeVisibilityLayer = (e) => {
 </template>
 
 <style>
-@media (min-width: 576px){
-  div[id^="GPlayerSwitcher-"] {
-    top: 85px;
-    right: 5px;
-  }
-}
-@media (max-width: 576px){
-  div[id^="GPlayerSwitcher-"] {
-    top: 210px;
-    right: 5px;
-  }
-}
-@media (max-width: 627px) and (min-width: 576px){
-  div[id^="GPlayerSwitcher-"] {
-    top: 120px;
-    right: 5px;
-  }
-}
+
 </style>

src/components/carte/control/ScaleLine.vue

@@ -38,6 +38,6 @@ onUpdated(() => {
 
 <style>
   .ol-scale-line {
-    left: 50px;
+    left: 58px;
   }
 </style>

src/components/menu/MenuLateralWrapper.vue

@@ -81,7 +81,7 @@ left: 7px;
 }
 .right {
   .menu-logo-list {
-  right: 47px;
+  right: 56px;
   }
   &.is_expanded {
     .menu-logo-list {
@@ -127,7 +127,7 @@ left: 7px;
   flex-direction: column;
   display: flex;
   row-gap: 20px;
-  margin-top: 10px;
+  margin-top: 12px;
   width: 0;
   position: absolute;
 }