modifs carte restau accordeon

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com
 import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
 import { AvisBarComponent } from './filters/avis-bar/avis-bar.component';
 import { IconComponent } from './filters/icon/icon.component';
+import { TemplatePageComponent } from './components/template-page/template-page.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { IconComponent } from './filters/icon/icon.component';
     PageNotFoundComponent,
     FiltersPageComponent,
     AvisBarComponent,
-    IconComponent
+    IconComponent,
+    TemplatePageComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,49 +1,44 @@
 <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">
+    <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
-  <div class="rond position-absolute">
+      <div class="rond position-absolute"><i class="heart far fa-heart"></i></div>
-    <i class="heart far fa-heart"></i>
+      <div class="card-body rounded-bottom">
-  </div>
+        <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">
-  <div class="card-body rounded-bottom">
+          {{restaurant.nom }}</h3>
-    <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">{{
+        
-      restaurant.nom }}</h3>
+        <div class="accordion " id="accordionExample">
-
+          <h2 class="accordion-header pt-1" id="headingOne">
-    <div class="accordion" id="accordionExample">
+              <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse"
-
+              [attr.data-bs-target]="'#restaurant'+ restaurant.id" aria-expanded="true" aria-controls="collapseOne">
-      <h2 class="accordion-header pt-1" id="headingOne">
+              PLUS D'INFOS</button>
-        <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse"
+          </h2>
-          data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          <div id="restaurant{{restaurant.id}}" class="accordion-collapse collapse" aria-labelledby="headingOne"
-          PLUS D'INFOS
+          data-bs-parent="#accordionExample">
-        </button>
+          <div class=" body accordion-body">
-      </h2>
-
-      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
-        data-bs-parent="#accordionExample">
-        <div class=" body accordion-body">
           <strong>This is the first item's accordion body.</strong>
           <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
-            <ul class="avis-star d-flex flex-row  ps-1 pt-3 pe-0 pb-0 mb-0  ">
+              <ul class="avis-star d-flex flex-row  ps-1 pt-3 pe-0 pb-0 mb-0  ">
-              <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 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>
+                <li class="star"><i class="bi bi-star-fill"></i></li>
-            </ul>
+              </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"
+              <i class="fas fa-walking ps-2 pe-1" style="color:#a8a8a8"></i><span class="categorie pe-4"
-              style="font-weight: bold;">550m</span>
+                style="font-weight: bold;">550m</span>
-            <i class="fas fa-euro-sign ps-2 pe-1" style="color:#a8a8a8"></i><span class="prix"
+              <i class="fas fa-euro-sign ps-2 pe-1" style="color:#a8a8a8"></i><span class="prix"
-              style="font-weight: bold;">5-10€</span>
+                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
+                texte standard de l'imprimerie depuis
-            les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
+                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>
+                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>            
@@ -72,5 +67,5 @@
 
       </div>
 
-      <div>
+    
-      </div>
+</div>

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

@@ -30,13 +30,13 @@
 .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 {
+.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 {
@@ -81,3 +81,5 @@ opacity: 50%;
 
 
 
+
+

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

@@ -12,8 +12,11 @@ export class CardRestoComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+
     console.log(this.restaurant);
     
   }
 
+
+
 }

src/app/components/template-page/template-page.component.html

@@ -0,0 +1,6 @@
+
+    <h2 class="titre ">{{title}}</h2>
+    <div class="separation"></div>
+    <div class="parent d-flex justify-content-center align-items-start flex-wrap flex-row  ">
+        <ng-content></ng-content>
+    </div>

src/app/components/template-page/template-page.component.scss

@@ -0,0 +1,15 @@
+.separation{
+    display: flex;
+    justify-content: flex-start;
+    border-bottom: 2px solid #CE0000;
+    max-width: 83%;
+}
+
+.titre{
+    
+    display: flex;
+    justify-content: flex-start;
+    margin: 2.5em 0 0.5em 8.2em;
+    color: #CE0000;
+    
+}

src/app/components/template-page/template-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TemplatePageComponent } from './template-page.component';
+
+describe('TemplatePageComponent', () => {
+  let component: TemplatePageComponent;
+  let fixture: ComponentFixture<TemplatePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TemplatePageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplatePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/template-page/template-page.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-template-page',
+  templateUrl: './template-page.component.html',
+  styleUrls: ['./template-page.component.scss']
+})
+export class TemplatePageComponent implements OnInit {
+  @Input() title!: string;
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/filters-page/filters-page.component.html

@@ -9,7 +9,7 @@
       <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">
-            <p style="font-size: 20px;">Distance</p>
+            <p style="font-family:'Roboto';font-size: 20px;">Distance</p>
           </button>
         </h2>
         <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
@@ -32,7 +32,7 @@
       <div class="accordion-item">
         <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
           <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo">
-            <p style="font-size: 20px;">Prix</p>
+            <p style="font-family:'Roboto'; font-size: 20px;">Prix</p>
           </button>
         </h2>
         <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
@@ -56,7 +56,7 @@
     <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>
+          <p style="font-family:'Roboto'; font-size: 20px;">Sur Place / A Emporter</p>
         </button>
       </h2>
       <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
@@ -79,7 +79,7 @@
     <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>
+          <p style="font-family:'Roboto'; font-size: 20px;">Accès PMR</p>
         </button>
       </h2>
       <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour">
@@ -100,7 +100,7 @@
     <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>
+          <p style="font-family:'Roboto'; font-size: 20px;">Avis</p>
         </button>
       </h2>
       <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">

src/app/pages/filters-page/filters-page.component.scss

@@ -46,15 +46,17 @@ filter: drop-shadow(0 0 0.2rem grey);
   background-color: #CE0000;
   text-align: center;
   margin: 100px auto;
-  border-radius: 20px;
+  border-radius: 10px;
   display: block;
-  height: 75px;
+  height: 62px;
-  width: 300px;
+  width: 272px;
   font-size: 20px;
+  border: none;
 
 }
 
 span{
+ 
   font-weight: 500 ;
 }
 

src/app/pages/home-page/home-page.component.ts

@@ -25,6 +25,9 @@ export class HomePageComponent implements OnInit {
       this.listCategories = listCategories;
 
     });
+    console.log(this.apiBackService);
+    
+    
 
   }
 

src/app/pages/resto-page/resto-page.component.html

@@ -1,11 +1,10 @@
-
+<app-template-page [title]="'Résultats :'">
-    <h2 class="titre ">Résultats :</h2>
+    <div *ngFor="let restaurantData of listRestaurants">
-        <div class="separation"></div>
+        <app-card-resto [restaurant]= "restaurantData"></app-card-resto>
-        <div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row  ">
+    </div>
-        <div *ngFor="let restaurantData of listRestaurants">
+</app-template-page>
-                <app-card-resto [restaurant]= "restaurantData"></app-card-resto>
-            </div>
-        </div>
     
+        
+