From ef9eafb8bff85b513aa96a9468c97d37cf4c8f7a Mon Sep 17 00:00:00 2001
From: Amandine Arias <amandine.arias@gmail.com>
Date: Tue, 18 May 2021 13:08:48 +0200
Subject: [PATCH] update (styles) : improvements (#7)

---
 css/styles.css             | 19 ++++++++-----------
 js/pro_page.js             | 18 ------------------
 propage.html               | 18 ++++++++++--------
 sass/layout/_contact.scss  | 17 +++++++++++------
 sass/layout/_filter.scss   |  2 --
 sass/layout/_footer.scss   |  7 +++++--
 sass/layout/_lightbox.scss |  2 +-
 7 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index dcf67ba..b20afca 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -423,12 +423,6 @@ label {
   margin: 5px 0;
 }
 
-input {
-  padding: 8px;
-  border: 0.8px solid #ccc;
-  outline: none;
-}
-
 .text-control,
 .text-area {
   margin: 0;
@@ -436,6 +430,8 @@ input {
   width: 100%;
   border-radius: 3px;
   font-size: medium;
+  border: 0.8px solid #ccc;
+  outline: none;
 }
 
 .tex-control {
@@ -503,7 +499,6 @@ input {
 }
 .filter__arrow {
   position: absolute;
-  margin-top: 3px;
   margin-left: -32px;
   padding: 10px;
   color: white;
@@ -511,7 +506,6 @@ input {
 }
 .filter__box.open .filter__arrow {
   transform: rotateX(180deg);
-  margin-top: 2px;
 }
 .filter__options {
   position: absolute;
@@ -685,7 +679,7 @@ input {
   max-width: 100%;
   max-height: 650px;
   border-radius: 3px;
-  margin: auto;
+  margin: 0 15px;
 }
 .lightbox__title {
   margin-top: 5px;
@@ -757,6 +751,7 @@ input {
 }
 .footer__content {
   display: inline-flex;
+  align-items: center;
 }
 
 footer input {
@@ -778,8 +773,10 @@ footer input:focus {
 }
 
 footer i {
-  width: 13px;
-  height: 13px;
+  padding-top: 1px;
+  width: 14px;
+  height: 14px;
+  font-size: small;
   border-radius: 50%;
 }
 footer i:focus {
diff --git a/js/pro_page.js b/js/pro_page.js
index 77d27c9..1b86cdd 100644
--- a/js/pro_page.js
+++ b/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');
diff --git a/propage.html b/propage.html
index 60575c4..0f2aa24 100644
--- a/propage.html
+++ b/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> -->
diff --git a/sass/layout/_contact.scss b/sass/layout/_contact.scss
index 4529c1e..02d06c7 100644
--- a/sass/layout/_contact.scss
+++ b/sass/layout/_contact.scss
@@ -74,12 +74,6 @@ label {
   margin: 5px 0;
 }
 
-input {
-  padding: 8px;
-  border: 0.8px solid #ccc;
-  outline: none;
-}
-
 .text-control,
 .text-area {
   margin: 0;
@@ -87,7 +81,10 @@ input {
   width: 100%;
   border-radius: 3px;
   font-size: medium;
+  border: 0.8px solid #ccc;
+  outline: none;
 }
+
 .tex-control {
   height: 50px;
 }
@@ -95,6 +92,14 @@ input {
   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;
diff --git a/sass/layout/_filter.scss b/sass/layout/_filter.scss
index 191644a..a4a9e1f 100644
--- a/sass/layout/_filter.scss
+++ b/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 {
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index e808377..9fb4d8b 100644
--- a/sass/layout/_footer.scss
+++ b/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 {
diff --git a/sass/layout/_lightbox.scss b/sass/layout/_lightbox.scss
index ca8a417..5964052 100644
--- a/sass/layout/_lightbox.scss
+++ b/sass/layout/_lightbox.scss
@@ -33,7 +33,7 @@
     max-width: 100%;
     max-height: 650px;
     border-radius: 3px;
-    margin: auto;
+    margin: 0 15px;
   }
 
   &__title {