studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Fix kanban cards style #6

Browse source
This commit is contained in:
Timothée Goguely 2024-11-19 15:55:27 +01:00
parent 3e57a4bdc9
commit b0c04e277a
2 changed files with 76 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/src/2.blocks.card.css
View file

@ -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;

148
src/components/project/ProjectStep.vue
View file

@ -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;