From 69aa6a85caa069f7b80ecb5012c777dff883abd4 Mon Sep 17 00:00:00 2001
From: Toufic Batache <taffou2a@gmail.com>
Date: Thu, 8 Jun 2023 16:43:10 +0200
Subject: [PATCH] Changed related test case "selected" layout
---
.../test_cases/TestCaseRelatedCarousel.svelte | 27 +++++++++++--------
tailwind.config.cjs | 13 +++++++++
2 files changed, 29 insertions(+), 11 deletions(-)
diff --git a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
index f403b1e32..6722e3018 100644
--- a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
+++ b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
@@ -82,20 +82,17 @@
on:scroll={(ev) => (carouselScrollX = ev.target.scrollLeft)}
class="flex w-full snap-x scroll-p-10 gap-5 overflow-x-auto scroll-smooth py-5 md:-ml-14 lg:-ml-20 2xl:-ml-[88px]"
>
- <!-- <div class="snap-center shrink-0">-->
- <!-- <div class="shrink-0 w-4 sm:w-20"></div>-->
- <!-- </div>-->
<div />
{#each filteredTestCases as { situation, situationIndex }}
{@const isTestCaseSelected =
JSON.stringify(displayMode.testCasesIndex) ===
JSON.stringify([situationIndex])}
<div
- class="w-[80%] shrink-0 snap-start md:w-[400px]"
+ class="flex w-[80%] shrink-0 snap-start md:w-[400px]"
value={situationIndex}
>
<button
- class="group w-full text-start"
+ class="group w-full self-start text-start"
on:click={() => {
if (!isTestCaseSelected)
replacementValidationModalTestCaseIndex = situationIndex
@@ -103,8 +100,9 @@
type="button"
>
<div
- class="overflow-hidden rounded-md border-2 hover:border-le-bleu hover:bg-gray-200"
- class:border-le-bleu={isTestCaseSelected}
+ class="overflow-hidden rounded-md border-2"
+ class:hover:border-le-vert-500={!isTestCaseSelected}
+ class:cursor-default={isTestCaseSelected}
id="situation_{situationIndex}_case_summary"
>
<div class="bg-gray-100 p-4 pb-2 text-left">
@@ -135,17 +133,24 @@
</div>
</div>
<span
- class="text-sm group-hover:text-le-bleu 2xl:text-base"
- class:text-le-bleu={JSON.stringify(displayMode.testCasesIndex) ===
- JSON.stringify([situationIndex])}
+ class="text-sm 2xl:text-base"
+ class:group-hover:text-le-vert-800={!isTestCaseSelected}
>
{situation.title}
</span>
</button>
+ {#if isTestCaseSelected}
+ <span
+ class="-ml-32 -mt-4 flex h-fit shrink-0 items-center gap-1 rounded-2xl bg-le-vert-200 px-3 py-1 text-sm text-le-vert-900"
+ >
+ sélectionné
+ <iconify-icon icon="ri-check-line" />
+ </span>
+ {/if}
</div>
{/each}
<div
- class="w-[80%] shrink-0 snap-center rounded-md border-2 bg-white/30 hover:border-le-bleu hover:bg-gray-50/50 md:w-[400px]"
+ class="w-[80%] shrink-0 snap-start rounded-md border-2 bg-white/30 hover:border-le-vert-500 hover:bg-gray-50/50 hover:text-le-vert-800 md:w-[400px]"
>
<button
class="flex h-full min-h-[320px] w-full flex-col items-center justify-center gap-5"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 56fa69a1c..39af68818 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -50,6 +50,19 @@ const config = {
"le-gris-dispositif-dark": "#2F406A",
"le-vert-validation": "#13CC03",
"le-vert-validation-dark": "#377330",
+ "le-vert": {
+ 50: "#f1f0e6",
+ 100: "#e2e1cd",
+ 200: "#c5c39c",
+ 300: "#a8a66a",
+ 400: "#8b8839",
+ 500: "#6e6a07",
+ 600: "#635f06",
+ 700: "#585506",
+ 800: "#424004",
+ 900: "#2c2a03",
+ 950: "#161501",
+ },
},
keyframes: {
blinker: {
--
GitLab