From f985ed36c553a948b11d01fb98b841776b60402b Mon Sep 17 00:00:00 2001
From: David Smadja <david.smadja@assemblee-nationale.fr>
Date: Wed, 16 Apr 2025 15:51:29 +0200
Subject: [PATCH] Functional sticky layout
---
.../VariableReferredNodeParameter.svelte | 43 ++++++++++++++++++-
src/routes/+page.svelte | 8 ++--
2 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte b/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
index b517587ad..6b909fc3f 100644
--- a/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
+++ b/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
@@ -13,6 +13,7 @@
import VariableReferredValueParameter from "$lib/components/legislation_view/parameters/VariableReferredValueParameter.svelte"
import type { DisplayMode } from "$lib/displays"
+ import { onMount } from "svelte"
interface Props {
billParameter: NodeParameter
@@ -96,11 +97,40 @@
yield [bothChild, lawChild, revaluationChild, billChild]
}
}
+
+ onMount(() => {
+ const updateStickyTop = () => {
+ const stickyElements = document.querySelectorAll(".sticky-element")
+
+ stickyElements.forEach((el) => {
+ const depth = Number((el as HTMLElement).dataset.depth) - 1
+ const top = depth * 32
+ ;(el as HTMLElement).style.top = `${top}px`
+
+ // const newzIndex = Number((el as HTMLElement).style) - 1
+ // ;(el as HTMLElement).style.zIndex = newzIndex.toString()
+ })
+ }
+
+ // Mettre à jour la valeur au chargement
+ updateStickyTop()
+
+ // // Mettre à jour si la fenêtre est redimensionnée
+ // window.addEventListener("resize", updateStickyTop)
+
+ // return () => {
+ // window.removeEventListener("resize", updateStickyTop)
+ // }
+ })
</script>
-<section>
+<section style="isolation: isolate;">
{#if depth !== 0}
- <div class="flex w-full items-center text-gray-600">
+ {@const zIndex = 10000 - depth}
+ <div
+ data-depth={depth}
+ class="sticky-element flex h-8 w-full items-center text-gray-600 z-[{zIndex}]"
+ >
<button
aria-label={openChildrenParameters ? "fermer" : "ouvrir"}
onclick={() => (openChildrenParameters = !openChildrenParameters)}
@@ -174,3 +204,12 @@
{/if}
{/if}
</section>
+
+<style>
+ :global(.sticky-element) {
+ position: sticky !important;
+ /*top: 0px; Cette valeur sera mise à jour en JavaScript */
+ z-index: 1000;
+ background-color: white; /* Ou toute autre couleur de fond nécessaire */
+ }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 878875138..741ee5dcd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -956,13 +956,13 @@
<!-- Content -->
{#key displayMode.parametersVariableName === undefined}
<div
- class="w-screen overflow-y-scroll bg-white px-2 py-5 md:w-full"
+ class="w-screen overflow-y-scroll bg-white px-2 pb-5 md:w-full"
out:fade={{ duration: 100 }}
in:fade={{ delay: 150, duration: 150 }}
>
<!-- Vue par défaut - choix de dispositifs -->
{#if displayMode.parametersVariableName === undefined}
- <div class="px-6 py-3">
+ <div class="px-6 pb-3 pt-8">
<h2
class="highlight-rotated-before highlight-rotated-after relative z-10 inline-block max-w-xs text-2xl font-light text-black"
>
@@ -1067,7 +1067,7 @@
</div>
<!-- Vue modification de la loi -->
{:else}
- <div class="mb-4 flex justify-between">
+ <div class="mb-4 flex justify-between pt-5">
{#if displayMode.parametersVariableName !== undefined && parameterParentName !== undefined}
{@const parentShortLabel = parameterParentName
? (shared.decompositionByName[parameterParentName]
@@ -1131,7 +1131,7 @@
<!-- <div class="mb-5 flex flex-col gap-2">-->
{#key displayMode.parametersVariableName}
<div
- class="mt-1 flex-1 overflow-y-auto bg-white"
+ class="mt-1 flex-1 bg-white"
out:fade={{ duration: 100 }}
in:fade={{ delay: 150, duration: 150 }}
>
--
GitLab