projects : prepare empty state

This commit is contained in:
isUnknown 2024-11-21 16:58:19 +01:00
parent 62a159fa9b
commit b76c62fa70
2 changed files with 32 additions and 33 deletions

View file

@ -1,6 +1,5 @@
<template> <template>
<h2 id="tabslist" class="sr-only">Projets</h2> <h2 id="tabslist" class="sr-only">Projets</h2>
<template v-if="projects.length > 0">
<Tabs :tabs="tabs" @update:currentTab="changeTab" /> <Tabs :tabs="tabs" @update:currentTab="changeTab" />
<section <section
v-if="currentTab === 'currentProjects'" v-if="currentTab === 'currentProjects'"
@ -9,6 +8,7 @@
tabindex="0" tabindex="0"
aria-labelledby="projets-en-cours-label" aria-labelledby="projets-en-cours-label"
class="flow" class="flow"
:class="{ empty: currentProjects.length === 0 }"
> >
<Project <Project
v-for="project in currentProjects" v-for="project in currentProjects"
@ -22,6 +22,7 @@
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
aria-labelledby="projet-archives-label" aria-labelledby="projet-archives-label"
:class="{ empty: archivedProjects.length === 0 }"
> >
<Project <Project
v-for="project in archivedProjects" v-for="project in archivedProjects"
@ -30,7 +31,6 @@
/> />
</section> </section>
</template> </template>
</template>
<script setup> <script setup>
import Tabs from "./Tabs.vue"; import Tabs from "./Tabs.vue";
import Project from "./project/Project.vue"; import Project from "./project/Project.vue";

View file

@ -107,7 +107,6 @@ function changeTab(tabId) {
--icon-color: var(--color-brand); --icon-color: var(--color-brand);
} }
[role="tabpanel"] { [role="tabpanel"] {
width: 100%; width: 100%;
overflow: auto; overflow: auto;