From 2b627cba1140e6187f04d89f8623452543ec61ca Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@assemblee-nationale.fr>
Date: Thu, 23 May 2024 17:54:57 +0200
Subject: [PATCH] =?UTF-8?q?Ajoute=20le=20pr=C3=A9fixe=20lx=20pour=20tous?=
=?UTF-8?q?=20les=20styles=20et=20documente=20la=20feuille=20de=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app.postcss | 34 ++++++++++++-------
src/lib/components/NavBar.svelte | 2 +-
src/lib/components/ReformsChanges.svelte | 4 +--
.../test_cases/TestCaseSummary.svelte | 4 +--
.../components/transverse_pages/Footer.svelte | 2 +-
.../variables/VariableReferredInputs.svelte | 5 ++-
.../VariableReferredScaleParameter.svelte | 2 +-
.../VariableReferredValueParameter.svelte | 2 +-
src/routes/accueil/+page.svelte | 14 +++++---
src/routes/fonctionnement/+page.svelte | 32 ++++++++++-------
10 files changed, 64 insertions(+), 37 deletions(-)
diff --git a/src/app.postcss b/src/app.postcss
index 4dccc2d7e..6b7fe1213 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -17,35 +17,45 @@
@tailwind utilities;
@layer components {
- /* --- LIENS --- */
+ /* *******--- LIENS ---******* */
+
+ /* LIEN TEXTE: lien basique à l'intérieur d'un corps de texte, souligné sans changement de couleur*/
.lx-link-text {
@apply underline hover:decoration-2 underline-offset-4;
}
+
+ /* lien texte, bleu au survol : si besoin de plus de visibilité */
.lx-link-text-le-bleu {
@apply underline hover:decoration-2 underline-offset-4 hover:text-le-bleu;
}
+
+ /* LIEN SIMPLE : lien solo (en dehors d'un corps de texte), se caractérise par un écard entre les lettres plus grand*/
+ .lx-link-simple {
+ @apply underline hover:decoration-2 underline-offset-4 tracking-wider;
+ }
+ /* lien simple, sans soulignement : si besoin de plus de discretion */
.lx-link-simple-no-underline {
@apply hover:underline hover:decoration-2 underline-offset-4 tracking-wider;
}
- .link-simple {
- @apply underline hover:decoration-2 underline-offset-4 tracking-wider;
- }
- .link-uppercase {
+
+ /* LIEN UPPERCASE : lien solo à la frontière avec un bouton, se caractérise par une casse en majuscule et un écard entre les lettres plus grand*/
+
+ .lx-link-uppercase {
@apply gap-2 uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 hover:text-black text-nowrap text-neutral-700;
}
- .link-uppercase-le-bleu {
+ /* lien uppercase, bleu au survol : si besoin de plus de visibilité */
+ .lx-link-uppercase-le-bleu {
@apply gap-2 text-le-bleu uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 text-nowrap;
}
- .titreh1 {
- @apply mb-3 mt-7 font-serif text-3xl font-bold text-black;
- }
- .titreh2 {
+ /* *******--- TITRES ---******* */
+ .lx-titreh2 {
@apply mb-3 mt-5 inline-flex bg-le-vert-100 px-1 font-sans text-2xl font-bold text-black;
}
- .titreh3 {
+ .lx-titreh3 {
@apply mb-3 mt-5 flex font-sans text-xl font-bold text-black;
}
- .opacity-0-unclickable {
+ /* *******--- ANIMATION ---******* */
+ .lx-opacity-0-unclickable {
@apply pointer-events-none opacity-0;
}
}
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 711a54df0..60ff03e9e 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -260,7 +260,7 @@
icon="ri:drag-drop-line"
/>Tutoriel interactif
<br /><span
- class="link-uppercase group-hover:flex hidden group-hover:underline"
+ class="lx-link-uppercase group-hover:flex hidden group-hover:underline"
>commencer<iconify-icon
class="align-[-0.25rem] text-xl mr-1"
icon="ri:arrow-right-line"
diff --git a/src/lib/components/ReformsChanges.svelte b/src/lib/components/ReformsChanges.svelte
index 947dbd636..f7b0113f9 100644
--- a/src/lib/components/ReformsChanges.svelte
+++ b/src/lib/components/ReformsChanges.svelte
@@ -157,7 +157,7 @@
initialPlacement="right"
>
<a
- class="link-simple"
+ class="lx-link-simple"
href={newSimulationUrl({
...displayMode,
//budget: undefined, // TODO tgb: It depends!
@@ -215,7 +215,7 @@
/>
<a
id={tooltipId}
- class="link-simple"
+ class="lx-link-simple"
href={newSimulationUrl({
...displayMode,
//budget: undefined, // TODO tgb: It depends!
diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte
index 29561d3ad..2fd80970f 100644
--- a/src/lib/components/test_cases/TestCaseSummary.svelte
+++ b/src/lib/components/test_cases/TestCaseSummary.svelte
@@ -638,7 +638,7 @@
{#if mode === "view"}
<button
class="ease flex text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
- class:opacity-0-unclickable={displayMode.edit !== undefined}
+ class:lx-opacity-0-unclickable={displayMode.edit !== undefined}
on:click={() => (isTestCaseCompareModalOpen = true)}
title="Comparer ce cas type avec un autre"
id="situation_{situationIndex}_compare"
@@ -657,7 +657,7 @@
{/if}
<button
class="ease flex text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
- class:opacity-0-unclickable={displayMode.edit !== undefined}
+ class:lx-opacity-0-unclickable={displayMode.edit !== undefined}
on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)}
title="Modifier ce cas type"
id="situation_{situationIndex}_edit"
diff --git a/src/lib/components/transverse_pages/Footer.svelte b/src/lib/components/transverse_pages/Footer.svelte
index db5a980ff..ba8d8c827 100644
--- a/src/lib/components/transverse_pages/Footer.svelte
+++ b/src/lib/components/transverse_pages/Footer.svelte
@@ -75,7 +75,7 @@
icon="ri-arrow-right-line"
/>
</a> -->
- <a class="block pb-3 link-uppercase" href="/fonctionnement">
+ <a class="block pb-3 lx-link-uppercase" href="/fonctionnement">
Fonctionnement du simulateur
<iconify-icon
class="mr-1 align-[-0.3rem] text-xl"
diff --git a/src/lib/components/variables/VariableReferredInputs.svelte b/src/lib/components/variables/VariableReferredInputs.svelte
index 067f8e86d..1ebc9097c 100644
--- a/src/lib/components/variables/VariableReferredInputs.svelte
+++ b/src/lib/components/variables/VariableReferredInputs.svelte
@@ -41,7 +41,10 @@
<span class="font-serif text-lg font-bold"
>{variable.short_label ?? variable.label ?? variable.name}</span
>
- <a class="link-simple mr-3 text-gray-500" href="/variables/{variable.name}">
+ <a
+ class="lx-link-simple mr-3 text-gray-500"
+ href="/variables/{variable.name}"
+ >
<iconify-icon class="align-[-0.3rem] text-xl" icon="ri-more-2-fill" /></a
>
</div>
diff --git a/src/lib/components/variables/VariableReferredScaleParameter.svelte b/src/lib/components/variables/VariableReferredScaleParameter.svelte
index d7e71af12..423699048 100644
--- a/src/lib/components/variables/VariableReferredScaleParameter.svelte
+++ b/src/lib/components/variables/VariableReferredScaleParameter.svelte
@@ -270,7 +270,7 @@
/>
{/if}
<a
- class="link-simple ml-2 flex text-sm items-center text-gray-600"
+ class="lx-link-simple ml-2 flex text-sm items-center text-gray-600"
rel="noreferrer"
href="/parameters/{billParameter.name}"
on:click={() => {
diff --git a/src/lib/components/variables/VariableReferredValueParameter.svelte b/src/lib/components/variables/VariableReferredValueParameter.svelte
index 60aa3095b..c63f932f0 100644
--- a/src/lib/components/variables/VariableReferredValueParameter.svelte
+++ b/src/lib/components/variables/VariableReferredValueParameter.svelte
@@ -265,7 +265,7 @@
</div>
<a
- class="link-simple mx-1 flex items-center text-sm text-gray-600"
+ class="lx-link-simple mx-1 flex items-center text-sm text-gray-600"
rel="noreferrer"
href="/parameters/{billParameter.name}"
on:click={() => {
diff --git a/src/routes/accueil/+page.svelte b/src/routes/accueil/+page.svelte
index 51a61e593..cd52f4d83 100644
--- a/src/routes/accueil/+page.svelte
+++ b/src/routes/accueil/+page.svelte
@@ -327,7 +327,7 @@
</div>
<a
- class="self-center inline-flex items-center text-sm md:text-base link-uppercase"
+ class="self-center inline-flex items-center text-sm md:text-base lx-link-uppercase"
href="#"
>
<PictoFemme />
@@ -483,18 +483,24 @@
<div class="col-span-4 flex flex-col items-center gap-1 font-sans">
<a
- class="inline-flex items-center gap-2 link-uppercase mb-4"
+ class="inline-flex items-center gap-2 lx-link-uppercase mb-4"
href="/fonctionnement"
>
Fonctionnement du simulateur
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
- <a class="inline-flex items-center gap-2 link-uppercase-le-bleu" href="#">
+ <a
+ class="inline-flex items-center gap-2 lx-link-uppercase-le-bleu"
+ href="#"
+ >
Choisir un cas type
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
- <a class="inline-flex items-center gap-2 link-uppercase-le-bleu" href="#">
+ <a
+ class="inline-flex items-center gap-2 lx-link-uppercase-le-bleu"
+ href="#"
+ >
Simulateur budgétaire
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
diff --git a/src/routes/fonctionnement/+page.svelte b/src/routes/fonctionnement/+page.svelte
index 4b4a45026..71d646146 100644
--- a/src/routes/fonctionnement/+page.svelte
+++ b/src/routes/fonctionnement/+page.svelte
@@ -31,7 +31,7 @@
<section class="w-full bg-white max-w-screen-lg pt-8 px-20">
<div class="flex justify-between mb-5">
<a
- class="link-uppercase text-neutral-500 font-sans text-sm"
+ class="lx-link-uppercase text-neutral-500 font-sans text-sm"
href="/accueil"
>
<iconify-icon
@@ -98,7 +98,11 @@
</div>
</section>
<section class="bg-white max-w-screen-lg py-10 px-20">
- <AnchorTitle id="a-quoi-sert-le-simulateur" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle
+ id="a-quoi-sert-le-simulateur"
+ class="lx-titreh2 mb-10"
+ tag="h2"
+ >
À quoi sert le simulateur ?
</AnchorTitle>
<p class="pb-3 text-justify leading-normal">
@@ -127,7 +131,7 @@
</li>
</ul>
- <AnchorTitle id="impacts-cas-types" class="titreh3 my-10" tag="h3">
+ <AnchorTitle id="impacts-cas-types" class="lx-titreh3 my-10" tag="h3">
Des impacts sur cas-types <PictoFemme />
<PictoEntreprise />
</AnchorTitle>
@@ -203,7 +207,7 @@
</li>
</ul>
</div>
- <AnchorTitle id="impacts-globaux" class="titreh3 my-10" tag="h3">
+ <AnchorTitle id="impacts-globaux" class="lx-titreh3 my-10" tag="h3">
Des impacts globaux <PictoEtat />
</AnchorTitle>
@@ -253,7 +257,7 @@
</p>
</section>
<section class="bg-white max-w-screen-lg py-10 px-20 w-full">
- <AnchorTitle id="mecanique-du-simulateur" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle id="mecanique-du-simulateur" class="lx-titreh2 mb-10" tag="h2">
2. Mécanique du simulateur
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -291,7 +295,7 @@
</section>
<section class="bg-white max-w-screen-lg py-10 px-20">
- <AnchorTitle id="ecosysteme" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="ecosysteme" class="lx-titreh3 mb-10" tag="h3">
Un fonctionnement possible grâce à plusieurs acteurs
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -343,7 +347,7 @@
</ul>
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="traitement-des-donnees" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="traitement-des-donnees" class="lx-titreh3 mb-10" tag="h3">
Le traitement des données
</AnchorTitle>
@@ -441,7 +445,7 @@
L'ensemble de ces étapes est détaillé dans notre documentation
technique :<br /><br />
<a
- class="link-uppercase-le-bleu font-sans"
+ class="lx-link-uppercase-le-bleu font-sans"
href="https://documentation.leximpact.dev/leximpact_prepare_data/index"
>
Documentation technique
@@ -453,7 +457,7 @@
</p>
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="moteur-de-calcul" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="moteur-de-calcul" class="lx-titreh3 mb-10" tag="h3">
Le moteur de calcul
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -484,10 +488,14 @@
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="fiabilite-des-resultats" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle id="fiabilite-des-resultats" class="lx-titreh2 mb-10" tag="h2">
3. Fiabilité des résultats
</AnchorTitle>
- <AnchorTitle id="methodologie-verification" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle
+ id="methodologie-verification"
+ class="lx-titreh3 mb-10"
+ tag="h3"
+ >
Méthodologie de vérification des résultats
</AnchorTitle>
@@ -553,7 +561,7 @@
</li>
</ul>
- <AnchorTitle id="marge-erreur" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="marge-erreur" class="lx-titreh3 mb-10" tag="h3">
Une marge d'erreur incompressible
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
--
GitLab