From b0c04e277a53a825171af2c903455ac7224d4ab4 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 19 Nov 2024 15:55:27 +0100
Subject: [PATCH] Fix kanban cards style #6

---
 src/assets/css/src/2.blocks.card.css   |   5 +-
 src/components/project/ProjectStep.vue | 148 ++++++++++++-------------
 2 files changed, 76 insertions(+), 77 deletions(-)

diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css
index 64ec3bf..bd21b7d 100644
--- a/src/assets/css/src/2.blocks.card.css
+++ b/src/assets/css/src/2.blocks.card.css
@@ -11,6 +11,9 @@
   row-gap: var(--row-gap);
 }
 
+.card__title {
+  position: initial;
+}
 .card__title > a {
   font: inherit;
   color: currentColor;
@@ -26,7 +29,7 @@
   position: relative;
   width: 100%;
   border: 4px solid var(--color-grey-50);
-  border-radius: var(--rounded-2xl);
+  border-radius: var(--rounded-lg);
   overflow: hidden;
   margin-bottom: var(--space-16);
   aspect-ratio: 408/220;
diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue
index 7d12810..587dc3b 100644
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@@ -6,56 +6,52 @@
     </h2>
     <div class="cards | flow">
       <article class="card" v-if="step.id !== 'proposal'">
-        <router-link :to="'/' + step.uri">
-          <hgroup class="order-last">
-            <h3 class="card__title | font-serif | text-lg">{{ step.label }}</h3>
-          </hgroup>
-          <div class="card__meta | flex">
-            <time
-              class="card__date | text-grey-700"
-              :datetime="dayjs(step.modified).format('YYYY-M-DD')"
-              >{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
-            >
-          </div>
-
-          <!-- All images -->
-          <figure
-            v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
-            class="card__images"
-            :data-count="
-              step.files.length > 3 ? step.files.length - 3 : undefined
-            "
+        <hgroup class="order-last">
+          <h3 class="card__title | font-serif | text-lg">
+            <router-link :to="'/' + step.uri" class="link-full">{{ step.label }}</router-link>
+          </h3>
+        </hgroup>
+        <div class="card__meta | flex">
+          <time
+            class="card__date | text-grey-700"
+            :datetime="dayjs(step.modified).format('YYYY-M-DD')"
+            >{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
           >
-            <img
-              v-for="image in step.files.slice(0, 3)"
-              :key="image.uuid"
-              :src="image.url"
-              :alt="image.alt"
-            />
-          </figure>
-
-          <!-- First image -->
-          <figure v-if="step.id === 'virtualSample'" class="card__images">
-            <img
-              :key="step.files[0].uuid"
-              :src="step.files[0].url"
-              :alt="step.files[0].alt"
-            />
-          </figure>
-
-          <!-- Document -->
-          <div
-            v-if="step.files[0]?.type === 'document'"
-            class="card__images"
-            data-icon="document"
-          ></div>
-
-          <footer v-if="step?.files[0]?.comments?.length > 0">
-            {{ step.files[0].comments.length }} commentaire{{
-              step.files[0].comments.length > 1 ? "s" : ""
-            }}
-          </footer>
-        </router-link>
+        </div>
+        <!-- All images -->
+        <figure
+          v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
+          class="card__images"
+          :data-count="
+            step.files.length > 3 ? step.files.length - 3 : undefined
+          "
+        >
+          <img
+            v-for="image in step.files.slice(0, 3)"
+            :key="image.uuid"
+            :src="image.url"
+            :alt="image.alt"
+          />
+        </figure>
+        <!-- First image -->
+        <figure v-if="step.id === 'virtualSample'" class="card__images">
+          <img
+            :key="step.files[0].uuid"
+            :src="step.files[0].url"
+            :alt="step.files[0].alt"
+          />
+        </figure>
+        <!-- Document -->
+        <div
+          v-if="step.files[0]?.type === 'document'"
+          class="card__images"
+          data-icon="document"
+        ></div>
+        <footer v-if="step?.files[0]?.comments?.length > 0" class="order-last | text-sm text-primary font-medium">
+          {{ step.files[0].comments.length }} commentaire{{
+            step.files[0].comments.length > 1 ? "s" : ""
+          }}
+        </footer>
       </article>
 
       <template v-if="step.id == 'proposal' && step.files.length">
@@ -64,33 +60,30 @@
           v-for="(file, index) in step.files"
           :key="file.name"
         >
-          <router-link :to="'/' + step.uri + '&fileIndex=' + index">
-            <hgroup class="order-last">
-              <h3 class="card__title | font-serif | text-lg">
-                {{
-                  file.label.length ? file.label : file.name.replace(".pdf", "")
-                }}
-              </h3>
-            </hgroup>
-            <div class="card__meta | flex">
-              <time
-                class="card__date | text-grey-700"
-                :datetime="dayjs(file.modified).format('YYYY-M-DD')"
-                >{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time
-              >
-            </div>
-            <div
-              v-if="index === 0"
-              class="card__images"
-              data-icon="document"
-            ></div>
-
-            <footer v-if="file.comments?.length > 0">
-              {{ file.comments.length }} commentaire{{
-                file.comments.length > 1 ? "s" : ""
-              }}
-            </footer>
-          </router-link>
+          <hgroup class="order-last">
+            <h3 class="card__title | font-serif | text-lg">
+              <router-link :to="'/' + step.uri + '&fileIndex=' + index" class="link-full">
+                {{ file.label.length ? file.label : file.name.replace(".pdf", "") }}
+              </router-link>
+            </h3>
+          </hgroup>
+          <div class="card__meta | flex">
+            <time
+              class="card__date | text-grey-700"
+              :datetime="dayjs(file.modified).format('YYYY-M-DD')"
+              >{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time
+            >
+          </div>
+          <div
+            v-if="index === 0"
+            class="card__images"
+            data-icon="document"
+          ></div>
+          <footer v-if="file.comments?.length > 0" class="order-last | text-sm text-primary font-medium">
+            {{ file.comments.length }} commentaire{{
+              file.comments.length > 1 ? "s" : ""
+            }}
+          </footer>
         </article>
       </template>
     </div>
@@ -149,6 +142,9 @@ function setStatus() {
   max-height: calc(100% - var(--header-height));
   overflow-y: auto;
 }
+.kanban .card {
+  row-gap: 0;
+}
 
 .kanban > section h2 {
   position: relative;