From 49a839d930e61a8eb344a896c1c8d83f43ab5556 Mon Sep 17 00:00:00 2001
From: Romain <51331158+zylfu@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:15:42 +0100
Subject: [PATCH] Mise a jour filters-page

---
 .../filters-page/filters-page.component.html  | 98 ++++++++-----------
 .../filters-page/filters-page.component.scss  | 37 ++++---
 2 files changed, 60 insertions(+), 75 deletions(-)

diff --git a/src/app/pages/filters-page/filters-page.component.html b/src/app/pages/filters-page/filters-page.component.html
index bbe5d26..87f2558 100644
--- a/src/app/pages/filters-page/filters-page.component.html
+++ b/src/app/pages/filters-page/filters-page.component.html
@@ -3,85 +3,71 @@
 
 
 
-<div class="accordion" id="accordionPanelsStayOpenExample">
-   <!-- <div class="accordion-item"> -->
+<div class="accordion">
+   <div class="accordion-item">
     <h2 class="accordion-header" id="panelsStayOpen-headingOne">
-      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
-       Distance
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne">
+        <p style="font-size: 20px;">Distance</p>
       </button>
     </h2>
     <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
       <div class="accordion-body">
-        test
+        <label for="price-min">Price:</label>
+        <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
       </div>
     </div>
+   </div>
 
-
-
-  <!-- <div class="accordion-item"> -->
+  <div class="accordion-item">
     <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
-        Prix
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo">
+        <p style="font-size: 20px;">Prix</p>
       </button>
     </h2>
     <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
       <div class="accordion-body">
       </div>
     </div>
+ </div>
 
-    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
-        Prix
-      </button>
-    </h2>
-    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
-      <div class="accordion-body">
-      </div>
-    </div>
-
-
-  <!-- <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
-        Sur Place / A emporter
-      </button>
-    </h2>
-    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
-      <div class="accordion-body">
-      </div>
+ <div class="accordion-item">
+  <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree">
+      <p style="font-size: 20px;">Sur Place / A Emporter</p>
+    </button>
+  </h2>
+  <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
+    <div class="accordion-body">
     </div>
   </div>
+</div>
 
-
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingFour">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
-        Acces PMR
-      </button>
-    </h2>
-    <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour">
-      <div class="accordion-body">
-      </div>
+<div class="accordion-item">
+  <h2 class="accordion-header" id="panelsStayOpen-headingFour">
+    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFour">
+      <p style="font-size: 20px;">Accès PMR</p>
+    </button>
+  </h2>
+  <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour">
+    <div class="accordion-body">
     </div>
   </div>
+</div>
 
-
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingFive">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
-        Avis
-      </button>
-    </h2>
-    <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
-      <div class="accordion-body">
-      </div>
+<div class="accordion-item">
+  <h2 class="accordion-header" id="panelsStayOpen-headingFive">
+    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive">
+      <p style="font-size: 20px;">Avis</p>
+    </button>
+  </h2>
+  <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
+    <div class="accordion-body">
     </div>
-  </div> -->
-
-
-  <button class="btn-search btn-primary" type="button">Lancer la recherche</button>
-
-
+  </div>
+</div>
 
 
 </div>
+
+  <button class="btn-search btn-primary" type="button">LANCER LA RECHERCHE</button>
+
diff --git a/src/app/pages/filters-page/filters-page.component.scss b/src/app/pages/filters-page/filters-page.component.scss
index 316823f..d7321c4 100644
--- a/src/app/pages/filters-page/filters-page.component.scss
+++ b/src/app/pages/filters-page/filters-page.component.scss
@@ -12,43 +12,42 @@
   justify-content: flex-start;
   margin: 0 0 0.5em 8.2em;
   color: #CE0000;
-
 }
 
 
-
 .accordion{
-padding-top: 200px;
-  max-width: 50%;
+padding-top: 100px;
+max-width: 30%;
 margin : 0 auto;
-padding-bottom: 200px;
-border-radius: 20px;
-
+margin-bottom: 100px;
 
 }
 
-.accordion-header{
+.accordion-body{
+  background-color: #F5F3F3;
+
+}
+
+.accordion-item{
 
   margin-bottom: 70px;
-  border-radius: 30px;
 }
 
-.accordion-button{
-background-color: #CE0000;
-color: white;
-font-family: cursive;
-border-radius: 30px 30px 30px 30px;
-padding-top: 50px;
-
-
-
+ .accordion-button{
+ background-color: #CE0000;
+ color: white;
+ font-family: cursive;
+filter: drop-shadow(0 0 0.2rem grey);
 }
 
-
 .btn-search{
   background-color: #CE0000;
   text-align: center;
   margin: 100px auto;
   border-radius: 20px;
   display: block;
+  height: 75px;
+  width: 300px;
+  font-size: 20px;
+
 }