Skip to content

Commit 8d5533d

Browse files
bellangerqbellangerq
authored
Corrige l'affichage en petit écran (#1026)
* fix layout on some overflowing elements on small screen size * refacto step card for better small device display
1 parent 8ec78cb commit 8d5533d

File tree

7 files changed

+61
-90
lines changed

7 files changed

+61
-90
lines changed

‎confiture-web-app/src/components/account/dashboard/AuditRow.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
33
import { RouterLink } from "vue-router";
44
55
import { useNotifications } from "../../../composables/useNotifications";
6+
import { useWindowWidth } from "../../../composables/useWindowWidth";
67
import { useAuditStore } from "../../../store";
78
import { AuditStatus, AuditType } from "../../../types";
89
import { AccountAudit } from "../../../types/account";
@@ -28,6 +29,8 @@ const props = defineProps<{
2829
const notify = useNotifications();
2930
const auditStore = useAuditStore();
3031
32+
const windowWidth = useWindowWidth();
33+
3134
const isNotStarted = computed(
3235
() => props.audit.status === AuditStatus.NOT_STARTED
3336
);
@@ -293,6 +296,7 @@ function copyStatementLink(uniqueId: string) {
293296
<Dropdown
294297
ref="optionsDropdownRef"
295298
title="Options"
299+
:align-left="windowWidth < 880"
296300
:button-props="{
297301
class: 'fr-btn--tertiary',
298302
ariaLabel: `Options de l’audit ${audit.procedureName}`
@@ -334,7 +338,8 @@ function copyStatementLink(uniqueId: string) {
334338
params: { uniqueId: audit.editUniqueId }
335339
}"
336340
>
337-
Modifier les paramètres de l’audit
341+
Modifier les paramètres
342+
<template v-if="windowWidth > 880">de l’audit</template>
338343
</RouterLink>
339344
</li>
340345

‎confiture-web-app/src/components/layout/AccountHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const width = useWindowWidth();
7979
margin: 0 auto;
8080
8181
@media (width < 48rem) {
82-
gap: 0.5rem;
82+
gap: 0.25rem;
8383
}
8484
}
8585

‎confiture-web-app/src/components/overview/AuditStep.vue

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,17 @@ const auditIsInProgress = computed(() => {
3737

3838
<template>
3939
<StepCard>
40-
<div class="fr-mb-2w audit-step-heading">
40+
<div class="fr-mb-2w step-card-heading">
4141
<span
4242
v-if="auditIsReady"
4343
id="audit-step-status"
44-
class="fr-icon--lg fr-icon-checkbox-circle-fill audit-step-check"
44+
class="fr-icon--lg fr-icon-checkbox-circle-fill step-card-check"
4545
>
4646
<span class="fr-sr-only">Étape terminée</span>
4747
</span>
4848

4949
<h2
50-
class="fr-h3 fr-mb-0 audit-step-title"
50+
class="fr-h3 fr-mb-0 step-card-title"
5151
aria-describedby="audit-step-status"
5252
>
5353
Audit
@@ -213,26 +213,12 @@ const auditIsInProgress = computed(() => {
213213
</template>
214214

215215
<style scoped>
216-
.audit-step-heading {
217-
align-items: center;
218-
display: flex;
219-
gap: 1rem;
220-
grid-column: 1 / -1;
221-
}
222-
223-
.audit-step-title {
224-
/* FIXME: DSFR default badges dont align. Those with icons does. */
225-
display: flex;
226-
align-items: center;
227-
gap: 0.75rem;
228-
}
229-
230-
.audit-step-check {
231-
color: var(--text-default-success);
232-
}
233-
234216
.audit-step-settings-link {
235217
margin-inline-start: auto;
218+
219+
@media (width < 36rem) {
220+
margin-inline-start: initial;
221+
}
236222
}
237223
238224
.audit-step-date {

‎confiture-web-app/src/components/overview/GridStep.vue

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@ const csvExportSizeEstimation = computed(() => {
3333

3434
<template>
3535
<StepCard>
36-
<div class="fr-mb-2w grid-step-heading">
36+
<div class="fr-mb-2w step-card-heading">
3737
<span
3838
v-if="auditIsReady"
3939
id="grid-step-status"
40-
class="fr-icon--lg fr-icon-checkbox-circle-fill grid-step-check"
40+
class="fr-icon--lg fr-icon-checkbox-circle-fill step-card-check"
4141
>
4242
<span class="fr-sr-only">Étape terminée</span>
4343
</span>
4444
<component
4545
:is="headingLevel"
46-
class="fr-h3 fr-mb-0 grid-step-title"
46+
class="fr-h3 fr-mb-0 step-card-title"
4747
aria-describedby="grid-step-status"
4848
>
4949
Grille d’audit
@@ -85,27 +85,6 @@ const csvExportSizeEstimation = computed(() => {
8585
</template>
8686

8787
<style scoped>
88-
.grid-step-heading {
89-
align-items: center;
90-
display: flex;
91-
gap: 1rem;
92-
grid-column: 1 / -1;
93-
}
94-
95-
.grid-step-title {
96-
grid-column: 1 / -1;
97-
grid-row: 1;
98-
99-
/* FIXME: DSFR default badges dont align. Those with icons does. */
100-
display: flex;
101-
align-items: center;
102-
gap: 0.75rem;
103-
}
104-
105-
.grid-step-check {
106-
color: var(--text-default-success);
107-
}
108-
10988
.grid-step-description {
11089
grid-column: 1 / -1;
11190
grid-row: 2;

‎confiture-web-app/src/components/overview/ReportStep.vue

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ const auditIsReady = computed(() => {
2020

2121
<template>
2222
<StepCard>
23-
<div class="fr-mb-2w report-step-heading">
23+
<div class="fr-mb-2w step-card-heading">
2424
<span
2525
v-if="auditIsReady"
2626
id="report-step-status"
27-
class="fr-icon--lg fr-icon-checkbox-circle-fill report-step-check"
27+
class="fr-icon--lg fr-icon-checkbox-circle-fill step-card-check"
2828
>
2929
<span class="fr-sr-only">Étape terminée</span>
3030
</span>
3131
<component
3232
:is="headingLevel"
33-
class="fr-h3 fr-mb-0 report-step-title"
33+
class="fr-h3 fr-mb-0 step-card-title"
3434
aria-describedby="report-step-status"
3535
>
3636
Rapport d’audit
@@ -85,27 +85,6 @@ const auditIsReady = computed(() => {
8585
</template>
8686

8787
<style scoped>
88-
.report-step-heading {
89-
align-items: center;
90-
display: flex;
91-
gap: 1rem;
92-
grid-column: 1 / -1;
93-
}
94-
95-
.report-step-title {
96-
grid-column: 1 / -1;
97-
grid-row: 1;
98-
99-
/* FIXME: DSFR default badges dont align. Those with icons does. */
100-
display: flex;
101-
align-items: center;
102-
gap: 0.75rem;
103-
}
104-
105-
.report-step-check {
106-
color: var(--text-default-success);
107-
}
108-
10988
.report-step-description {
11089
grid-column: 1 / -1;
11190
grid-row: 2;

‎confiture-web-app/src/components/overview/StatementStep.vue

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ const auditIsPublishable = computed(() => {
2323

2424
<template>
2525
<StepCard>
26-
<div class="fr-mb-2w statement-step-heading">
26+
<div class="fr-mb-2w step-card-heading">
2727
<span
2828
v-if="auditIsPublishable"
2929
id="statement-step-status"
30-
class="fr-icon--lg fr-icon-checkbox-circle-fill statement-step-check"
30+
class="fr-icon--lg fr-icon-checkbox-circle-fill step-card-check"
3131
>
3232
<span class="fr-sr-only">Étape terminée</span>
3333
</span>
3434
<component
3535
:is="headingLevel"
36-
class="fr-h3 fr-mb-0 statement-step-title"
36+
class="fr-h3 fr-mb-0 step-card-title"
3737
aria-describedby="statement-step-status"
3838
>
3939
Déclaration d’accessibilité
@@ -124,22 +124,6 @@ const auditIsPublishable = computed(() => {
124124
</template>
125125

126126
<style scoped>
127-
.statement-step-heading {
128-
align-items: center;
129-
display: flex;
130-
gap: 1rem;
131-
grid-column: 1 / -1;
132-
}
133-
134-
.statement-step-title {
135-
grid-column: 1 / -1;
136-
grid-row: 1;
137-
}
138-
139-
.statement-step-check {
140-
color: var(--text-default-success);
141-
}
142-
143127
.statement-step-description {
144128
grid-column: 1 / -1;
145129
grid-row: 2;

‎confiture-web-app/src/components/overview/StepCard.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,43 @@
1212
gap: 0 1rem;
1313
flex-grow: 1;
1414
max-width: 49.5rem;
15+
16+
&:deep(.step-card-heading) {
17+
align-items: center;
18+
display: flex;
19+
gap: 1rem;
20+
grid-column: 1 / -1;
21+
flex-wrap: wrap;
22+
23+
@media (width < 36rem) {
24+
flex-direction: column;
25+
align-items: start;
26+
}
27+
}
28+
29+
&:deep(.step-card-title) {
30+
/* FIXME: DSFR default badges dont align. Those with icons does. */
31+
display: flex;
32+
align-items: center;
33+
flex-wrap: wrap;
34+
gap: 0.75rem;
35+
36+
@media (width < 36rem) {
37+
flex-direction: column;
38+
align-items: start;
39+
}
40+
}
41+
42+
&:deep(.step-card-check) {
43+
color: var(--text-default-success);
44+
}
45+
46+
&:deep(.step-card-settings-link) {
47+
margin-inline-start: auto;
48+
49+
@media (width < 36rem) {
50+
margin-inline-start: initial;
51+
}
52+
}
1553
}
1654
</style>

0 commit comments

Comments
 (0)