Skip to content
Snippets Groups Projects
Commit 28c6dc5e authored by Toufic Batache's avatar Toufic Batache
Browse files

Créer le nouveau header (du simulateur) #267

parent 718a78f0
Branches
Tags
1 merge request!210Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur
Show whitespace changes
Inline Side-by-side
src/lib/components/NavBar.svelte
+ 89
− 85
View file @ 28c6dc5e
......@@ -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,8 +137,7 @@
<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">
<ul class="basis-1/3 flex items-center justify-end gap-2 xl:gap-5 pr-2">
<!--Bouton tutoriel-->
<li>
<button
......@@ -190,15 +196,11 @@
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"
<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"
/>
<iconify-icon class="text-lg" icon="ri-logout-box-r-line" />
</button>
</div>
</PersistentPopover>
......@@ -206,18 +208,20 @@
{/if}
{/if}
</ul>
</nav>
</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>
src/lib/components/search/NavBarSearch.svelte
+ 4
− 4
View file @ 28c6dc5e
......@@ -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"
......
tailwind.config.cjs
+ 3
− 0
View file @ 28c6dc5e
......@@ -70,6 +70,9 @@ const config = {
950: "#161501",
},
},
fontSize: {
'xxs': ['0.625rem', '0.75rem']
},
keyframes: {
blinker: {
"50%": { opacity: "60%" },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment