migration home page vers list category

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

@@ -10,9 +10,9 @@
         <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">
+        <div class="accordion  " id="accordionExample">
           <h2 class="accordion-header pt-1" id="headingOne">
-              <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse"
+              <button class="btn shadow 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">
               PLUS D'INFOS</button>
           </h2>
@@ -75,6 +75,7 @@
           <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>
+            
             <app-icon 
             [iconName]="restaurant.accesPMR ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-1 pt-1'"
             [iconColor]="restaurant.accesPMR ? '#4ECB71' : '#ED2F2F'"

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

@@ -10,7 +10,7 @@ img{
   display: block;
   margin: 0 auto;
   padding: 0;
-  margin: 0.5em 0 0 0;
+  
   // filter: drop-shadow(0 0 0.30rem rgb(165, 165, 165));
 }
 

src/app/pages/favoris-user/favoris-user.component.html

@@ -1 +1,8 @@
-<p>favoris-user works!</p>
+<h2 class="titre ">Mes favoris :</h2>
+<div class="separation"></div>
+<div class="parent d-flex justify-content-center align-items-center">
+    <div class="card">
+        <h3>Mon top</h3>
+    </div>
+    
+</div>

src/app/pages/favoris-user/favoris-user.component.scss

@@ -0,0 +1,27 @@
+.parent{
+    width: auto;
+    margin: 3em 10em 0 10em ;
+    
+}
+.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;
+    
+}
+
+.card{
+    width: 800px;
+    margin: 0;
+    padding: 0;
+    background-color: #CE0000;
+}

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

@@ -1,8 +1,2 @@
-<h2 class="titre ">Catégories :</h2>
+<h1>Hello :D</h1>
-<div class="separation"></div>
-<div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row  ">
-    <div *ngFor="let category of listCategories">
-    <app-card-category [categoryData]="category"></app-card-category>
-    </div>
-</div>
 

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

@@ -1,20 +0,0 @@
-.parent{
-    width: auto;
-    margin: 3em 10em 0 10em ;
-    
-}
-.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/pages/home-page/home-page.component.ts

@@ -8,19 +8,13 @@ import { ApiBackService } from 'src/app/services/api-back.service';
 })
 export class HomePageComponent implements OnInit {
 
-  listCategories : string[];
 
   constructor(private apiBackService : ApiBackService) {
-    this.listCategories = [];
+    
    }
 
   ngOnInit(): void {
-    this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
-      // console.log(listCategories);
       
-      this.listCategories = listCategories;
-
-    });    
 
   }
   onEventLike(isLiked : boolean) {

src/app/pages/list-categories/list-categories.component.html

@@ -1 +1,7 @@
-category-works!
+<h2 class="titre ">Catégories :</h2>
+<div class="separation"></div>
+<div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row  ">
+    <div *ngFor="let category of listCategories">
+    <app-card-category [categoryData]="category"></app-card-category>
+    </div>
+</div>

src/app/pages/list-categories/list-categories.component.scss

@@ -0,0 +1,20 @@
+.parent{
+    width: auto;
+    margin: 3em 10em 0 10em ;
+    
+}
+.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/pages/list-categories/list-categories.component.ts

@@ -8,9 +8,18 @@ import { ApiBackService } from 'src/app/services/api-back.service';
   styleUrls: ['./list-categories.component.scss']
 })
 export class ListCategoriesComponent implements OnInit {
+  listCategories : string[];
 
   constructor(private apiBackService : ApiBackService) {
+    this.listCategories = [];
    }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
+      // console.log(listCategories);
+
+      this.listCategories = listCategories;
+
+    }); 
+  }
 }

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

@@ -5,6 +5,7 @@
     justify-content: flex-start;
     border-bottom: 2px solid #CE0000;
     max-width: 83%;
+    padding-bottom: 3vh;
 }
 
 .titre{

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

@@ -20,7 +20,7 @@ export class RestoPageComponent implements OnInit {
     if(this.apiBackService.routeParam === "filtres"){
       this.listRestaurants = this.apiBackService.restoFilter;
 
-    }else if(this.apiBackService.routeParam === "home"){
+    }else if(this.apiBackService.routeParam === "categories"){
     this.apiBackService.restoByCat.subscribe((restaurants: any[]) => {
       this.listRestaurants = restaurants;
     });