Fix kanban cards style #6

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;

src/components/project/ProjectStep.vue

@@ -6,9 +6,10 @@
     </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>
+          <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
@@ -17,7 +18,6 @@
             >{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
           >
         </div>
-
         <!-- All images -->
         <figure
           v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
@@ -33,7 +33,6 @@
             :alt="image.alt"
           />
         </figure>
-
         <!-- First image -->
         <figure v-if="step.id === 'virtualSample'" class="card__images">
           <img
@@ -42,20 +41,17 @@
             :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">
-          <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>
       </article>
 
       <template v-if="step.id == 'proposal' && step.files.length">
@@ -64,12 +60,11 @@
           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">
-                {{
+              <router-link :to="'/' + step.uri + '&fileIndex=' + index" class="link-full">
-                  file.label.length ? file.label : file.name.replace(".pdf", "")
+                {{ file.label.length ? file.label : file.name.replace(".pdf", "") }}
-                }}
+              </router-link>
             </h3>
           </hgroup>
           <div class="card__meta | flex">
@@ -84,13 +79,11 @@
             class="card__images"
             data-icon="document"
           ></div>
-
+          <footer v-if="file.comments?.length > 0" class="order-last | text-sm text-primary font-medium">
-            <footer v-if="file.comments?.length > 0">
             {{ file.comments.length }} commentaire{{
               file.comments.length > 1 ? "s" : ""
             }}
           </footer>
-          </router-link>
         </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;