vincentRamiere
/
simpleat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs carte restau accordeon

This commit is contained in:
Your Name 2022-02-14 17:27:44 +01:00
parent 5d3549b0b6
commit bdeb6fd265
12 changed files with 127 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -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,

67
src/app/card-resto/card-resto.component.html
View File

@ -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">
<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;">{{
restaurant.nom }}</h3>
<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"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
PLUS D'INFOS
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class=" body accordion-body">
<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;">
{{restaurant.nom }}</h3>
<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"
[attr.data-bs-target]="'#restaurant'+ restaurant.id" aria-expanded="true" aria-controls="collapseOne">
PLUS D'INFOS</button>
</h2>
<div id="restaurant{{restaurant.id}}" 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 ">
<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>
<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"><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>
<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>
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>
@ -72,5 +67,5 @@
</div>
<div>
</div>
</div>

14
src/app/card-resto/card-resto.component.scss
View File

@ -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%;

3
src/app/card-resto/card-resto.component.ts
View File

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

6
src/app/components/template-page/template-page.component.html Normal file
View File

@ -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>

15
src/app/components/template-page/template-page.component.scss Normal file
View File

@ -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;
}

25
src/app/components/template-page/template-page.component.spec.ts Normal file
View File

@ -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();
});
});

16
src/app/components/template-page/template-page.component.ts Normal file
View File

@ -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 {
}
}

10
src/app/pages/filters-page/filters-page.component.html
View File

@ -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">

8
src/app/pages/filters-page/filters-page.component.scss
View File

@ -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;
width: 300px;
height: 62px;
width: 272px;
font-size: 20px;
border: none;
}
span{
font-weight: 500 ;
}

3
src/app/pages/home-page/home-page.component.ts
View File

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

15
src/app/pages/resto-page/resto-page.component.html
View File

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