Add empty state for projects

This commit is contained in:
Timothée Goguely 2024-11-21 19:33:14 +01:00
parent fc8bda1667
commit 3c78293656
2 changed files with 20 additions and 2 deletions

View file

@ -8,7 +8,6 @@
tabindex="0"
aria-labelledby="projets-en-cours-label"
class="flow"
:class="{ empty: currentProjects.length === 0 }"
>
<Project
v-for="project in currentProjects"
@ -22,7 +21,6 @@
role="tabpanel"
tabindex="0"
aria-labelledby="projet-archives-label"
:class="{ empty: archivedProjects.length === 0 }"
>
<Project
v-for="project in archivedProjects"
@ -68,8 +66,27 @@ function changeTab(newValue) {
<style scoped>
section {
--flow-space: var(--space-16);
min-height: calc(100vh - 8.5rem);
position: relative;
}
section > * {
display: block;
}
section:empty::after {
content: "Aucun projet pour le moment.";
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
max-width: 24ch;
height: 8rem;
margin: auto;
font-size: var(--text-sm);
color: var(--color-grey-700);
background-image: var(--icon-document-thin);
background-position: top center;
background-repeat: no-repeat;
background-size: var(--space-40);
}
</style>