Skip to content

Commit 33d4b6b

Browse files
pYassinepYassine
committed
fix(frontend): add new rules for css
1 parent 6ff603e commit 33d4b6b

File tree

46 files changed

+582
-823
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+582
-823
lines changed

‎.claude/settings.local.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
"permissions": {
33
"allow": [
44
"Bash(npm run build:frontend:*)",
5-
"Bash(npm run build:*)"
5+
"Bash(npm run build:*)",
6+
"Bash(find src:*)",
7+
"WebSearch",
8+
"WebFetch(domain:www.systeme-de-design.gouv.fr)",
9+
"Bash(find:*)",
10+
"Bash(xargs:*)",
11+
"Bash(npx ng:*)",
12+
"Bash(python3:*)"
613
]
714
}
815
}

‎packages/frontend/angular.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
],
3131
"styles": [
3232
"src/styles.scss",
33-
"src/assets/css/forms.scss",
33+
"src/assets/css/custom-dsfr.scss",
3434
"src/assets/css/main.scss",
3535
"src/assets/css/print.css",
3636
"node_modules/intl-tel-input/build/css/intlTelInput.css"

‎packages/frontend/src/app/modules/admin-portail-usagers/components/manage-structure-information-form/manage-structure-information-form.component.html‎

Lines changed: 100 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -129,110 +129,113 @@
129129
</div>
130130

131131
<div
132-
class="fr-display-flex fr-gap-1w fr-align-items-end fr-my-1w"
132+
class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-my-4w"
133133
*ngIf="f.isTemporary.value === true"
134134
>
135-
<div
136-
class="fr-col-12 fr-col-md-6 fr-input-group"
137-
[class.fr-input-group--error]="
138-
(f.startDate.dirty || submitted) && f.startDate.errors
139-
"
140-
>
141-
<label for="startDate" class="fr-label"
142-
>Date de début de diffusion
143-
</label>
144-
<div class="fr-date-input">
145-
<input
146-
class="fr-input"
147-
placeholder="jj/mm/aaaa"
148-
placement="auto"
149-
id="startDate"
150-
formControlName="startDate"
151-
name="startDate"
152-
ngbDatepicker
153-
dateFr
154-
value
155-
[class.fr-input--error]="
156-
(f.startDate.dirty || submitted) && f.startDate.errors
157-
"
158-
[attr.aria-describedby]="
159-
(f.startDate.dirty || submitted) && f.startDate.errors
160-
? 'startDate-errors'
161-
: null
162-
"
163-
[attr.aria-invalid]="
164-
(f.startDate.dirty || submitted) && f.startDate.errors
165-
? true
166-
: false
167-
"
168-
#startDate="ngbDatepicker"
169-
maxlength="10"
170-
required
171-
/>
135+
<div class="fr-col-12 fr-col-md-6">
136+
<div
137+
class="fr-input-group"
138+
[class.fr-input-group--error]="
139+
(f.startDate.dirty || submitted) && f.startDate.errors
140+
"
141+
>
142+
<label for="startDate" class="fr-label"
143+
>Date de début de diffusion
144+
</label>
145+
<div class="fr-date-input">
146+
<input
147+
class="fr-input"
148+
placeholder="jj/mm/aaaa"
149+
placement="auto"
150+
id="startDate"
151+
formControlName="startDate"
152+
name="startDate"
153+
ngbDatepicker
154+
dateFr
155+
value
156+
[class.fr-input--error]="
157+
(f.startDate.dirty || submitted) && f.startDate.errors
158+
"
159+
[attr.aria-describedby]="
160+
(f.startDate.dirty || submitted) && f.startDate.errors
161+
? 'startDate-errors'
162+
: null
163+
"
164+
[attr.aria-invalid]="
165+
(f.startDate.dirty || submitted) && f.startDate.errors
166+
? true
167+
: false
168+
"
169+
#startDate="ngbDatepicker"
170+
maxlength="10"
171+
required
172+
/>
173+
174+
<button
175+
type="button"
176+
aria-label="Choisir une date de début de validité dans le calendrier"
177+
class="date-btn"
178+
(click)="startDate.toggle()"
179+
>
180+
<span class="fr-icon-calendar-line" aria-hidden="true"></span>
181+
</button>
182+
</div>
172183

173-
<button
174-
type="button"
175-
aria-label="Choisir une date de début de validité dans le calendrier"
176-
class="date-btn"
177-
(click)="startDate.toggle()"
184+
<p
185+
*ngIf="(f.startDate.dirty || submitted) && f.startDate.errors"
186+
id="startDate-errors"
187+
class="fr-error-text"
178188
>
179-
<span class="fr-icon-calendar-line" aria-hidden="true"></span>
180-
</button>
189+
La date de debut est incorrecte. Exemple : 20/12/1996
190+
</p>
181191
</div>
182-
183-
<p
184-
*ngIf="(f.startDate.dirty || submitted) && f.startDate.errors"
185-
id="startDate-errors"
186-
class="fr-error-text"
187-
>
188-
La date de debut est incorrecte. Exemple : 20/12/1996
189-
</p>
190192
</div>
193+
<div class="fr-col-12 fr-col-md-6">
194+
<div
195+
class="fr-input-group"
196+
[class.fr-input-group--error]="
197+
(f.endDate.dirty || submitted) && f.endDate.errors
198+
"
199+
>
200+
<label for="endDate" class="fr-label">Date de fin </label>
201+
<div class="fr-date-input">
202+
<input
203+
class="fr-input"
204+
placeholder="jj/mm/aaaa"
205+
placement="auto"
206+
id="endDate"
207+
formControlName="endDate"
208+
name="endDate"
209+
ngbDatepicker
210+
dateFr
211+
required
212+
value
213+
[class.fr-input--error]="
214+
(f.endDate.dirty || submitted) && f.endDate.errors
215+
"
216+
[attr.aria-describedby]="
217+
(f.endDate.dirty || submitted) && f.endDate.errors
218+
? 'endDate-errors'
219+
: null
220+
"
221+
[attr.aria-invalid]="
222+
(f.endDate.dirty || submitted) && f.endDate.errors
223+
? true
224+
: false
225+
"
226+
#endDate="ngbDatepicker"
227+
maxlength="10"
228+
/>
191229

192-
<div
193-
class="fr-col-12 fr-col-md-6 fr-input-group"
194-
[class.fr-input-group--error]="
195-
(f.endDate.dirty || submitted) && f.endDate.errors
196-
"
197-
>
198-
<label for="endDate" class="fr-label">Date de fin </label>
199-
<div class="fr-date-input">
200-
<input
201-
class="fr-input"
202-
placeholder="jj/mm/aaaa"
203-
placement="auto"
204-
id="endDate"
205-
formControlName="endDate"
206-
name="endDate"
207-
ngbDatepicker
208-
dateFr
209-
required
210-
value
211-
[class.fr-input--error]="
212-
(f.endDate.dirty || submitted) && f.endDate.errors
213-
"
214-
[attr.aria-describedby]="
215-
(f.endDate.dirty || submitted) && f.endDate.errors
216-
? 'endDate-errors'
217-
: null
218-
"
219-
[attr.aria-invalid]="
220-
(f.endDate.dirty || submitted) && f.endDate.errors
221-
? true
222-
: false
223-
"
224-
#endDate="ngbDatepicker"
225-
maxlength="10"
226-
/>
227-
228-
<button
229-
type="button"
230-
aria-label="Choisir une date de fin de validité dans le calendrier"
231-
class="date-btn"
232-
(click)="endDate.toggle()"
233-
>
234-
<span class="fr-icon-calendar-line" aria-hidden="true"></span>
235-
</button>
230+
<button
231+
type="button"
232+
aria-label="Choisir une date de fin de validité dans le calendrier"
233+
class="date-btn"
234+
(click)="endDate.toggle()"
235+
>
236+
<span class="fr-icon-calendar-line" aria-hidden="true"></span>
237+
</button>
238+
</div>
236239
</div>
237240

238241
<div

‎packages/frontend/src/app/modules/general/components/contact-support/contact-support.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,9 @@ <h2 class="fr-mb-0">Remplir le formulaire de contact</h2>
141141
</div>
142142
</div>
143143

144-
<div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
144+
<div
145+
class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-my-4w"
146+
>
145147
<div class="fr-col-12 fr-col-md-6">
146148
<div
147149
class="fr-input-group"
@@ -284,10 +286,10 @@ <h2 class="fr-mb-0">Remplir le formulaire de contact</h2>
284286
<label class="fr-label" for="file">
285287
Pièces jointes (capture d'écran du problème rencontré, fichier
286288
d'import anonymisé, autres informations etc.)
287-
<span id="file-description" class="fr-hint-text">
288-
Formats autorisés .pdf, xlsx, .docx, .odt, .jpg, ou .png (6mo maxi)
289-
</span>
290289
</label>
290+
<p id="file-description" class="fr-hint-text">
291+
Formats autorisés .pdf, xlsx, .docx, .odt, .jpg, ou .png (6mo maxi)
292+
</p>
291293
<input
292294
(change)="onFileChange($event)"
293295
class="fr-upload"

‎packages/frontend/src/app/modules/general/components/news/news.component.html‎

Lines changed: 47 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,56 @@ <h1 class="title">Les dernières nouveautés de DomiFa</h1>
66

77
<div class="fr-content-container">
88
<div class="fr-container">
9-
<div class="fr-content fr-mb-2w" *ngFor="let news of DOMIFA_NEWS">
9+
<div class="fr-tabs">
10+
<ul
11+
class="fr-tabs__list"
12+
role="tablist"
13+
aria-label="Nouveautés par année"
14+
>
15+
@for (year of years; track year) {
16+
<li role="presentation">
17+
<button
18+
[class.fr-tabs__tab--selected]="selectedYear === year"
19+
class="fr-tabs__tab"
20+
role="tab"
21+
[attr.aria-selected]="selectedYear === year"
22+
type="button"
23+
(click)="selectYear(year)"
24+
>
25+
{{ year }}
26+
</button>
27+
</li>
28+
}
29+
</ul>
30+
</div>
31+
32+
@for (news of filteredNews; track news.date) {
33+
<div class="fr-content fr-mb-2w">
1034
<h2 class="fr-my-2w">
11-
Nouveautés du {{ news.date | date : "d MMMM y"
12-
}}<span *ngIf="news.description"> - {{ news.description }}</span>
35+
Nouveautés du {{ news.date | date : "d MMMM y" }}@if (news.description)
36+
{<span> - {{ news.description }}</span
37+
>}
1338
</h2>
1439

15-
<ng-container *ngFor="let content of news.content">
16-
<h3 class="text-start fr-my-1w">
17-
<span
18-
class="badge badge-pill"
19-
[ngClass]="{
20-
'bg-primary': content.type === 'new',
21-
'bg-warning text-dark': content.type === 'bug'
22-
}"
23-
>
24-
{{ content?.type === "bug" ? "Améliorations" : "Nouveauté" }}
25-
</span>
26-
&nbsp;
27-
<span [innerHTML]="content.categorie | ariaHideEmoji"></span>
28-
</h3>
29-
<ul class="mb-2">
30-
<li
31-
*ngFor="let message of content.message"
32-
[innerHTML]="message | nl2br"
33-
></li>
34-
</ul>
35-
</ng-container>
40+
@for (content of news.content; track content.categorie) {
41+
<h3 class="text-start fr-my-1w">
42+
<span
43+
class="fr-badge"
44+
[class.fr-badge--info]="content.type === 'new'"
45+
[class.fr-badge--warning]="content.type === 'bug'"
46+
>
47+
{{ content?.type === "bug" ? "Améliorations" : "Nouveauté" }}
48+
</span>
49+
&nbsp;
50+
<span [innerHTML]="content.categorie | ariaHideEmoji"></span>
51+
</h3>
52+
<ul class="fr-mb-2w">
53+
@for (message of content.message; track message) {
54+
<li [innerHTML]="message | nl2br"></li>
55+
}
56+
</ul>
57+
}
3658
</div>
59+
}
3760
</div>
3861
</div>

‎packages/frontend/src/app/modules/general/components/news/news.component.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export class NewsComponent implements OnInit {
1212
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1313
public readonly DOMIFA_NEWS: any = DOMIFA_NEWS;
1414

15+
public years: string[] = [];
16+
public selectedYear: string = "";
17+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
18+
public filteredNews: any[] = [];
19+
1520
public constructor(private readonly seoService: SeoService) {}
1621

1722
public ngOnInit(): void {
@@ -20,5 +25,20 @@ export class NewsComponent implements OnInit {
2025
"DomiFa est une startup d'état qui développe de nouvelles fonctionnalités en continue pour améliorer le produit"
2126
);
2227
localStorage.setItem("news", new Date(DOMIFA_NEWS[0].date).toISOString());
28+
29+
const yearSet = new Set<string>();
30+
for (const news of this.DOMIFA_NEWS) {
31+
yearSet.add(news.date.substring(0, 4));
32+
}
33+
this.years = Array.from(yearSet).sort((a, b) => b.localeCompare(a));
34+
this.selectYear(this.years[0]);
35+
}
36+
37+
public selectYear(year: string): void {
38+
this.selectedYear = year;
39+
this.filteredNews = this.DOMIFA_NEWS.filter(
40+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
41+
(news: any) => news.date.substring(0, 4) === year
42+
);
2343
}
2444
}

‎packages/frontend/src/app/modules/general/components/static-pages/cgu/cgu.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<div class="head-page py-4">
2-
<div class="container">
1+
<div class="head-page fr-py-4w">
2+
<div class="fr-container">
33
<h1 class="title">Conditions générales d'utilisation de DomiFa</h1>
44
<p class="text-white">Date de publication au 16 mai 2025</p>
55
</div>
66
</div>
7-
<div class="content py-3">
8-
<div class="container">
9-
<div class="page-content p-3">
7+
<div class="fr-content fr-py-3w">
8+
<div class="fr-container">
9+
<div class="fr-content">
1010
<br />
1111
<h2>Article 1 - Champ d'application</h2>
1212
<p>

0 commit comments

Comments
 (0)