feat(css): forms use IGN design system (#109)

IGNF · Jul 25, 2024 · c6946c5 · c6946c5
1 parent 5e8cbe8
commit c6946c5
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 17 deletions.
diff --git a/src/css/fonts/FiraSans-Bold.ttf b/src/css/fonts/FiraSans-Bold.ttf
diff --git a/src/css/index.css b/src/css/index.css
@@ -14,6 +14,10 @@
   font-family: "Fira Sans Semibold";
   src: url("./fonts/FiraSans-SemiBold.ttf");
 }
+@font-face {
+  font-family: "Fira Sans Bold";
+  src: url("./fonts/FiraSans-Bold.ttf");
+}
 @font-face {
   font-family: "Fira Sans Medium";
   src: url("./fonts/FiraSans-Medium.ttf");
@@ -79,6 +83,57 @@ input, textarea, select {
   animation: fadeIn 0.15s;
 }
 
+/* DS IGN forms */
+.dsign-form-label,
+.signalement-select {
+  font-family: "Fira Sans Bold";
+  color: var(--darkish-grey);
+}
+
+.textarea-label {
+  font-family: "Fira Sans";
+  color: var(--mid-grey);
+}
+
+.dsign-form-element {
+  position: relative;
+}
+
+.dsign-form-label {
+  position: absolute;
+  font-size: 15px;
+  top: 10px;
+  left: 12px;
+  transition: font-size 0.3s, top 0.3s;
+  pointer-events: none;
+}
+
+textarea + .dsign-form-label {
+  top: 18px;
+}
+
+input[type=email] + .dsign-form-label,
+input[type=text] + .dsign-form-label {
+  top: 23px;
+}
+
+input[type=text]:not(:placeholder-shown) + .dsign-form-label,
+input[type=text]:focus + .dsign-form-label,
+input[type=email]:not(:placeholder-shown) + .dsign-form-label,
+input[type=email]:focus + .dsign-form-label,
+textarea:not(:placeholder-shown) + .dsign-form-label,
+textarea:focus + .dsign-form-label {
+  font-size: 11px;
+}
+
+input[type=email]:not(:placeholder-shown) + .dsign-form-label,
+input[type=email]:focus + .dsign-form-label,
+input[type=text]:not(:placeholder-shown) + .dsign-form-label,
+input[type=text]:focus + .dsign-form-label {
+  top: 13px;
+}
+/* END DS IGN forms */
+
 /* Toggle Switch */
 .toggleSwitch {
   position: relative;
@@ -151,10 +206,11 @@ input, textarea, select {
 .toggleInput:checked + .toggleSlider::after {
   color: white;
 }
+/* END Toggle Switch  */
 
 /* Checkbox */
- /* Customize the label (the container) */
- .chkContainer {
+/* Customize the label (the container) */
+.chkContainer {
   display: block;
   position: relative;
   padding-left: 35px;
@@ -213,6 +269,8 @@ input, textarea, select {
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }
+/* END Checkbox */
+
 
 /** Range **/
 /*********** Baseline, reset styles ***********/
@@ -285,3 +343,4 @@ input[type="range"]::-moz-range-thumb {
   border: var(--dark-grey) 6px solid;
   box-sizing: border-box;
 }
+/** END Range **/
diff --git a/src/css/landmark.css b/src/css/landmark.css
@@ -29,11 +29,11 @@
 .landmark-textarea,
 .landmark-input-text {
   font-family: "Open Sans Semibold";
-  margin: 5px 0 10px 0;
+  margin: 10px 0;
   box-sizing: border-box;
   width: 100%;
   height: 45px;
-  padding: 0 8px;
+  padding: 13px 8px 0 8px;
   background-color: white;
   border-radius: 8px;
   border: 1px solid;
@@ -51,8 +51,8 @@
 
 .landmark-textarea {
   resize: none;
-  height: 6em;
-  padding: 8px;
+  height: 7em;
+  padding: 21px 8px 8px 8px;
 }
 
 .landmarkColorInput, .landmarkIconInput {

diff --git a/src/css/signalement.css b/src/css/signalement.css
@@ -65,23 +65,39 @@
 .signalement-select,
 .signalement-textarea,
 .signalement-input-text {
-  font-family: "Open Sans";
-  margin: 5px 0 10px 0;
+  font-family: "Open Sans Semibold";
+  margin: 10px 0;
   box-sizing: border-box;
   width: 100%;
   height: 45px;
-  padding: 0 8px;
+  padding: 13px 8px 0 8px;
   background-color: white;
   border-radius: 8px;
   border: 1px solid;
   border-color: var(--grey-2);
   color: var(--dark-grey);
 }
 
+.signalement-select:focus,
+.signalement-textarea:focus,
+.signalement-input-text:focus {
+  outline: none;
+  border-color: var(--dark-green);
+}
+
+.signalement-select {
+  padding: 0 8px;
+}
+
+.signalement-select {
+  font-family: "Fira Sans Bold";
+  color: var(--darkish-grey);
+}
+
 .signalement-textarea {
   resize: none;
-  height: 6em;
-  padding: 8px;
+  height: 7em;
+  padding: 21px 8px 8px 8px;
 }
 
 .signalement-submit {

diff --git a/src/html/tabs/landmarkWindow.html b/src/html/tabs/landmarkWindow.html
@@ -2,9 +2,18 @@
   <p id="landmarkWindowTitle" class="landmarkTitle">Créer un point de repère</p>
   <p class="asterisk">* Champs obligatoires</p>
   <form class="landmarkForm">
-    <input id="landmarkLocation" class="inputLandmarkLocation" required type="text" placeholder="Saisir une adresse ou un lieu sur la carte *" name="location" data-coordinates="">
-    <input type="text" id="landmark-title" name="landmark-title" class="landmark-input-text" placeholder="Saisir un titre *" title="Nom du point de repère" required="">
-    <textarea id="landmark-description" name="landmark-description" class="landmark-textarea" title="Saisir une description" placeholder="Saisir une description"></textarea>
+    <div class="dsign-form-element">
+      <input id="landmarkLocation" class="inputLandmarkLocation" required type="text" placeholder="" name="location" data-coordinates="">
+      <label class="dsign-form-label">Saisir une adresse ou un lieu sur la carte *</label>
+    </div>
+    <div class="dsign-form-element">
+      <input type="text" id="landmark-title" name="landmark-title" class="landmark-input-text" placeholder="" title="Nom du point de repère" required="">
+      <label class="dsign-form-label">Saisir un titre *</label>
+    </div>
+    <div class="dsign-form-element">
+      <textarea id="landmark-description" name="landmark-description" class="landmark-textarea" title="Saisir une description" placeholder=""></textarea>
+      <label class="dsign-form-label">Saisir une description</label>
+    </div>
     <p class="landmarkSubtitle">Choisir une couleur</p>
     <div class="landmarkRadio">
       <input class="landmarkColorInput" type="radio" id="landmark-color-blue" name="landmark-color" value="#3993F3" checked />

diff --git a/src/html/tabs/signalementWindow.html b/src/html/tabs/signalementWindow.html
@@ -12,7 +12,10 @@
     </div>
     <form class="signalementForm">
       <p class="signalementTitle">Saisir un signalement</p>
-      <input type="text" id="signalement-title" name="signalement-title" class="signalement-input-text" placeholder="Nommez votre signalement" title="Nom du signalement" required="">
+      <div class="dsign-form-element">
+        <input type="text" id="signalement-title" name="signalement-title" class="signalement-input-text" placeholder="" title="Nom du signalement" required="">
+        <label class="dsign-form-label">Nommez votre signalement</label>
+      </div>
       <select id="signalement-theme" name="signalement-theme" class="signalement-select" title="Thème">
         <option value="" selected disabled>Choisissez un thème :</option>
         <option value="Réseau routier">Réseau routier</option>
@@ -25,8 +28,15 @@
         <option value="Point évolution territoire">Point évolution territoire</option>
         <option value="Autre">Autre</option>
       </select>
-      <textarea id="signalement-description" name="signalement-description" class="signalement-textarea" title="Description" required="" placeholder="Explicitez votre signalement de façon la plus détaillée possible (sinon nous ne serons pas en mesure de le traiter)"></textarea>
-      <input type="email" id="signalement-email" class="signalement-input-text" title="Email" autocomplete="email" placeholder="Renseignez votre adresse courriel" required=""> <br/>
+      <div class="dsign-form-element">
+        <textarea id="signalement-description" name="signalement-description" class="signalement-textarea" title="Description" required="" placeholder=""></textarea>
+        <label class="dsign-form-label">Description</label>
+      </div>
+      <div class="textarea-label">Explicitez votre signalement de façon la plus détaillée possible (sinon nous ne serons pas en mesure de le traiter)</div>
+      <div class="dsign-form-element">
+        <input type="email" id="signalement-email" class="signalement-input-text" title="Email" autocomplete="email" placeholder="" required="">
+        <label class="dsign-form-label">Renseignez votre adresse courriel</label>
+      </div>
       <div class="signalement-submit">Valider</div>
     </form>
   </div>

diff --git a/src/js/nav.js b/src/js/nav.js
@@ -562,6 +562,7 @@ class MenuNavigation {
       DOM.$backTopLeftBtn.style.removeProperty("left");
       DOM.$altMenuContainer.classList.add("d-none");
       DOM.$selectOnMap.classList.add("d-none");
+      DOM.$tabContainer.style.removeProperty("height");
       Globals.currentScrollIndex = 1;
       // falls through
     case "directionsResults":