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

Add empty state for projects

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/src/3.utilities.icons.css
View file

@ -27,6 +27,7 @@
--icon-edit: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714233 19.2858H16.4285M9.28571 14.2858L5 15.0573L5.71428 10.7144L15.3286 1.12868C15.4614 1 15.6194 0.888509 15.7935 0.815983C15.9675 0.743456 16.1543 0.706116 16.3428 0.706116C16.5314 0.706116 16.7182 0.743456 16.8922 0.815983C17.0663 0.888509 17.2243 1 17.3571 1.12868L18.8714 2.64297C19.0053 2.77577 19.1116 2.93378 19.1841 3.10786C19.2567 3.28195 19.294 3.46867 19.294 3.65726C19.294 3.84584 19.2567 4.03257 19.1841 4.20665C19.1116 4.38074 19.0053 4.53874 18.8714 4.67154L9.28571 14.2858Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-arrow-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10H1.875M1.875 10L6.25 5.625M1.875 10L6.25 14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-document: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-document-thin: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='%235E6060' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-comment: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10.625C5.97018 10.625 6.25 10.3452 6.25 10C6.25 9.65482 5.97018 9.375 5.625 9.375C5.27982 9.375 5 9.65482 5 10C5 10.3452 5.27982 10.625 5.625 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6875 10.625C10.0327 10.625 10.3125 10.3452 10.3125 10C10.3125 9.65482 10.0327 9.375 9.6875 9.375C9.34232 9.375 9.0625 9.65482 9.0625 10C9.0625 10.3452 9.34232 10.625 9.6875 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 10.625C14.0952 10.625 14.375 10.3452 14.375 10C14.375 9.65482 14.0952 9.375 13.75 9.375C13.4048 9.375 13.125 9.65482 13.125 10C13.125 10.3452 13.4048 10.625 13.75 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.875C8.5303 1.87546 7.08825 2.27455 5.82743 3.02977C4.56661 3.78499 3.53425 4.86805 2.84029 6.1636C2.14634 7.45914 1.81679 8.91866 1.88674 10.3867C1.95668 11.8547 2.42351 13.2763 3.2375 14.5L1.875 18.125L6.4375 17.3C7.53613 17.8369 8.74178 18.1188 9.96456 18.1249C11.1873 18.131 12.3957 17.8609 13.4996 17.335C14.6035 16.809 15.5745 16.0407 16.3401 15.0872C17.1057 14.1338 17.6462 13.0198 17.9214 11.8284C18.1966 10.637 18.1993 9.39878 17.9293 8.20616C17.6593 7.01354 17.1237 5.89723 16.3622 4.94046C15.6008 3.98368 14.6332 3.21111 13.5316 2.68034C12.43 2.14957 11.2228 1.87428 10 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-comment-default: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%239DA0A0' stroke='%23373838' stroke-width='2'/%3E%3C/svg%3E%0A");
--icon-comment-new: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%2300968F' stroke='white'/%3E%3C/svg%3E%0A");

21
src/components/Projects.vue
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>