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

kanban : prepare empty states

Browse source
This commit is contained in:
isUnknown 2024-11-21 18:10:24 +01:00
parent d4c2f9e408
commit 91233e6672
2 changed files with 100 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/content/projects/1_miss-dior-blooming-bouquet/3_extended-brief/extended-brief.txt
View file

@ -6,7 +6,7 @@ Stepname: extendedBrief
---- ----
Pdf: - file://znIEFNoLyfGe7Lw4 Pdf:
---- ----

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

@ -9,112 +9,125 @@
<span :data-icon="step.id">{{ step.label }}</span> <span :data-icon="step.id">{{ step.label }}</span>
</h2> </h2>
<div class="cards | flow"> <div class="cards | flow">
<article class="card" v-if="step.id !== 'proposal'"> <template
<hgroup class="order-last"> v-if="
<h3 class="card__title | font-serif | text-lg"> step.id === 'clientBrief' ||
<router-link :to="'/' + step.uri" class="link-full">{{ step.files.dynamic ||
step.label step.files.static ||
}}</router-link> step.files.length
</h3> "
</hgroup> >
<div class="card__meta | flex"> <article class="card" v-if="step.id !== 'proposal'">
<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.dynamic.length"
:data-plus="
step.files.dynamic.length > 3
? step.files.dynamic.length - 3
: undefined
"
>
<img
v-for="image in step.files.dynamic.slice(0, 3)"
:key="image.uuid"
:src="image.url"
:alt="image.alt"
/>
</figure>
<figure
v-if="step.id === 'virtualSample'"
class="card__images"
:data-count="step.files.dynamic.length"
:data-plus="
step.files.dynamic.length > 3
? step.files.dynamic.length - 3
: undefined
"
>
<img
v-for="track in step.files.dynamic"
:key="track.files[0].slug"
:src="track.files[0].url"
:alt="track.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">
<article
class="card"
v-for="(file, index) in step.files"
:key="file.name"
>
<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 <router-link :to="'/' + step.uri" class="link-full">{{
:to="'/' + step.uri + '&fileIndex=' + index" step.label
class="link-full" }}</router-link>
>
{{
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(step.modified).format('YYYY-M-DD')"
>{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time >{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
> >
</div> </div>
<!-- All images -->
<figure
v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
class="card__images"
:data-count="step.files.dynamic.length"
:data-plus="
step.files.dynamic.length > 3
? step.files.dynamic.length - 3
: undefined
"
>
<img
v-for="image in step.files.dynamic.slice(0, 3)"
:key="image.uuid"
:src="image.url"
:alt="image.alt"
/>
</figure>
<figure
v-if="step.id === 'virtualSample'"
class="card__images"
:data-count="step.files.dynamic.length"
:data-plus="
step.files.dynamic.length > 3
? step.files.dynamic.length - 3
: undefined
"
>
<img
v-for="track in step.files.dynamic"
:key="track.files[0].slug"
:src="track.files[0].url"
:alt="track.files[0].alt"
/>
</figure>
<!-- Document -->
<div <div
v-if="index === 0" v-if="step.files[0]?.type === 'document'"
class="card__images" class="card__images"
data-icon="document" data-icon="document"
></div> ></div>
<footer <footer
v-if="file.comments?.length > 0" v-if="step?.files[0]?.comments?.length > 0"
class="order-last | text-sm text-primary font-medium" class="order-last | text-sm text-primary font-medium"
> >
{{ file.comments.length }} commentaire{{ {{ step.files[0].comments.length }} commentaire{{
file.comments.length > 1 ? "s" : "" step.files[0].comments.length > 1 ? "s" : ""
}} }}
</footer> </footer>
</article> </article>
<template v-if="step.id == 'proposal' && step.files.length">
<article
class="card"
v-for="(file, index) in step.files"
:key="file.name"
>
<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>
</template> </template>
<!-- Empty state -->
<template v-else> </template>
</div> </div>
</section> </section>
</template> </template>