Skip to content

Commit f6e2435

Browse files
bellangerqbellangerq
authored
Revoit la navigation entre les différents espaces (#683)
* remove breadcrumb * update backlink wording and spacing between headings * visual fixes in overview page * add cancel button on statement page * design account header * design deliverable header * design marketing header * conditionally open footer links in new tab * display correct header component * add top link to a11y statement * remove new tab in footer links * redirect user from home page to account page if logged in * update condition to display connected header * add space between actions and top link in a11y statement * remove sass and document css class order * fix back to overview link destination * remove mounted hook to redirect connected account to dashboard * redirect to audit page after submitting or cancelling audit settings * add changelog and roadmap links on footer when connected * fix route params * update changelog * small design fixes
1 parent c4d3f4f commit f6e2435

26 files changed

Lines changed: 768 additions & 820 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
44

5+
## 10/04/2024
6+
7+
### Nouvelles fonctionnalités 🚀
8+
9+
- Améliore la navigation entre les différents espaces du site : audit, compte utilisateur et livrables ([#683](https://github.com/DISIC/Ara/pull/683))
10+
511
## 05/04/2024
612

713
### Nouvelles fonctionnalités 🚀

‎confiture-web-app/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,10 @@ Les tests peuvent être lancés de 2 manières :
5757
...
5858
}
5959
```
60+
- Ordonner les classes CSS de la manière suivante : `<1. classes du composant DSFR> <2. classes utilitaires du DSFR> <3. classes custom>`. Exemple :
61+
```html
62+
<button class="fr-btn fr-btn--secondary fr-mt-4w submit-button">...</button>
63+
```
64+
1. `fr-btn fr-btn--secondary`
65+
2. `fr-mt-4w`
66+
3. `submit-button`

‎confiture-web-app/src/App.vue‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
<script setup lang="ts">
22
import { useHead } from "@unhead/vue";
3-
import { onMounted, provide, ref, watch } from "vue";
4-
import { useRoute } from "vue-router";
5-
6-
import Breadcrumb, { BreadcrumbLink } from "./components/layout/Breadcrumb.vue";
3+
import { onMounted, provide, ref } from "vue";
74
import SiteFooter from "./components/layout/SiteFooter.vue";
8-
import SiteHeader from "./components/layout/SiteHeader.vue";
95
import MarkdownHelpModal from "./components/audit/MarkdownHelpModal.vue";
106
import ToastNotification from "./components/ui/ToastNotification.vue";
117
import { useAccountStore } from "./store/account";
12-
13-
const route = useRoute();
14-
15-
const breadcrumbLinks = ref<BreadcrumbLink[]>([]);
16-
17-
watch(route, () => {
18-
if (!route.meta || !route.meta.breadcrumbLinks) breadcrumbLinks.value = [];
19-
if (typeof route.meta.breadcrumbLinks === "function") {
20-
breadcrumbLinks.value = route.meta.breadcrumbLinks();
21-
} else {
22-
breadcrumbLinks.value =
23-
(route.meta.breadcrumbLinks as BreadcrumbLink[]) || [];
24-
}
25-
});
8+
import SiteHeader from "./components/layout/SiteHeader.vue";
269
2710
// Default meta tags
2811
useHead({
@@ -95,12 +78,7 @@ onMounted(() => {
9578
</div>
9679
</div>
9780

98-
<main
99-
id="main"
100-
role="main"
101-
:class="['fr-container fr-mb-12w', { 'fr-mt-9w': !breadcrumbLinks.length }]"
102-
>
103-
<Breadcrumb v-if="breadcrumbLinks.length" :links="breadcrumbLinks" />
81+
<main id="main" role="main" class="fr-container fr-mb-12w fr-pt-5w">
10482
<RouterView />
10583
</main>
10684

@@ -110,3 +88,9 @@ onMounted(() => {
11088

11189
<ToastNotification />
11290
</template>
91+
92+
<style scoped>
93+
[id="main"]:target {
94+
scroll-margin: 2rem;
95+
}
96+
</style>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,7 @@ function copyReportLink(uniqueId: string) {
264264
}"
265265
class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-todo-line fr-m-0"
266266
>
267-
Accéder à la synthèse
268-
<span class="sr-only">de l’audit {{ audit.procedureName }}</span>
267+
Accéder au tableau de bord
269268
</RouterLink>
270269
</li>
271270

‎confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -223,11 +223,6 @@ const previousRoute = usePreviousRoute();
223223

224224
<template>
225225
<template v-if="accountStore.account">
226-
<BackLink
227-
v-if="previousRoute.route?.name === 'account-dashboard'"
228-
label="Retourner à mes audits"
229-
:to="{ name: 'account-dashboard' }"
230-
/>
231226
<BackLink
232227
v-if="previousRoute.route?.name === 'audit-generation'"
233228
label="Retourner à mon audit"
@@ -239,7 +234,7 @@ const previousRoute = usePreviousRoute();
239234
</template>
240235

241236
<form class="narrow-content" @submit.prevent="onSubmit">
242-
<h1 class="fr-mb-3v">
237+
<h1 class="fr-mb-3w">
243238
<span aria-hidden="true">⚙️</span> Paramètres de l’audit
244239
</h1>
245240
<p class="fr-text--sm fr-mb-4w mandatory-notice">
@@ -414,14 +409,16 @@ const previousRoute = usePreviousRoute();
414409
Valider les paramètres
415410
</button>
416411

417-
<button
412+
<RouterLink
418413
v-if="route.name !== 'create-audit'"
419414
class="fr-btn fr-btn--tertiary-no-outline fr-ml-2w"
420-
type="button"
421-
@click="$router.back()"
415+
:to="{
416+
name: 'audit-generation',
417+
params: { uniqueId: route.params.uniqueId }
418+
}"
422419
>
423420
Annuler
424-
</button>
421+
</RouterLink>
425422
</div>
426423
</form>
427424
</template>

‎confiture-web-app/src/components/audit/TestEnvironmentSelection/TestEnvironmentSelection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ function combineEnvironments(
432432
433433
.suggested-environments {
434434
display: grid;
435-
grid-template-columns: repeat(3, 1fr);
435+
grid-template-columns: repeat(2, 1fr);
436436
gap: 1.5rem;
437437
}
438438

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<script setup lang="ts">
2+
import Dropdown from "../ui/Dropdown.vue";
3+
import { useAccountStore } from "../../store";
4+
import { useRoute, useRouter } from "vue-router";
5+
import { useNotifications } from "../../composables/useNotifications";
6+
import { useWindowWidth } from "../../composables/useWindowWidth";
7+
8+
const accountStore = useAccountStore();
9+
10+
const notify = useNotifications();
11+
12+
const router = useRouter();
13+
const currentRoute = useRoute();
14+
15+
function handleDisconnectClick() {
16+
accountStore.logout();
17+
if (currentRoute.meta.authRequired) {
18+
router.push({ name: "login" });
19+
}
20+
notify("success", "Vous avez été deconnecté avec succès.");
21+
}
22+
23+
const width = useWindowWidth();
24+
</script>
25+
26+
<template>
27+
<header id="header" role="banner" class="account-header">
28+
<div class="fr-p-1w fr-px-md-3w fr-py-md-2w content">
29+
<p class="fr-h6 fr-mb-0 site-name">
30+
Ara
31+
<span class="fr-badge fr-badge--sm fr-badge--info fr-badge--no-icon">
32+
BÊTA
33+
</span>
34+
</p>
35+
36+
<RouterLink
37+
:to="{ name: 'account-dashboard' }"
38+
class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-home-4-line"
39+
>
40+
{{ width < 768 ? "Audits" : "Mes audits" }}
41+
</RouterLink>
42+
43+
<Dropdown
44+
v-if="accountStore.account"
45+
:title="width < 768 ? 'Compte' : accountStore.account.email"
46+
class="account-dropdown"
47+
>
48+
<ul role="list" class="fr-p-0 fr-m-0 dropdown-list">
49+
<li class="dropdown-item">
50+
<RouterLink
51+
:to="{ name: 'account-settings' }"
52+
class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-user-line fr-m-0"
53+
>
54+
Mon compte
55+
</RouterLink>
56+
</li>
57+
<li aria-hidden="true" class="dropdown-separator"></li>
58+
<li class="dropdown-item">
59+
<button
60+
class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-logout-box-r-line fr-m-0"
61+
@click="handleDisconnectClick"
62+
>
63+
Me déconnecter
64+
</button>
65+
</li>
66+
</ul>
67+
</Dropdown>
68+
</div>
69+
</header>
70+
</template>
71+
72+
<style scoped>
73+
.content {
74+
display: flex;
75+
align-items: center;
76+
gap: 1.5rem;
77+
max-width: 78rem;
78+
margin: 0 auto;
79+
80+
@media (width < 48rem) {
81+
gap: 0.5rem;
82+
}
83+
}
84+
85+
.site-name {
86+
display: flex;
87+
align-items: baseline;
88+
gap: 0.5rem;
89+
}
90+
91+
.account-dropdown {
92+
margin-inline-start: auto;
93+
}
94+
</style>

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

Lines changed: 0 additions & 44 deletions
This file was deleted.

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts"></script>
2+
3+
<template>
4+
<header id="header" role="banner" class="fr-header">
5+
<div class="fr-header__body">
6+
<div class="fr-container">
7+
<div class="fr-header__body-row">
8+
<div class="fr-header__brand">
9+
<div class="fr-header__brand-top">
10+
<div class="fr-header__logo">
11+
<p class="fr-logo">
12+
République
13+
<br />Française
14+
</p>
15+
</div>
16+
</div>
17+
<div class="fr-header__service">
18+
<p class="fr-header__service-title">
19+
Ara
20+
<span
21+
class="fr-badge fr-badge--sm fr-badge--info fr-badge--no-icon"
22+
>BÊTA</span
23+
>
24+
</p>
25+
<p class="fr-header__service-tagline">
26+
Réalisez vos audits d’accessibilité numérique
27+
</p>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</header>
34+
</template>
35+
36+
<style scoped>
37+
.user-dropdown {
38+
text-align: initial !important;
39+
}
40+
</style>

0 commit comments

Comments
 (0)
⚡