diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index db9d298908c1fba9cc441f71a18d08789c7804d0..f6faf778912327f461badce202f9116743778bce 100644
--- a/src/lib/components/test_cases/TestCaseCompareView.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareView.svelte
@@ -86,9 +86,7 @@
class="relative w-full rounded-t-sm bg-white shadow-md md:mb-5"
id="situation_{situationsToCompareIndex.join('_')}"
>
- <div
- class="flex justify-end rounded-t-md border-t border-l border-r border-gray-200 bg-gray-100 py-1 px-6"
- >
+ <div class="flex justify-start rounded-t-md bg-gray-100 py-1 px-6">
{#if displayMode.edit === undefined}
<button
class="inline-flex items-center justify-self-end text-gray-400 hover:text-black"
@@ -97,15 +95,12 @@
type="button"
title="Fermer la comparaison des deux cas types"
>
- <span class="text-sm uppercase">Quitter Comparaison</span>
<Icon icon="ri-close-line" class="h-6 w-6" />
+ <span class="text-sm uppercase">Quitter Comparaison</span>
</button>
{/if}
</div>
- <div
- class="sticky top-0 z-20 flex border-b-2 border-r border-l border-gray-200"
- >
- <div class="w-2/12 bg-gray-100 md:w-1/12" />
+ <div class="sticky top-0 z-20 flex border-b-2 border-l border-gray-200">
<div
class="flex w-10/12 justify-self-end bg-[url('/background_image/background_compareview_header.svg')] bg-cover bg-center bg-no-repeat px-4 md:w-11/12"
id="situation_{situationsToCompareIndex.join('_')}_cases_summary"
@@ -132,51 +127,14 @@
</div>
{/each}
</div>
+ <div class="w-2/12 bg-gray-100 md:w-1/12" />
</div>
<div id="situation_{situationsToCompareIndex.join('_')}_waterfall">
{#if variableSummaryByName !== undefined}
<div class="flex justify-between bg-gray-100">
- <!--Onglets-->
- <div
- class="flex max-h-[38em] min-h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
- >
- {#each waterfalls as { icon, label, name }}
- <a
- class="flex grow items-center justify-around shadow-inner"
- class:bg-white={name === $waterfall.name}
- class:border-le-bleu={name === $waterfall.name}
- class:border-r-4={name === $waterfall.name}
- class:shadow-none={name === $waterfall.name}
- href={newSimulationUrl({
- ...displayMode,
- waterfallName: name,
- })}
- data-sveltekit-noscroll
- >
- <div class="origin-center -rotate-90">
- <div class="flex">
- <span
- class="mr-2 text-xs uppercase tracking-wide text-gray-500 xl:text-sm"
- class:text-le-bleu={name === $waterfall.name}
- class:font-bold={name === $waterfall.name}
- >
- {label}
- </span>
- {#if icon !== undefined}
- <img
- class="block origin-center rotate-90"
- alt="Icone pour {label}"
- src={icon}
- />
- {/if}
- </div>
- </div>
- </a>
- {/each}
- </div>
<!-- Impacts et waterfall -->
<div
- class="min-h-[30em] w-10/12 border-b-2 border-r border-gray-200 bg-[url('/background_image/background_compareview_body.svg')] bg-cover bg-center bg-no-repeat px-3 text-center md:w-11/12"
+ class="min-h-[30em] w-10/12 border-b-2 border-l border-gray-200 bg-[url('/background_image/background_compareview_body.svg')] bg-cover bg-center bg-no-repeat px-3 text-center md:w-11/12"
>
<div class="relative flex-col border-gray-400 p-3 pb-6">
{#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || situationsToCompareIndex.includes(calculation.situationIndex))).length > 0}
@@ -346,6 +304,44 @@
{year}
/>
</div>
+ <!--Onglets-->
+ <div
+ class="sticky top-72 flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+ >
+ {#each waterfalls as { icon, label, name }}
+ <a
+ class="flex grow items-center justify-around shadow-inner"
+ class:bg-white={name === $waterfall.name}
+ class:border-le-bleu={name === $waterfall.name}
+ class:border-r-4={name === $waterfall.name}
+ class:shadow-none={name === $waterfall.name}
+ href={newSimulationUrl({
+ ...displayMode,
+ waterfallName: name,
+ })}
+ data-sveltekit-noscroll
+ >
+ <div class="origin-center rotate-90">
+ <div class="mr-5 flex">
+ {#if icon !== undefined}
+ <img
+ class="block origin-center -rotate-90"
+ alt="Icone pour {label}"
+ src={icon}
+ />
+ {/if}
+ <span
+ class="ml-2 text-xs uppercase tracking-wide text-gray-500 xl:text-sm"
+ class:text-le-bleu={name === $waterfall.name}
+ class:font-bold={name === $waterfall.name}
+ >
+ {label}
+ </span>
+ </div>
+ </div>
+ </a>
+ {/each}
+ </div>
</div>
{/if}
</div>
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index bd64da8527719027cc417ad39b396e54ea33c492..2748c6dd32419046389db9506424c393c72b28eb 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -310,7 +310,7 @@
{#if !displayMode.compact}
<!--Onglets-->
<div
- class="flex max-h-[38em] min-h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+ class="sticky top-72 flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
id="situation_{situationIndex}_Employeur"
>
{#each waterfalls as { icon, label, name }}
@@ -327,7 +327,7 @@
data-sveltekit-noscroll
>
<div class="origin-center rotate-90">
- <div class="flex ">
+ <div class="mr-5 flex">
{#if icon !== undefined}
<img
class="block origin-center -rotate-90"
diff --git a/static/background_image/background_compareview_body.svg b/static/background_image/background_compareview_body.svg
index 7592072298dc2ea115f3d2f31e66144094df9984..92f4bbd1657615d0788c3df507f5a8973ba392f9 100644
--- a/static/background_image/background_compareview_body.svg
+++ b/static/background_image/background_compareview_body.svg
@@ -1,4 +1,4 @@
<svg width="362" height="267" viewBox="0 0 362 267" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="362" height="267" fill="white"/>
-<rect x="181" width="181" height="267" fill="#F1F1F1"/>
+<rect width="362" height="267" fill="#F1F1F1"/>
+<rect x="181" width="181" height="267" fill="white"/>
</svg>
diff --git a/static/background_image/background_compareview_header.svg b/static/background_image/background_compareview_header.svg
index 17140563e7b6815a4568964e76a9e8e499013822..323aaaf22d944b46c982d2e96e7a58c447d17e0a 100644
--- a/static/background_image/background_compareview_header.svg
+++ b/static/background_image/background_compareview_header.svg
@@ -1,5 +1,5 @@
<svg width="362" height="267" viewBox="0 0 362 267" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="362" height="267" fill="white"/>
-<rect width="181" height="267" fill="#F5F5F5"/>
-<rect x="181" width="181" height="267" fill="#DCDCDC"/>
+<rect width="181" height="267" fill="#DCDCDC"/>
+<rect x="181" width="181" height="267" fill="#F5F5F5"/>
</svg>