Skip to content
This repository was archived by the owner on Jul 20, 2026. It is now read-only.

Commit ea04d47

Browse files
williLGwilliLG
committed
have not finished menu price modifs yet
1 parent 4ff9aba commit ea04d47

10 files changed

Lines changed: 482 additions & 72 deletions

‎frontend/src/app/components/menu-card.component.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<article class="menu-card" [class.expanded]="expandedProductId() !== null">
2+
3+
<div class="menu-image">
4+
<img [src]="menu.image" [alt]="menu.name" (error)="fallbackImage($event)" />
5+
</div>
6+
7+
<div class="menu-header">
8+
<div>
9+
<h3 class="menu-name">{{ menu.name }}</h3>
10+
<p class="menu-description">{{ menu.description }}</p>
11+
</div>
12+
<span class="menu-price">{{ menu.price }}€</span>
13+
</div>
14+
15+
<div class="menu-products">
16+
@for (product of menu.products; track product.id) {
17+
<button class="toggle-btn" (click)="expandedProductId.set(expandedProductId() === product.id ? null : product.id)">
18+
{{ product.name }}
19+
<span class="arrow" [class.open]="expandedProductId() === product.id">▾</span>
20+
</button>
21+
@if (expandedProductId() === product.id) {
22+
<app-product-card [product]="product" [inMenu]="true"/>
23+
}
24+
}
25+
</div>
26+
<button class="btn-fire">Ajouter au panier — {{ menu.price }}€</button>
27+
28+
</article>

‎frontend/src/app/components/menu-card.component.scss‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');
2+
3+
$fire: #E8390E;
4+
$coal: #1A1208;
5+
$ash: #2E2416;
6+
$cream: #F5ECD7;
7+
$muted: #9C8E7A;
8+
9+
.menu-card {
10+
background: $coal;
11+
border: 1px solid $ash;
12+
border-radius: 6px;
13+
overflow: visible;
14+
font-family: 'DM Sans', sans-serif;
15+
color: $cream;
16+
transition: border-color 0.2s;
17+
position: relative;
18+
display: flex;
19+
flex-direction: column;
20+
z-index: 1;
21+
height: 470px; //should be changed if we need menus with 4 products i suppose
22+
23+
&.expanded {
24+
z-index: 11;
25+
border-color: $fire;
26+
height: unset;
27+
}
28+
}
29+
30+
.menu-header {
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: flex-start;
34+
gap: 1rem;
35+
padding: 1rem 1rem 0.5rem;
36+
min-width: 320px;
37+
min-height: 100px;
38+
max-width: 320px;
39+
max-height: 100px;
40+
}
41+
42+
.menu-name {
43+
font-family: 'Bebas Neue', sans-serif;
44+
font-size: 1.3rem;
45+
letter-spacing: 0.05em;
46+
margin: 0 0 0.25rem;
47+
color: $cream;
48+
}
49+
50+
.menu-description {
51+
font-size: 0.82rem;
52+
color: $muted;
53+
margin: 0;
54+
line-height: 1.5;
55+
}
56+
57+
.menu-price {
58+
font-family: 'Bebas Neue', sans-serif;
59+
font-size: 1.4rem;
60+
color: $fire;
61+
white-space: nowrap;
62+
}
63+
64+
.menu-image {
65+
height: 180px;
66+
overflow: hidden;
67+
background: $ash;
68+
69+
img {
70+
width: 100%;
71+
height: 100%;
72+
object-fit: cover;
73+
display: block;
74+
transition: transform 0.3s;
75+
}
76+
77+
&:hover img { transform: scale(1.04); }
78+
}
79+
80+
.menu-products {
81+
flex : 1;
82+
}
83+
84+
.toggle-btn {
85+
width: 100%;
86+
background: none;
87+
border: none;
88+
border-top: 1px solid $ash;
89+
color: $muted;
90+
font-family: 'DM Sans', sans-serif;
91+
font-size: 0.85rem;
92+
padding: 0.6rem 1rem;
93+
cursor: pointer;
94+
text-align: left;
95+
display: flex;
96+
justify-content: space-between;
97+
align-items: center;
98+
transition: color 0.2s;
99+
margin-top: 0.5rem;
100+
101+
&:hover { color: $cream; }
102+
103+
.arrow {
104+
transition: transform 0.2s;
105+
&.open { transform: rotate(180deg); }
106+
}
107+
}
108+
109+
.btn-fire {
110+
background: $fire;
111+
color: $cream;
112+
border: none;
113+
border-radius: 3px;
114+
padding: 0.75rem 1.5rem;
115+
font-family: 'DM Sans', sans-serif;
116+
font-size: 0.9rem;
117+
font-weight: 500;
118+
letter-spacing: 0.04em;
119+
text-transform: uppercase;
120+
cursor: pointer;
121+
width: 100%;
122+
transition: background 0.2s, transform 0.15s;
123+
margin-top : auto;
124+
125+
126+
&:hover {
127+
background: darken($fire, 8%);
128+
}
129+
}

‎frontend/src/app/components/menu-card.component.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, computed, Input, signal } from '@angular/core';
2+
import { ProductCardComponent, Product } from './product-card.component';
3+
4+
5+
export interface Menu { //temporary export for mock data
6+
id: number
7+
name: string,
8+
description: string,
9+
price: number,
10+
image: string,
11+
products: Product[]
12+
}
13+
14+
@Component({
15+
selector: 'app-menu-card',
16+
imports: [ProductCardComponent],
17+
templateUrl: './menu-card.component.html',
18+
styleUrl: './menu-card.component.scss',
19+
})
20+
export class MenuCardComponent {
21+
@Input() menu : Menu = {
22+
id: 1,
23+
name : "Menu kebab",
24+
description: "Kebab + frites + boisson au choix",
25+
price: 10.0,
26+
image: '',
27+
products: [
28+
29+
]
30+
}
31+
32+
expandedProductId = signal<number | null>(null);
33+
34+
fallbackImage(event: Event) {
35+
(event.target as HTMLImageElement).src = '/assets/images/1.png';
36+
}
37+
}

‎frontend/src/app/components/product-card.component.html‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
<h3 class="product-name">{{ product.name }}</h3>
1010
<p class="product-description">{{ product.description }}</p>
1111
</div>
12-
<span class="product-price">{{ totalPrice() }}€</span>
12+
@if (!inMenu) {
13+
<span class="product-price">{{ totalPrice() }}€</span>
14+
}
1315
</div>
1416

1517
<button class="toggle-btn" (click)="expanded.set(!expanded())">
@@ -18,73 +20,84 @@ <h3 class="product-name">{{ product.name }}</h3>
1820
</button>
1921

2022
@if (expanded()) {
23+
<div class="backdrop" (click)="expanded.set(false)"></div>
2124
<div class="customisation">
2225

23-
<div class="custom-section">
24-
<h4 class="custom-title">Ingrédients</h4>
25-
<div class="chips">
26-
@for (ingredient of ingredients(); track ingredient.id) {
27-
<button
28-
class="chip"
29-
[class.active]="ingredient.included"
30-
(click)="toggleIngredient(ingredient.id)"
31-
>
32-
{{ ingredient.included ? '✓' : '✕' }} {{ ingredient.name }}
33-
</button>
34-
}
26+
@if (ingredients().length > 0){
27+
<div class="custom-section">
28+
<h4 class="custom-title">Ingrédients</h4>
29+
<div class="chips">
30+
@for (ingredient of ingredients(); track ingredient.id) {
31+
<button
32+
class="chip"
33+
[class.active]="ingredient.included"
34+
(click)="toggleIngredient(ingredient.id)"
35+
>
36+
{{ ingredient.included ? '✓' : '✕' }} {{ ingredient.name }}
37+
</button>
38+
}
39+
</div>
3540
</div>
36-
</div>
41+
}
3742

38-
<div class="custom-section">
39-
<h4 class="custom-title">Taille</h4>
40-
<div class="chips">
41-
@for (size of sizes; track size.id) {
42-
<button
43-
class="chip"
44-
[class.active]="size.selected"
45-
(click)="toggleSize(size.id)"
46-
>
47-
{{ size.name }}
48-
@if (size.price > 0) { <span class="chip-price-add">+{{ size.price.toFixed(2) }}€</span> }
49-
@if (size.price < 0) { <span class="chip-price-rem">{{ size.price.toFixed(2) }}€</span> }
50-
</button>
51-
}
43+
@if (sizes.length > 0){
44+
<div class="custom-section">
45+
<h4 class="custom-title">Taille</h4>
46+
<div class="chips">
47+
@for (size of sizes; track size.id) {
48+
<button
49+
class="chip"
50+
[class.active]="size.selected"
51+
(click)="toggleSize(size.id)"
52+
>
53+
{{ size.name }}
54+
@if (size.price > 0) { <span class="chip-price-add">+{{ size.price.toFixed(2) }}€</span> }
55+
@if (size.price < 0) { <span class="chip-price-rem">{{ size.price.toFixed(2) }}€</span> }
56+
</button>
57+
}
58+
</div>
5259
</div>
53-
</div>
60+
}
5461

55-
<div class="custom-section">
56-
<h4 class="custom-title">Suppléments</h4>
57-
<div class="chips">
58-
@for (extra of supplements; track extra.id) {
59-
<button
60-
class="chip"
61-
[class.active]="extra.selected"
62-
(click)="toggleExtra(extra.id)"
63-
>
64-
{{ extra.name }}
65-
@if (extra.price > 0) { <span class="chip-price">+{{ extra.price.toFixed(2) }}€</span> }
66-
</button>
67-
}
62+
@if (supplements.length > 0){
63+
<div class="custom-section">
64+
<h4 class="custom-title">Suppléments</h4>
65+
<div class="chips">
66+
@for (extra of supplements; track extra.id) {
67+
<button
68+
class="chip"
69+
[class.active]="extra.selected"
70+
(click)="toggleExtra(extra.id)"
71+
>
72+
{{ extra.name }}
73+
@if (extra.price > 0) { <span class="chip-price">+{{ extra.price.toFixed(2) }}€</span> }
74+
</button>
75+
}
76+
</div>
6877
</div>
69-
</div>
78+
}
7079

71-
<div class="custom-section">
72-
<h4 class="custom-title">Sauces</h4>
73-
<div class="chips">
74-
@for (sauce of sauces; track sauce.id) {
75-
<button
76-
class="chip"
77-
[class.active]="sauce.selected"
78-
(click)="toggleExtra(sauce.id)"
79-
>
80-
{{ sauce.name }}
81-
</button>
82-
}
80+
@if (sauces.length > 0){
81+
<div class="custom-section">
82+
<h4 class="custom-title">Sauces</h4>
83+
<div class="chips">
84+
@for (sauce of sauces; track sauce.id) {
85+
<button
86+
class="chip"
87+
[class.active]="sauce.selected"
88+
(click)="toggleExtra(sauce.id)"
89+
>
90+
{{ sauce.name }}
91+
</button>
92+
}
93+
</div>
8394
</div>
84-
</div>
95+
}
8596

8697
</div>
8798
}
88-
<button class="btn-fire">Ajouter au panier — {{ totalPrice() }}€</button>
99+
@if (!inMenu) {
100+
<button class="btn-fire">Ajouter au panier — {{ totalPrice() }}€</button>
101+
}
89102

90103
</article>

0 commit comments

Comments
 (0)