Merge branch 'dev' of https://github.com/RomainVgr/simpleat into dev

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
         "bootstrap": "^5.1.3",
+        "bootstrap-icons": "^1.7.2",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -3401,6 +3402,14 @@
         "@popperjs/core": "^2.10.2"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
+      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -15041,6 +15050,11 @@
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
+      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.7.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/card-resto/card-resto.component.html

@@ -1,27 +1,58 @@
-<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 18rem;" >
+<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 19rem;" >
       <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
+      <div class="rond position-absolute">
+        <i class="heart far fa-heart"></i>  
+      </div>
     <div class="card-body rounded-bottom">
         <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
           
           <div class="accordion" id="accordionExample">
             
-              <h2 class="accordion-header" id="headingOne">
+              <h2 class="accordion-header pt-1" id="headingOne">
-            <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               PLUS D'INFOS
             </button>
           </h2>
           
-          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+          <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-            <div class=" body accordion-body pt-5">
+            <div class=" body accordion-body">
               <strong>This is the first item's accordion body.</strong>
-              <ul>
+                <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
-                <li><i class="far fa-star"></i></li>
+                    <ul class="avis-star d-flex flex-row  ps-1 pt-3 pe-0 pb-0 mb-0  ">
-                <li><i class="far fa-star"></i></li>
+                      <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
+                      <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
+                      <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
+                      <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
+                      <li class="star"><i class="bi bi-star-fill"></i></li>
                     </ul>
+                    <span class="ps-3 mt-3 "style="font-size: 1.1em; color:#545454" >5/5</span>
+                </div>
+                    <div class="infos ps-1 pt-2"style="color:#545454">
+                      <span class="categorie pe-4"style="font-style: italic;">Kebab</span>
+                      <i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
+                      <i class="fas fa-euro-sign ps-2 pe-1"style="color:#a8a8a8"></i><span class="prix"style="font-weight: bold;">5-10€</span>
+                  </div>
+                    <div class="trait-rouge pt-3"></div>
+                      <p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis 
+                      les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour 
+                      réaliser un livre spécimen de polices de texte.</p>
+                        <div class="trait-rouge pt-2 pb-0"></div>
+                          <div class="critere ps-1 pt-3">
+                            <span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+                            <span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+                          </div>
+                            <div class="trait-rouge pt-3"></div>
+                              <div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
+                                <span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
+                              </div>
+                              <div class="reserver pt-2">
+                              <button type="button" class="button">Réserver</button>
+                            </div>
           </div>
           
       </div>
-    </div>
+      
+    <div>
 </div>
 
 

src/app/card-resto/card-resto.component.scss

@@ -1,3 +1,19 @@
+.rond{
+    padding: 0.7em;
+    background-color: rgb(255, 255, 255);
+    top: 1em;
+    right: 1em;
+    border-radius: 50%;
+}
+
+.heart{
+    display: flex;
+    font-size: 1.6em;
+    padding: 0;
+    margin:0;
+    color: #FF2048;
+}
+
 .titre-resto{
     margin-bottom: 0.9rem;
 }
@@ -10,12 +26,58 @@
     border-radius: 0 0 0.25rem 0.25rem;
     padding: 1.375rem 0.75rem;
     
-    
 }
+.accordion-button.collapsed {
+    background: #CE0000;
+  }
+  
+  .accordion-button.collapsed::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  }
+ 
+
+  .ps-5 {
+    padding-left: 5.4rem !important;
+}
+.pe-5 {
+    padding-right: 5rem !important;
+}
+
+
 .accordion .btn:focus{
     box-shadow: none;
 }
 
 
 
+.star{
+    list-style-type: none;
+    font-size: 1.5em;
+    color:#ffd900;
+    
+}
+
+.trait-rouge{
+border-bottom: 1px solid #CE0000;
+opacity: 50%;
+
+}
+
+.button{
+    display: block;
+    padding: 0.5em 2em 0.5em ;
+    width: 100%;
+    border-radius: 5px;
+    border: none;
+    background-color: #545454;
+    color: #ffffff;
+    text-transform: uppercase;
+    font-weight: bold;
+
+}
+
+
+
+
+
 

src/app/header/components/search-bar/search-bar.component.html

@@ -1,8 +1,10 @@
-<nav class="navbar navbar-light">
+<nav class="navbar navbar-light p-0">
-  <div class="container-fluid">
+  <div class="container-fluid d-flex align-items-center pt-3">
-<img src="assets/images-header/logo.png" alt="logo">
+    <div class="logo ps-4">
-    <form style="width: 30%;" class="d-flex">
+      <img src="assets/images-header/LOGO2.png" alt="logo">
-      <input class="form-control me-5" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
+    </div>
+      <form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
+        <input class="form-control me-5 position-relative" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
       </form>
         <div class="trait">
           <p>LE BON PLAN POUR MANGER</p>

src/app/header/components/search-bar/search-bar.component.scss

@@ -19,22 +19,18 @@
 
 }
 
-img{
-  padding-left: 2%;
-
-}
-
-
 p{
   background-color: white;
   position: absolute;
   top: 15px;
-  left: 130px;
+  left: 68px;
   padding : 0 10px 0 10px;
-  font-weight: bolder;
   color: grey;
 }
 
-// .form-control{
+
-// }
+
+input[type="search"], textarea{
+  background-color: #edf5f1;
+}
 

src/assets/pieton.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.5" stroke="#545454"/>
+<path d="M8.33333 3C8.10417 3 7.90799 3.09415 7.74479 3.28245C7.5816 3.47075 7.5 3.69712 7.5 3.96154C7.5 4.22596 7.5816 4.45232 7.74479 4.64062C7.90799 4.82893 8.10417 4.92308 8.33333 4.92308C8.5625 4.92308 8.75868 4.82893 8.92188 4.64062C9.08507 4.45232 9.16667 4.22596 9.16667 3.96154C9.16667 3.69712 9.08507 3.47075 8.92188 3.28245C8.75868 3.09415 8.5625 3 8.33333 3ZM6.43229 12.7115L7.3125 11.0469C7.40972 10.8626 7.48264 10.6783 7.53125 10.494L7.83333 9.34014L8.74479 10.4399L9.54167 12.6454C9.57986 12.7536 9.63976 12.8397 9.72135 12.9038C9.80295 12.9679 9.89583 13 10 13C10.1389 13 10.2569 12.9439 10.3542 12.8317C10.4514 12.7196 10.5 12.5833 10.5 12.4231C10.5 12.355 10.4878 12.2829 10.4635 12.2067L9.73438 10.1334C9.68924 10.0012 9.65365 9.91206 9.6276 9.86599C9.60156 9.81991 9.5434 9.74079 9.45312 9.62861L8.42708 8.35457L8.73958 6.65986L9.03125 7.3149C9.08681 7.45112 9.16319 7.54928 9.26042 7.60938C9.28125 7.62139 9.64062 7.83173 10.3385 8.24038C10.5052 8.33654 10.6146 8.38462 10.6667 8.38462C10.7639 8.38462 10.8438 8.34856 10.9062 8.27644C10.9688 8.20433 11 8.11218 11 8C11 7.83574 10.934 7.71354 10.8021 7.63341L9.60938 6.90024L9.14062 5.66226C9.05382 5.44191 8.93924 5.32171 8.79688 5.30168L7.60417 5.14543C7.49306 5.13341 7.34375 5.17147 7.15625 5.25962L5.89583 5.83654C5.82639 5.86859 5.75868 5.92268 5.69271 5.9988C5.62674 6.07492 5.58333 6.15304 5.5625 6.23317C5.28819 7.05048 5.10764 7.59535 5.02083 7.86779C5.00694 7.90385 5 7.94792 5 8C5 8.10417 5.03299 8.19431 5.09896 8.27043C5.16493 8.34655 5.24306 8.38462 5.33333 8.38462C5.40278 8.38462 5.47309 8.36558 5.54427 8.32752C5.61545 8.28946 5.66146 8.24038 5.68229 8.18029L6.21354 6.56971L7.30729 6.09495L6.54167 10.2236L5.5625 12.1466C5.52083 12.2388 5.5 12.3309 5.5 12.4231C5.5 12.5833 5.54861 12.7196 5.64583 12.8317C5.74306 12.9439 5.86111 13 6 13C6.1875 13 6.3316 12.9038 6.43229 12.7115Z" fill="#545454"/>
+</svg>

src/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>