From 4d60bdf25f5a72399117c16aa73b26ca715c0cc0 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Thu, 15 Sep 2022 16:12:38 +0200
Subject: [PATCH] =?UTF-8?q?Onglets=20=C3=A0=20droite=20dans=20la=20vue=20d?=
 =?UTF-8?q?e=20comparaison?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test_cases/TestCaseCompareView.svelte     | 90 +++++++++----------
 .../components/test_cases/TestCaseView.svelte |  4 +-
 .../background_compareview_body.svg           |  4 +-
 .../background_compareview_header.svg         |  4 +-
 4 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index db9d29890..f6faf7789 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 bd64da852..2748c6dd3 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 759207229..92f4bbd16 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 17140563e..323aaaf22 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>
-- 
GitLab