Skip to content
Snippets Groups Projects
Commit 4d60bdf2 authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Onglets à droite dans la vue de comparaison

parent 23f5bd15
No related branches found
No related tags found
1 merge request!102Ui carte cas types
Pipeline #5927 passed
Stage: build
Show whitespace changes
Inline Side-by-side
src/lib/components/test_cases/TestCaseCompareView.svelte
+ 43
− 47
View file @ 4d60bdf2
......@@ -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>
......
src/lib/components/test_cases/TestCaseView.svelte
+ 2
− 2
View file @ 4d60bdf2
......@@ -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"
......
static/background_image/background_compareview_body.svg
+ 2
− 2
View file @ 4d60bdf2
<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>
static/background_image/background_compareview_header.svg
+ 2
− 2
View file @ 4d60bdf2
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment