Skip to content

Commit a16fb17

Browse files
l-schererl-scherer
authored
feat: 1187 upgrade dsfr and ajust page and css (#1142)
## Ticket(s) lié(s) 1187 ## Description Changement du lien du footer passage en 1.14 du dsfr ajustement des filtres qui avaient été custom liés au problème de DSFR qui on été corrigés en 1.14 ### Dont régressions potentielles à tester Affichages
1 parent a4ada9a commit a16fb17

11 files changed

Lines changed: 510 additions & 320 deletions

File tree

‎packages/frontend-bo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"clean": "nuxt cleanup"
1717
},
1818
"dependencies": {
19-
"@gouvfr/dsfr": "^1.13.0",
19+
"@gouvfr/dsfr": "^1.14.0",
2020
"@gouvminint/vue-dsfr": "^8.4.0",
2121
"@iconify/vue": "^4.3.0",
2222
"@pinia/nuxt": "~0.5.4",

‎packages/frontend-bo/src/assets/css/main.css‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,34 @@
3333
box-shadow: inset 0 0 0 1px #18753c;
3434
}
3535

36-
/* //cette propriété surcharge le DSFR et permet d'harmoniser la hauteur des filtres dans la barre de filtres du composant DefaultTableFilters */
37-
@media screen and (min-width: 768px) {
38-
.default-table-filters-bar .filters-bar__input-group > input,
39-
.default-table-filters-bar .filters-bar__multiselect-button,
40-
.default-table-filters-bar .filters-bar__select {
41-
height: 4rem;
42-
min-height: 4rem;
43-
}
44-
}
36+
/* ============================= */
37+
/* Champs inline et filtres table */
38+
/* ============================= */
39+
40+
/* Harmonisation de tous les champs inline DSFR */
41+
.fr-fieldset__element--inline {
42+
display: flex;
43+
align-items: baseline; /* aligne les inputs, selects et datepickers */
44+
gap: 1rem; /* espace entre champs */
45+
}
46+
47+
/* Spécifique aux barres de filtres du tableau */
48+
.default-table-filters-bar .filters-bar__element {
49+
display: flex;
50+
align-items: baseline; /* alignement vertical uniforme */
51+
gap: 1rem;
52+
}
53+
54+
/* Harmonisation des champs input, select et multiselect dans les filtres */
55+
.default-table-filters-bar .filters-bar__input-group > input,
56+
.default-table-filters-bar .filters-bar__select,
57+
.default-table-filters-bar .filters-bar__multiselect-button {
58+
/* Laisser la hauteur naturelle DSFR, padding et line-height gèrent l'alignement */
59+
height: auto;
60+
min-height: 2.5rem; /* valeur DSFR minimale */
61+
box-sizing: border-box;
62+
}
63+
64+
.fr-select .fr-input {
65+
min-height: 2.5rem; /* DSFR default input */
66+
}

‎packages/frontend-bo/src/components/organismes/filters.vue‎

Lines changed: 51 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
<template>
22
<div class="fr-fieldset">
3-
<div :class="filedsetClass + 'fr-col-md-4 fr-col-lg-4'">
4-
<div class="fr-input-group">
5-
<DsfrInputGroup
6-
v-model="nameSync"
7-
type="text"
8-
name="name"
9-
label="Nom"
10-
placeholder="Nom"
11-
:label-visible="true"
12-
@update:model-value="filtersUpdate"
13-
/>
3+
<div class="fr-grid-row fr-grid-row--gutters">
4+
<div class="fr-col-12 fr-col-md-2">
5+
<div class="fr-input-group">
6+
<DsfrInputGroup
7+
v-model="nameSync"
8+
type="text"
9+
name="name"
10+
label="Nom"
11+
placeholder="Nom"
12+
:label-visible="true"
13+
@update:model-value="filtersUpdate"
14+
/>
15+
</div>
1416
</div>
15-
</div>
16-
<div :class="filedsetClass + 'fr-col-md-2 fr-col-lg-2'">
17-
<div class="fr-input-group">
18-
<DsfrInputGroup
19-
v-model="siretSync"
20-
type="text"
21-
name="name"
22-
label="Siret"
23-
placeholder="Siret"
24-
:label-visible="true"
25-
@update:model-value="filtersUpdate"
26-
/>
17+
<div class="fr-col-md-4 fr-col-lg-3">
18+
<div class="fr-input-group">
19+
<DsfrInputGroup
20+
v-model="siretSync"
21+
type="text"
22+
name="name"
23+
label="Siret"
24+
placeholder="Siret"
25+
:label-visible="true"
26+
@update:model-value="filtersUpdate"
27+
/>
28+
</div>
2729
</div>
28-
</div>
29-
<div :class="filedsetClass + 'fr-col-md-2 fr-col-lg-2'">
30-
<div class="fr-input-group">
31-
<DsfrSelect
32-
v-model="yearObtentionSync"
33-
label="Date agrément"
34-
name="dateAgrément"
35-
mode="tags"
36-
:options="years"
37-
@update:model-value="filtersUpdate"
38-
/>
30+
<div class="fr-col-md-4 fr-col-lg-3">
31+
<div class="fr-input-group">
32+
<DsfrSelect
33+
v-model="yearObtentionSync"
34+
label="Date agrément"
35+
name="dateAgrément"
36+
mode="tags"
37+
:options="years"
38+
@update:model-value="filtersUpdate"
39+
/>
40+
</div>
3941
</div>
40-
</div>
41-
<div :class="filedsetClass + 'fr-col-md-2 fr-col-lg-2'">
42-
<div class="fr-input-group">
43-
<DsfrSelect
44-
v-model="regionObtentionSync"
45-
label="Région agrément"
46-
name="regionObtention"
47-
mode="tags"
48-
:options="regions"
49-
@update:model-value="filtersUpdate"
50-
/>
42+
<div class="fr-col-md-4 fr-col-lg-3">
43+
<div class="fr-input-group">
44+
<DsfrSelect
45+
v-model="regionObtentionSync"
46+
label="Région agrément"
47+
name="regionObtention"
48+
mode="tags"
49+
:options="regions"
50+
@update:model-value="filtersUpdate"
51+
/>
52+
</div>
5153
</div>
52-
</div>
53-
<div :class="filedsetClass + 'fr-col-md-2 fr-col-lg-2'">
54-
<ul class="fr-btns-group">
55-
<li>
54+
<div class="fr-col-md-4 fr-col-lg-2">
55+
<div class="fr-btns-group">
5656
<DsfrButton
5757
type="button"
5858
label="Extraire en CSV"
5959
primary
6060
@click="getCsv"
6161
/>
62-
</li>
63-
</ul>
62+
</div>
63+
</div>
6464
</div>
6565
</div>
6666
</template>
@@ -84,9 +84,6 @@ const emits = defineEmits<{
8484
"filters-update": [];
8585
}>();
8686
87-
const filedsetClass =
88-
"fr-fieldset__element fr-fieldset__element--inline fr-col-12 ";
89-
9087
const siretSync = computed({
9188
get() {
9289
return props.siret;

‎packages/frontend-bo/src/components/user/listeFilters.vue‎

Lines changed: 65 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -7,81 +7,83 @@
77
</NuxtLink>
88
</div>
99
<div class="fr-fieldset">
10-
<div :class="filedsetClass">
11-
<div class="fr-input-group">
12-
<DsfrInputGroup
13-
v-model="nomSync"
14-
type="text"
15-
name="Nom"
16-
label="Nom"
17-
placeholder="Nom"
18-
:label-visible="true"
19-
@update:model-value="filtersUpdate"
20-
/>
10+
<div class="fr-grid-row fr-grid-row--gutters">
11+
<div class="fr-col-12 fr-col-md-2">
12+
<div class="fr-input-group">
13+
<DsfrInputGroup
14+
v-model="nomSync"
15+
type="text"
16+
name="Nom"
17+
label="Nom"
18+
placeholder="Nom"
19+
:label-visible="true"
20+
@update:model-value="filtersUpdate"
21+
/>
22+
</div>
2123
</div>
22-
</div>
23-
<div :class="filedsetClass">
24-
<div class="fr-input-group">
25-
<DsfrInputGroup
26-
v-model="prenomSync"
27-
type="text"
28-
name="Prénom"
29-
label="Prénom"
30-
placeholder="Prénom"
31-
:label-visible="true"
32-
@update:model-value="filtersUpdate"
33-
/>
24+
<div class="fr-col-12 fr-col-md-2">
25+
<div class="fr-input-group">
26+
<DsfrInputGroup
27+
v-model="prenomSync"
28+
type="text"
29+
name="Prénom"
30+
label="Prénom"
31+
placeholder="Prénom"
32+
:label-visible="true"
33+
@update:model-value="filtersUpdate"
34+
/>
35+
</div>
3436
</div>
35-
</div>
36-
<div :class="filedsetClass">
37-
<div class="fr-input-group">
38-
<DsfrInputGroup
39-
v-model="emailSync"
40-
type="text"
41-
name="email"
42-
label="Adresse courriel"
43-
placeholder="Adresse courriel"
44-
:label-visible="true"
45-
@update:model-value="filtersUpdate"
46-
/>
37+
<div class="fr-col-12 fr-col-md-2">
38+
<div class="fr-input-group">
39+
<DsfrInputGroup
40+
v-model="emailSync"
41+
type="text"
42+
name="email"
43+
label="Adresse courriel"
44+
placeholder="Adresse courriel"
45+
:label-visible="true"
46+
@update:model-value="filtersUpdate"
47+
/>
48+
</div>
4749
</div>
48-
</div>
49-
<div :class="filedsetClass">
50-
<div class="fr-input-group">
51-
<DsfrInputGroup
52-
v-model="territoireSync"
53-
type="text"
54-
name="territoire"
55-
label="Territoire"
56-
placeholder="Territoire"
57-
:label-visible="true"
58-
@update:model-value="filtersUpdate"
59-
/>
50+
<div class="fr-col-12 fr-col-md-2">
51+
<div class="fr-input-group">
52+
<DsfrInputGroup
53+
v-model="territoireSync"
54+
type="text"
55+
name="territoire"
56+
label="Territoire"
57+
placeholder="Territoire"
58+
:label-visible="true"
59+
@update:model-value="filtersUpdate"
60+
/>
61+
</div>
6062
</div>
61-
</div>
62-
<div :class="filedsetClass">
63-
<div class="fr-input-group">
64-
<DsfrSelect
65-
v-model="statutSync"
66-
label="Actions à faire"
67-
name="action"
68-
mode="tags"
69-
:options="props.statusActions"
70-
@update:model-value="filtersUpdate"
71-
/>
63+
<div class="fr-col-12 fr-col-md-2">
64+
<div class="fr-input-group">
65+
<DsfrSelect
66+
v-model="statutSync"
67+
label="Actions à faire"
68+
name="action"
69+
mode="tags"
70+
:options="props.statusActions"
71+
@update:model-value="filtersUpdate"
72+
/>
73+
</div>
7274
</div>
7375
</div>
74-
<div :class="filedsetClass">
75-
<ul class="fr-btns-group">
76-
<li>
76+
<div class="fr-grid-row fr-grid-row--gutters fr-mt-2v">
77+
<div class="fr-col-12 fr-col-md-12 align-self-end">
78+
<div class="fr-input-group">
7779
<DsfrButton
7880
type="button"
7981
label="Extraire en CSV"
8082
primary
8183
@click="getCsv"
8284
/>
83-
</li>
84-
</ul>
85+
</div>
86+
</div>
8587
</div>
8688
</div>
8789
</template>
@@ -107,9 +109,6 @@ const emits = defineEmits<{
107109
"filters-update": [];
108110
}>();
109111
110-
const filedsetClass =
111-
"fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2";
112-
113112
const nomSync = computed({
114113
get() {
115114
return props.nom;

0 commit comments

Comments
 (0)