update (styles) : improvements (#7)

js/pro_page.js

@@ -34,29 +34,16 @@ function fetchData() {
       );
       console.log(photographerWorks); // array media by ID
 
-      // ---------- A RESOUDRE ---------- //
-      // LANCE L'AFFICHAGE DE LA GALERIE FILTREE PAR POPULARITE PAR DEFAUT
-      // PB : ATTRIBUT "selected" EST DEJA POSITIONNE SUR "popularite"
-      // enventListener SE DECLANCHE AU CLICK DONC "selected" N'EST PAS DETECTE
-      // AU CHARGEMENT DE LA PAGE
-
-      // ---------- NE FONCTIONNE PAS ---------- //
-      // window.onload = () => {
-      //   launchGallery();
-      // };
-
       // AFFICHE LA GALLERIE SELON FILTRE CHOISI
       const gallery = document.getElementsByClassName('gallery')[0];
       const galleryCard = document.getElementsByClassName('gallery__card');
 
       const launchGallery = () => {
-        // ---------- SUPPRIMER SI POSSIBLE ---------- //
         for (let i = 0; i < photographerWorks.length; i++) {
           // affiche la galerie triee par popularite (par defaut)
           location.hash = 'filtre popularite';
           setGallery(photographerWorks.sort(filterBy('likes', 'desc'))[i]);
         }
-        // ------------------------------------------ //
 
         for (const option of document.querySelectorAll('.filter__option')) {
           option.addEventListener('click', function () {
@@ -92,18 +79,13 @@ function fetchData() {
             setLightbox();
           });
         }
-        // ---------- SUPPRIMER SI POSSIBLE ---------- //
         // COMPTE LES LIKES : INCREMENTE / DECREMENTE DE 1 AU CLIC
         likesCount();
         // AFFICHE LE MEDIA CHOISI DANS LA LIGHTBOX (galerie par defaut)
         setLightbox();
-        // ------------------------------------------ //
       };
       launchGallery();
 
-      // ---------- NE FONCTIONNE PAS ---------- //
-      // (function() {launchGallery()})();
-
       // AFFICHE LE NOMBRE TOTAL DE LIKES DU PHOTOGRAPHE
       const totalLikesCounter = () => {
         const totalCounter = document.querySelector('#total-likes');

propage.html

@@ -120,9 +120,9 @@ <h2 class="form__body--name"></h2>
                   <label for="firstName">Prénom</label>
                   <small id="errorFirst"></small>
                   <input
-                    class="text-control"
                     type="text"
                     id="firstName"
+                    class="text-control"
                     name="firstName"
                     pattern="^\D*$"
                     required
@@ -132,9 +132,9 @@ <h2 class="form__body--name"></h2>
                   <label for="lastName">Nom</label>
                   <small id="errorLast"></small>
                   <input
-                    class="text-control"
                     type="text"
                     id="lastName"
+                    class="text-control"
                     name="lastName"
                     pattern="^\D*$"
                     required
@@ -144,34 +144,36 @@ <h2 class="form__body--name"></h2>
                   <label for="email">E-mail</label>
                   <small id="errorEmail"></small>
                   <input
-                    class="text-control"
                     type="email"
                     id="email"
+                    class="text-control"
                     name="email"
                     autocapitalize="none"
                     required
                   />
                 </div>
                 <div class="formData">
-                  <label for="massage">Message</label>
+                  <label for="message">Message</label>
                   <small id="errorMessage"></small>
                   <textarea
-                  class="text-control text-area"
+                  type="text"
                   id="message"
+                  class="text-control text-area"
                   name="message"
+                  rows="5"
+                  cols="50"
                   pattern="^\D*$"
                   required
                   >
                   </textarea>
                 </div>
-                <!-- <div class="formData"> -->
                 <div>
                   <input
+                    type="submit"
+                    id="submit"
                     class="btn-submit"
                     for="validate"
                     name="validate"
-                    type="submit"
-                    id="submit"
                     value="Envoyer"
                   />
                   <!-- <small id="errorForm">error</small> -->

sass/layout/_contact.scss

@@ -74,27 +74,32 @@ label {
   margin: 5px 0;
 }
 
-input {
-  padding: 8px;
-  border: 0.8px solid #ccc;
-  outline: none;
-}
-
 .text-control,
 .text-area {
   margin: 0;
   padding: 8px;
   width: 100%;
   border-radius: 3px;
   font-size: medium;
+  border: 0.8px solid #ccc;
+  outline: none;
 }
+
 .tex-control {
   height: 50px;
 }
 .text-area {
   height: 150px;
 }
 
+// .text-control:invalid {
+//   border: 2px solid black;
+// }
+
+// .text-area:invalid {
+//   border: 2px solid black;
+// }
+
 .formData small {
   padding-left: 5px;
   font-size: x-small;

sass/layout/_filter.scss

@@ -33,7 +33,6 @@
 
   &__arrow {
     position: absolute;
-    margin-top: 3px;
     margin-left: -32px;
     padding: 10px;
     color: white;
@@ -42,7 +41,6 @@
 
   &__box.open .filter__arrow {
     transform: rotateX(180deg);
-    margin-top: 2px;
   }
 
   &__options {

sass/layout/_footer.scss

@@ -11,6 +11,7 @@
 
   &__content {
     display: inline-flex;
+    align-items: center;
   }
 }
 
@@ -34,8 +35,10 @@ footer input {
 }
 
 footer i {
-  width: 13px;
-  height: 13px;
+  padding-top: 1px;
+  width: 14px;
+  height: 14px;
+  font-size: $s;
   border-radius: 50%;
 
   &:focus {

sass/layout/_lightbox.scss

@@ -33,7 +33,7 @@
     max-width: 100%;
     max-height: 650px;
     border-radius: 3px;
-    margin: auto;
+    margin: 0 15px;
   }
 
   &__title {