From 28c6dc5e7d8f1a3e8cd6cc26e3b1c8a57c289bb7 Mon Sep 17 00:00:00 2001
From: Toufic Batache <taffou2a@gmail.com>
Date: Wed, 20 Mar 2024 17:06:27 +0100
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9er=20le=20nouveau=20header=20(du=20simu?=
=?UTF-8?q?lateur)=20#267?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/lib/components/NavBar.svelte | 174 +++++++++---------
src/lib/components/search/NavBarSearch.svelte | 8 +-
tailwind.config.cjs | 3 +
3 files changed, 96 insertions(+), 89 deletions(-)
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index fdb03fadb..4d1ec4c9a 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -79,27 +79,30 @@
}
</script>
-<header class="relative z-50 w-full md:top-0">
+<nav class="relative z-50 w-full md:top-0">
<div
- class="mx-auto bg-le-jaune-very-dark px-2 shadow-md md:h-12 md:px-5 2xl:h-14"
+ class="mx-auto bg-le-jaune-very-dark px-2 shadow-md md:h-12 md:px-3 2xl:h-14"
>
<!-- Répartition des blocs sur la barre de navigation -->
<div class="hidden h-full justify-between md:flex">
<!-- Bloc gauche pour le logo AN et le logo "Simulateur LEXIMPACT" -->
<div
- class="flex h-full flex-1 items-center justify-between gap-2 xl:gap-5"
+ class="basis-1/3 h-full flex items-center justify-between gap-2 xl:gap-5"
>
<!-- Bouton accueil -->
<a
href={portalUrl}
- class="flex h-full items-center gap-5 rounded-sm text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+ class="flex h-full items-center px-2 gap-5 rounded-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
>
<img
class="w-12 items-start self-start 2xl:w-14"
src="/logo-assemblee-nationale-blanc-blanc.png"
alt="Logo de l'Assemblée nationale"
/>
- <span class="hidden xl:inline-flex">Accueil</span>
+ <span class="hidden xl:inline-flex flex-col items-center">
+ <span class="text-xs tracking-widest leading-4">Accueil</span>
+ <span class="text-xxs tracking-wider">Leximpact</span>
+ </span>
</a>
<!-- Logo -->
@@ -114,14 +117,18 @@
</div>
-->
<div
- class="flex h-full flex-col justify-center rounded p-1 text-white"
+ class="h-full flex flex-col justify-center items-end rounded p-1 text-white"
>
- <span class="text-md !font-light !leading-5 2xl:text-lg"
- >Simulateur</span
+ <span
+ class="text-sm uppercase font-light !leading-4 tracking-widest 2xl:text-lg"
>
- <span class="text-lg !uppercase !leading-4 2xl:text-xl"
- >LexImpact</span
+ Leximpact
+ </span>
+ <span
+ class="text-md uppercase leading-4 tracking-wider 2xl:text-xl"
>
+ Socio-Fiscal
+ </span>
</div>
</a>
</div>
@@ -130,94 +137,91 @@
<NavBarSearch isSearchActive={$isSearchActive} bind:searchQuery />
<!-- Bloc droite pour les commandes avancées-->
- <nav class="flex flex-1">
- <ul class="flex flex-1 items-center justify-end gap-2 xl:gap-5">
- <!--Bouton tutoriel-->
- <li>
- <button
- class="rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
- on:click={help}
- >
- <iconify-icon
- class="mr-1 align-[-0.3rem] text-xl"
- icon="ri-question-fill"
- />
- <span class="hidden xl:inline-flex">Tutoriel</span>
- </button>
- </li>
- <!-- Bouton se connecter -->
+ <ul class="basis-1/3 flex items-center justify-end gap-2 xl:gap-5 pr-2">
+ <!--Bouton tutoriel-->
+ <li>
+ <button
+ class="rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+ on:click={help}
+ >
+ <iconify-icon
+ class="mr-1 align-[-0.3rem] text-xl"
+ icon="ri-question-fill"
+ />
+ <span class="hidden xl:inline-flex">Tutoriel</span>
+ </button>
+ </li>
+ <!-- Bouton se connecter -->
- {#if authenticationEnabled}
- {#if user === undefined}
- <li>
+ {#if authenticationEnabled}
+ {#if user === undefined}
+ <li>
+ <button
+ class="rounded-sm p-1 uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+ on:click={() => goto(loginUrl)}
+ >
+ <iconify-icon
+ class="mr-1 align-[-0.3rem] text-2xl"
+ icon="ri-key-fill"
+ />
+ </button>
+ </li>
+ {:else}
+ <!-- User profile + se déconnecter -->
+ <li>
+ <PersistentPopover
+ bind:open={openUserMenu}
+ initialPlacement="bottom-end"
+ >
<button
- class="rounded-sm p-1 uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
- on:click={() => goto(loginUrl)}
+ slot="activator"
+ class="rounded py-1 px-2 text-sm capitalize text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
>
<iconify-icon
- class="mr-1 align-[-0.3rem] text-2xl"
- icon="ri-key-fill"
+ class="align-[-0.4rem] text-2xl"
+ icon="ri-account-circle-fill"
/>
+
+ <span class="sr-only">Open user menu</span>
+ <span class="hidden xl:flex">
+ {user.preferred_username.split("@")[0]}
+ </span>
</button>
- </li>
- {:else}
- <!-- User profile + se déconnecter -->
- <li>
- <PersistentPopover
- bind:open={openUserMenu}
- initialPlacement="bottom-end"
+
+ <div
+ slot="content"
+ class="m-2 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<button
- slot="activator"
- class="rounded py-1 px-2 text-sm capitalize text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
- >
- <iconify-icon
- class="align-[-0.4rem] text-2xl"
- icon="ri-account-circle-fill"
- />
-
- <span class="sr-only">Open user menu</span>
- <span class="hidden xl:flex">
- {user.preferred_username.split("@")[0]}
- </span>
- </button>
-
- <div
- slot="content"
- class="m-2 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+ class="flex gap-1 rounded-sm border-b px-4 py-3 text-sm uppercase text-gray-600 hover:bg-gray-300 hover:bg-opacity-20 hover:text-black focus:outline-none"
+ on:click={() => goto(logoutUrl)}
>
- <button
- class="flex gap-1 rounded-sm border-b px-4 py-3 text-sm uppercase text-gray-600 hover:bg-gray-300 hover:bg-opacity-20 hover:text-black focus:outline-none"
- on:click={() => goto(logoutUrl)}
+ <span class="hidden whitespace-nowrap pl-1 md:inline-block"
+ >Se déconnecter</span
>
- <span
- class="hidden whitespace-nowrap pl-1 md:inline-block"
- >Se déconnecter</span
- >
- <iconify-icon
- class="text-lg"
- icon="ri-logout-box-r-line"
- />
- </button>
- </div>
- </PersistentPopover>
- </li>
- {/if}
+ <iconify-icon class="text-lg" icon="ri-logout-box-r-line" />
+ </button>
+ </div>
+ </PersistentPopover>
+ </li>
{/if}
- </ul>
- </nav>
+ {/if}
+ </ul>
</div>
<!--Menu écran téléphone-->
<div class="flex flex-col md:hidden">
- <div class="flex h-14 items-center justify-between">
+ <div class="flex h-12 items-center justify-between">
<!-- Première section pour le logo AN-->
- <div class="flex flex-1">
+ <div class="flex flex-1 self-start">
<!-- logo assemblee nationale -->
- <a class="w-16" href={portalUrl}>
+ <a
+ class="w-16 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40"
+ href={portalUrl}
+ >
<img
- class=" items-start object-scale-down px-2 pb-2 pt-0"
+ class="items-start object-scale-down px-2 pb-1 pt-0"
src="/logo-assemblee-nationale-blanc-blanc.png"
alt="Logo de l'Assemblée nationale"
/>
@@ -227,10 +231,10 @@
<!-- Deuxième section pour le logo LexImpat-->
<div class="flex">
<div
- class="flex h-full flex-1 flex-col items-center rounded p-1 text-white"
+ class="flex h-full flex-1 flex-col items-center rounded p-1 text-white uppercase"
>
- <span class="text-lg font-light leading-5">Simulateur</span>
- <span class="text-xl uppercase leading-5">LexImpact</span>
+ <span class="font-light leading-4">LexImpact</span>
+ <span class="text-lg leading-5">Socio-Fiscal</span>
</div>
<!-- PLF
<div
@@ -274,7 +278,7 @@
To: "opacity-0 scale-95"
-->
<div
- class="absolute right-0 top-0 z-50 mt-28 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+ class="absolute right-0 top-0 z-50 mt-24 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
@@ -344,7 +348,7 @@
{#if searchQuery.length > 0}
<div
- class="absolute top-28 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-350px)/2)] md:top-12 md:w-[350px] lg:left-[calc((100%-500px)/2)] lg:w-[500px] 2xl:left-[calc((100%-600px)/2)] 2xl:top-14 2xl:w-[600px]"
+ class="absolute top-24 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-350px)/2)] md:top-12 md:w-[350px] lg:left-[calc((100%-500px)/2)] lg:w-[500px] 2xl:left-[calc((100%-600px)/2)] 2xl:top-14 2xl:w-[600px]"
>
<ul class="max-h-56 list-none overflow-y-auto py-2 md:max-h-[80vh]">
{#if searchResults.length > 0}
@@ -379,4 +383,4 @@
</ul>
</div>
{/if}
-</header>
+</nav>
diff --git a/src/lib/components/search/NavBarSearch.svelte b/src/lib/components/search/NavBarSearch.svelte
index 64b255f21..053929d45 100644
--- a/src/lib/components/search/NavBarSearch.svelte
+++ b/src/lib/components/search/NavBarSearch.svelte
@@ -3,17 +3,17 @@
export let searchQuery: string
</script>
-<section class="flex h-14 items-center md:h-full">
+<section class="flex items-center h-12 pt-1.5 pb-2 md:p-0 md:h-full">
<div
class="flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 px-2 md:w-[350px] lg:w-[500px] 2xl:w-[600px]"
>
<iconify-icon
- class="mx-1 self-center p-1 text-lg text-black"
+ class="md:mx-1 self-center p-1 text-lg text-black"
icon="ri-search-line"
/>
<input
autocomplete="off"
- class="w-full px-3 py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
+ class="w-full px-1 py-1.5 md:px-3 md:py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
id="navbar_search"
placeholder="impôt sur le revenu, CSG, ..."
type="search"
@@ -21,7 +21,7 @@
/>
{#if isSearchActive}
<iconify-icon
- class="mx-1 cursor-pointer self-center p-1 text-black"
+ class="md:mx-1 cursor-pointer self-center p-1 text-black"
icon="ri-close-line"
width="20"
height="20"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 1cc4b8e17..3e967318c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -70,6 +70,9 @@ const config = {
950: "#161501",
},
},
+ fontSize: {
+ 'xxs': ['0.625rem', '0.75rem']
+ },
keyframes: {
blinker: {
"50%": { opacity: "60%" },
--
GitLab