feat(route-draw): select mode now uses action sheet

IGNF · Jul 26, 2024 · 5485bbc · 5485bbc
1 parent d985a62
commit 5485bbc
Show file tree

Hide file tree

Showing 16 changed files with 351 additions and 332 deletions.
diff --git a/src/css/action-sheet.css b/src/css/action-sheet.css
@@ -2,7 +2,7 @@ action-sheet {
   display: block;
   height: 100vh;
   width: 100vw;
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: rgba(0, 0, 0, 0.2);
   position: fixed;
   top: 0;
 }
@@ -22,7 +22,7 @@ action-sheet {
   flex-direction: column;
   z-index: 1;
   box-sizing: border-box;
-  padding: 0 6% 6% 6%;
+  padding: 0 6% 44px 6%;
 }
 
 .actionSheet-title {

diff --git a/src/css/directions.css b/src/css/directions.css
@@ -272,11 +272,6 @@
   border-radius: 8px;
 }
 
-.hidden {
-  max-height: 0;
-  overflow: hidden;
-}
-
 .hidden .lblDirectionsLocations {
   background-image: none;
   border: none;

diff --git a/src/css/index.css b/src/css/index.css
@@ -58,6 +58,11 @@ body {
   padding: 0px;
   width: 100%;
   color: white;
+  overflow-x: clip;
+}
+
+body:has(action-sheet:not(.d-none)) {
+  overflow-y: hidden;
 }
 
 pwa-toast, action-sheet {
@@ -83,6 +88,12 @@ input, textarea, select {
   animation: fadeIn 0.15s;
 }
 
+.hidden {
+  max-height: 0 !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+}
+
 /* DS IGN forms */
 .dsign-form-label,
 .signalement-select {
@@ -255,7 +266,7 @@ input[type=text]:focus + .dsign-form-label {
 /* Show the checkmark when checked */
 .chkContainer input:checked ~ .checkmark {
   border: 1px solid var(--dark-green);
-  background-color: #E3F5EF;
+  background-color: var(--light-green);
 }
 
 
@@ -344,3 +355,82 @@ input[type="range"]::-moz-range-thumb {
   box-sizing: border-box;
 }
 /** END Range **/
+
+/* Radio buttons */
+.radio-wrapper {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  user-select: none;
+  line-height: 27px;
+}
+
+.radio-wrapper:has(input:disabled) {
+  color: var(--grey);
+}
+
+/* Hide the browser's default radio */
+.radio-wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom radio */
+.radio-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 23px;
+  width: 23px;
+  background-color: white;
+  border: 1px solid var(--grey);
+  border-radius: 100%;
+}
+
+.radio-input:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+input:disabled ~ .radio-input {
+  background-color: var(--light-grey);
+}
+
+/* Show the checkmark when checked */
+.radio-wrapper input:checked ~ .radio-input:after {
+  display: block;
+}
+
+/* Show the checkmark when checked */
+.radio-wrapper input:checked ~ .radio-input {
+  border: 1px solid var(--dark-green);
+  background-color: var(--light-green);
+}
+
+.radio-wrapper input:checked:disabled ~ .radio-input {
+  border: 1px solid var(--grey);
+  background-color: var(--light-grey);
+}
+
+
+/* Style the checkmark/indicator */
+.radio-wrapper input:checked ~ .radio-input:after {
+  content: "";
+  display: block;
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  background-color: var(--dark-green);
+  top: 4px;
+  left: 4px;
+}
+
+.radio-wrapper input:checked:disabled ~ .radio-input:after {
+  background-color: var(--grey);
+}
+/* END Radio buttons */
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -195,76 +195,6 @@
   margin-right: 12px;
 }
 
-#routeDrawBtns {
-  position: absolute;
-  left: 15px;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-}
-
-#routeDrawMode {
-  width: 145px;
-  justify-content: space-between;
-  position: relative;
-}
-
-#routeDrawMode:not(.routeDrawModeClose):focus-within > #routeDrawModeText,
-#routeDrawMode:not(.routeDrawModeClose):hover > #routeDrawModeText {
-  color: var(--dark-green);
-}
-
-#routeDrawModeTransportPedestrian, #routeDrawModeTransportCar {
-  display: block;
-  width: 30px;
-  height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url("assets/route-draw/pieton-green.svg");
-  padding-left: 8px;
-}
-
-#routeDrawModeTransportCar {
-  background-image: url("assets/route-draw/voiture-green.svg");
-  background-size: 17px;
-  background-position: 13px 13px;
-}
-
-#routeDrawModeText {
-  white-space: nowrap;
-}
-
-#routeDrawModeArrow {
-  width: 30px;
-  height: 100%;
-  background-image: url("assets/route-draw/chevron_right.svg");
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: transform 0.2s ease-out;
-}
-
-#routeDrawMode:not(.routeDrawModeClose):focus-within > #routeDrawModeArrow,
-#routeDrawMode:not(.routeDrawModeClose):hover > #routeDrawModeArrow {
-  transform: rotate(-90deg);
-}
-
-#routeDrawHelp {
-  background-color: var(--dark-green);
-  color: white;
-  border: unset;
-  justify-content: center;
-}
-
-#routeDrawBtns > div {
-  display: flex;
-  align-items: center;
-  position: relative;
-  font-family: "Open Sans Semibold";
-  margin-right: 6px;
-  right: unset;
-  font-size: 13px;
-}
-
 #routeDrawEdit {
   background-color: white;
   border-radius: 5px;
@@ -438,7 +368,7 @@
 
   #routeDrawEdit > .button > span {
     position: relative;
-    bottom: -40px;
+    bottom: -44px;
   }
 
   #mapCenter {

diff --git a/src/css/map.css b/src/css/map.css
@@ -16,11 +16,7 @@
   justify-content: flex-end;
 }
 
-#bottomButtons > .maplibregl-control-container > .maplibregl-ctrl-bottom-left {
-  bottom: 56px;
-}
-
-#routeDrawBtns.d-none + .maplibregl-control-container > .maplibregl-ctrl-bottom-left {
+.maplibregl-control-container > .maplibregl-ctrl-bottom-left {
   bottom: -3px;
 }
 

diff --git a/src/css/media-queries.css b/src/css/media-queries.css
@@ -8,7 +8,14 @@
     padding: 0 15px 15px calc(var(--safe-area-inset-left) + 42px);
     transition: top 0.3s;
     display: none;
-}
+  }
+
+  #sheetContent {
+    width: min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px));
+    padding: 0 15px 15px calc(var(--safe-area-inset-left) + 42px);
+    left: 0;
+    border-top-left-radius: 0px;
+  }
 
   #informationsWindow,
   #isochroneWindow,

diff --git a/src/css/my-account.css b/src/css/my-account.css
@@ -129,6 +129,8 @@
   overflow-y: scroll;
 }
 
+#myaccount-routes:has(.tools-layer-advanced-menu:hover),
+#myaccount-landmarks:has(.tools-layer-advanced-menu:hover),
 #myaccount-landmarks:has(label[id^=landmark-show-advanced-tools_ID_]:hover),
 #myaccount-routes:has(label[id^=route-show-advanced-tools_ID_]:hover) {
   overflow-y: visible;

diff --git a/src/css/position.css b/src/css/position.css
@@ -185,8 +185,7 @@
 #interactivityPopup,
 #editoPopup,
 #onlinePopup,
-#locationPopup,
-#routeDrawHelpPopup {
+#locationPopup {
   position: relative;
   padding: 24px;
   font-family: "Open Sans";
@@ -196,16 +195,14 @@
 #interactivityPopup .divPositionTitle,
 #editoPopup .divPositionTitle,
 #onlinePopup .divPositionTitle,
-#locationPopup .divPositionTitle,
-#routeDrawHelpPopup .divPositionTitle {
+#locationPopup .divPositionTitle {
   margin-right: 30px;
 }
 
 .interactivityPopup,
 .editoPopup,
 .onlinePopup,
-.locationPopup,
-.routeDrawHelpPopup {
+.locationPopup {
   position: fixed;
   z-index: 9999;
 }
@@ -220,7 +217,6 @@
   top: 20px;
 }
 
-.routeDrawHelpPopup>.maplibregl-popup-content,
 .editoPopup>.maplibregl-popup-content,
 .interactivityPopup>.maplibregl-popup-content,
 .onlinePopup>.maplibregl-popup-content,
@@ -230,7 +226,6 @@
   padding: 0;
 }
 
-.routeDrawHelpPopup>.maplibregl-popup-tip,
 .editoPopup>.maplibregl-popup-tip,
 .onlinePopup>.maplibregl-popup-tip,
 .interactivityPopup>.maplibregl-popup-tip,