From 4aa8830a3103c61c00fc160aa07ae4f839ca988d Mon Sep 17 00:00:00 2001 From: azarz Date: Mon, 27 Nov 2023 20:06:18 +0100 Subject: [PATCH] chore(css): layer catalogue + fix(position): comportement bizarre du bouton --- src/css/assets/location-fixed.svg | 66 ++--------------------- src/css/assets/location-follow.svg | 67 ++---------------------- src/css/assets/selected-layer.svg | 2 +- src/css/layer-catalogue.css | 75 ++++++++++++++++++++------- src/css/layer-manager.css | 10 ++-- src/css/my-position.css | 5 ++ src/html/tabs/layermanagerWindow.html | 1 - src/js/map-buttons-listeners.js | 5 +- src/js/map-listeners.js | 3 +- src/js/nav.js | 1 - src/js/services/location.js | 11 ++++ 11 files changed, 90 insertions(+), 156 deletions(-) diff --git a/src/css/assets/location-fixed.svg b/src/css/assets/location-fixed.svg index 73da7b33..bac26879 100644 --- a/src/css/assets/location-fixed.svg +++ b/src/css/assets/location-fixed.svg @@ -1,63 +1,5 @@ - - - - - - image/svg+xml - - - - - - - - - + + + + diff --git a/src/css/assets/location-follow.svg b/src/css/assets/location-follow.svg index c944b214..49cb4772 100644 --- a/src/css/assets/location-follow.svg +++ b/src/css/assets/location-follow.svg @@ -1,63 +1,6 @@ - - - - - - image/svg+xml - - - - - - - - - + + + + + diff --git a/src/css/assets/selected-layer.svg b/src/css/assets/selected-layer.svg index f69eac25..d45bb1c0 100644 --- a/src/css/assets/selected-layer.svg +++ b/src/css/assets/selected-layer.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/src/css/layer-catalogue.css b/src/css/layer-catalogue.css index 4dbb6301..ac99ca4f 100644 --- a/src/css/layer-catalogue.css +++ b/src/css/layer-catalogue.css @@ -4,8 +4,13 @@ } #layerManagerWindow h4 { - padding: 0 30px 5px; margin: 0 0 10px 0; + font-family: "Open Sans Semibold"; + font-size: 1.1em; +} + +#layer-thematics { + width: 100%; } .layer-thematics { @@ -26,31 +31,52 @@ margin: auto; } + +.baseLayer .layerImg{ + width: 112.5px; +} + +.subCatMenu .baseLayer .layerImg img{ + width: 112.5px; + height: 75px; +} + .layer-title-thematic, .layer-title { font-family: "Open Sans"; font-size: 11px; font-style: normal; - font-weight: 600; line-height: normal; color: #091625; display: flex; - justify-content: center; + text-align: left } .layer-title-thematic { color: #26a581; + font-weight: 600; } -#layerManagerWindow .subCatMenu { +#layerManagerWindow #thematicLayers { text-align: center; - margin: 0 15px 0 15px; + margin: 0; display: grid; - flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-between; grid-template-columns: 26% 26% 26%; } +#baseLayers { + display: flex; + flex-direction: row; + justify-content: flex-start; + overflow-x: scroll; + scrollbar-width: none; /* Firefox */ +} + +#baseLayers::-webkit-scrollbar { + display: none; +} + .selectedLayer .layer-badge { position: absolute; width: 18px; @@ -59,6 +85,8 @@ right: 10px; background-repeat: no-repeat; background-image: url("assets/selected-layer.svg"); + border: 2px solid white; + border-radius: 50%; } .selectedLayer img { @@ -71,7 +99,16 @@ box-sizing: border-box; } -.subCatMenu .layer { +#baseLayers .layer { + display: inline-block; + padding-bottom: 1em; + position: relative; + flex-shrink: 0; + width: 112.5px; + margin-right: 12px; +} + +#thematicLayers .layer { display: inline-block; padding-bottom: 1em; width: 100%; @@ -90,7 +127,6 @@ } .subCatButton { - padding: 0 30px 5px; margin: 0 0 10px 0; position: relative; overflow-x: scroll; @@ -105,24 +141,27 @@ display: none; } -/* Hide scrollbar for IE, Edge and Firefox */ +/* Hide scrollbar and Firefox */ .subCatButton { - -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } -.thematic-button-active { - color: #26a581; - border-color: #26a581; -} - .thematicButton { display: block; - border: 1px solid #ccc; - background-color: #ffffff; + border: 1px solid #3F4A55; + color: #3F4A55; + background-color: #fff0; border-radius: 50px; padding: 10px; cursor: pointer; text-align: center; white-space: nowrap; + margin-right: 10px; + font-family: "Open Sans Semibold"; + font-size: 0.8em +} + +.thematic-button-active { + color: #26a581; + border-color: #26a581; } diff --git a/src/css/layer-manager.css b/src/css/layer-manager.css index 5fd4301f..8f539b0a 100644 --- a/src/css/layer-manager.css +++ b/src/css/layer-manager.css @@ -1,7 +1,3 @@ -div#layerManagerWindowClose { - top: -10px; -} - #layer-thematics-number, #layer-switcher-number { display: inline-block; @@ -11,9 +7,11 @@ div#layerManagerWindowClose { text-align: center; font-size: 0.9em; margin: auto; - border-radius: 50%; - background-color: #00b798; + border-radius: 50px; + background-color: #26A581; color: #fff; + font-family: "Open Sans"; + padding: 3px 5px; } .layer-tabs-wrap { diff --git a/src/css/my-position.css b/src/css/my-position.css index 1c888ccf..a5d4046a 100644 --- a/src/css/my-position.css +++ b/src/css/my-position.css @@ -72,7 +72,12 @@ padding-bottom: 10px; border-bottom: 1px solid #DDE1E6; overflow-x: scroll; + scrollbar-width: none; /* Firefox */ } +.divPositionButtons::-webkit-scrollbar { + display: none; + } + #positionShare { } .lblPositionImg { diff --git a/src/html/tabs/layermanagerWindow.html b/src/html/tabs/layermanagerWindow.html index 2117f4bd..3802c82b 100644 --- a/src/html/tabs/layermanagerWindow.html +++ b/src/html/tabs/layermanagerWindow.html @@ -1,5 +1,4 @@
-
diff --git a/src/js/map-buttons-listeners.js b/src/js/map-buttons-listeners.js index 9c962639..24e4e446 100644 --- a/src/js/map-buttons-listeners.js +++ b/src/js/map-buttons-listeners.js @@ -13,8 +13,7 @@ const addListeners = () => { const map = Globals.map; if (Location.isTrackingActive()){ // De tracking a simple suivi de position - Location.locationOnOff(); - Location.locationOnOff(); + Location.disableTracking(); } map.setBearing(Math.round((map.getBearing() % 360) + 360 ) % 360); @@ -44,7 +43,7 @@ const addListeners = () => { // Bouton Comparaison de carte DOM.$sideBySideBtn.addEventListener("click", () => { Globals.compare.toggle(); }); - + // Bouton du gestionnaire de couches DOM.$layerManagerBtn.addEventListener("click", () => { Globals.menu.open("layerManager"); }); diff --git a/src/js/map-listeners.js b/src/js/map-listeners.js index ffefb3e5..9b37f6c3 100644 --- a/src/js/map-listeners.js +++ b/src/js/map-listeners.js @@ -24,8 +24,7 @@ const addListeners = () => { return } else if (Location.isTrackingActive()){ // De tracking a simple suivi de position - Location.locationOnOff(); - Location.locationOnOff(); + Location.disableTracking(); } }); diff --git a/src/js/nav.js b/src/js/nav.js index 886eb4d5..1b8901b4 100644 --- a/src/js/nav.js +++ b/src/js/nav.js @@ -58,7 +58,6 @@ class MenuNavigation { document.getElementById("myaccountWindowClose").addEventListener('click', () => { this.close("myaccount"); }); document.getElementById("myaccount").addEventListener('click', () => { this.open("myaccount"); }); // Gestionnaire des couches - document.getElementById("layerManagerWindowClose").addEventListener('click', () => { this.close("layerManager"); }); document.getElementById("infoWindowClose").addEventListener('click', () => { this.close('info')}); document.getElementById("legendWindowClose").addEventListener('click', () => { this.close('legend')}); document.getElementById("informationsWindowClose").addEventListener('click', () => { this.close('informations')}); diff --git a/src/js/services/location.js b/src/js/services/location.js index 678e5b5e..feab3e87 100644 --- a/src/js/services/location.js +++ b/src/js/services/location.js @@ -227,6 +227,16 @@ const getLocation = async (tracking) => { return results; } +const disableTracking = () => { + DOM.$geolocateBtn.style.backgroundImage = 'url("' + LocationFixeImg + '")'; + tracking_active = false; + Toast.show({ + text: "Suivi de position activé", + duration: "short", + position: "bottom" + }); +} + const isLocationActive = () => { return location_active; } @@ -244,4 +254,5 @@ export default { locationOnOff, getOrientation, getLocation, + disableTracking, }