studio-variable/designtopack
4
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); row-gap: var(--row-gap);
} }
.card__title {
position: initial;
}
.card__title > a { .card__title > a {
font: inherit; font: inherit;
color: currentColor; color: currentColor;
@ -26,7 +29,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
border: 4px solid var(--color-grey-50); border: 4px solid var(--color-grey-50);
border-radius: var(--rounded-2xl); border-radius: var(--rounded-lg);
overflow: hidden; overflow: hidden;
margin-bottom: var(--space-16); margin-bottom: var(--space-16);
aspect-ratio: 408/220; aspect-ratio: 408/220;

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

@ -6,56 +6,52 @@
</h2> </h2>
<div class="cards | flow"> <div class="cards | flow">
<article class="card" v-if="step.id !== 'proposal'"> <article class="card" v-if="step.id !== 'proposal'">
<router-link :to="'/' + step.uri"> <hgroup class="order-last">
<hgroup class="order-last"> <h3 class="card__title | font-serif | text-lg">
<h3 class="card__title | font-serif | text-lg">{{ step.label }}</h3> <router-link :to="'/' + step.uri" class="link-full">{{ step.label }}</router-link>
</hgroup> </h3>
<div class="card__meta | flex"> </hgroup>
<time <div class="card__meta | flex">
class="card__date | text-grey-700" <time
:datetime="dayjs(step.modified).format('YYYY-M-DD')" class="card__date | text-grey-700"
>{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time :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
"
> >
<img </div>
v-for="image in step.files.slice(0, 3)" <!-- All images -->
:key="image.uuid" <figure
:src="image.url" v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
:alt="image.alt" class="card__images"
/> :data-count="
</figure> step.files.length > 3 ? step.files.length - 3 : undefined
"
<!-- First image --> >
<figure v-if="step.id === 'virtualSample'" class="card__images"> <img
<img v-for="image in step.files.slice(0, 3)"
:key="step.files[0].uuid" :key="image.uuid"
:src="step.files[0].url" :src="image.url"
:alt="step.files[0].alt" :alt="image.alt"
/> />
</figure> </figure>
<!-- First image -->
<!-- Document --> <figure v-if="step.id === 'virtualSample'" class="card__images">
<div <img
v-if="step.files[0]?.type === 'document'" :key="step.files[0].uuid"
class="card__images" :src="step.files[0].url"
data-icon="document" :alt="step.files[0].alt"
></div> />
</figure>
<footer v-if="step?.files[0]?.comments?.length > 0"> <!-- Document -->
{{ step.files[0].comments.length }} commentaire{{ <div
step.files[0].comments.length > 1 ? "s" : "" v-if="step.files[0]?.type === 'document'"
}} class="card__images"
</footer> data-icon="document"
</router-link> ></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> </article>
<template v-if="step.id == 'proposal' && step.files.length"> <template v-if="step.id == 'proposal' && step.files.length">
@ -64,33 +60,30 @@
v-for="(file, index) in step.files" v-for="(file, index) in step.files"
:key="file.name" :key="file.name"
> >
<router-link :to="'/' + step.uri + '&fileIndex=' + index"> <hgroup class="order-last">
<hgroup class="order-last"> <h3 class="card__title | font-serif | text-lg">
<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>
</h3> </hgroup>
</hgroup> <div class="card__meta | flex">
<div class="card__meta | flex"> <time
<time class="card__date | text-grey-700"
class="card__date | text-grey-700" :datetime="dayjs(file.modified).format('YYYY-M-DD')"
:datetime="dayjs(file.modified).format('YYYY-M-DD')" >{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time
>{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time >
> </div>
</div> <div
<div v-if="index === 0"
v-if="index === 0" class="card__images"
class="card__images" data-icon="document"
data-icon="document" ></div>
></div> <footer v-if="file.comments?.length > 0" class="order-last | text-sm text-primary font-medium">
{{ file.comments.length }} commentaire{{
<footer v-if="file.comments?.length > 0"> file.comments.length > 1 ? "s" : ""
{{ file.comments.length }} commentaire{{ }}
file.comments.length > 1 ? "s" : "" </footer>
}}
</footer>
</router-link>
</article> </article>
</template> </template>
</div> </div>
@ -149,6 +142,9 @@ function setStatus() {
max-height: calc(100% - var(--header-height)); max-height: calc(100% - var(--header-height));
overflow-y: auto; overflow-y: auto;
} }
.kanban .card {
row-gap: 0;
}
.kanban > section h2 { .kanban > section h2 {
position: relative; position: relative;