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

Fix project-steps style

Browse source
This commit is contained in:
Timothée Goguely 2024-11-21 17:53:00 +01:00
parent b76c62fa70
commit d5df45cb55
2 changed files with 90 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/components/project/Project.vue
View file

@ -11,15 +11,15 @@
</p>
</hgroup>
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
<ol class="project-steps" :data-steps="project.steps.length">
<ol class="project-steps" :data-steps="project.steps.length" :style="'--steps:'+project.steps.length">
<li
v-for="step in project.steps"
class="project-step"
:data-status="setStatus(project.steps, project.currentStep, step)"
>
<span class="pill" :data-icon="step.id">{{
stepsLabels[project.currentStep]
}}</span>
<span class="pill" :data-icon="step.id">
<span>{{ step.label }}</span>
</span>
</li>
</ol>
</article>
@ -44,12 +44,12 @@ const { stepsLabels, setStatus } = useProjectStore();
<style scoped>
.project-item {
--wrap: no-wrap;
background: var(--color-background);
}
.project-item hgroup {
flex: 1 1 0%;
min-width: 15rem;
}
.project-item h3 {
font-family: var(--font-serif);
@ -73,24 +73,13 @@ const { stepsLabels, setStatus } = useProjectStore();
.project-steps {
--color: var(--color-primary-100);
flex: 1 1 0%;
--gap: var(--space-16);
flex: 0 1 0%;
display: flex;
gap: var(--space-16);
gap: var(--gap);
margin-top: -2.75rem;
position: relative;
}
.project-steps[data-steps="1"]::after {
content: "étapes à venir";
font-size: var(--text-sm);
font-weight: 500;
width: 8rem;
position: absolute;
text-align: center;
color: var(--color-grey-700);
background: var(--color-background);
bottom: -2rem;
left: 50%;
transform: translate(-50%, -0.2em);
min-width: max(55%, 45rem);
}
.project-step {
@ -107,39 +96,76 @@ const { stepsLabels, setStatus } = useProjectStore();
text-align: left;
}
.project-step[data-status="in-progress"]:only-child::before,
.project-step[data-status="in-progress"]:only-child::after,
.project-step[data-status="done"] + [data-status="in-progress"]::before {
content: "";
display: inline-block;
height: 1.25rem;
.project-step[data-status="in-progress"]:first-child::before {
content: "étapes à venir";
font-size: var(--text-sm);
font-weight: 500;
width: 8rem;
position: absolute;
right: 3.75rem;
text-align: center;
color: var(--color-grey-500);
background: var(--color-white);
bottom: -2rem;
left: calc(100% + var(--gap));
transform: translate(-50%, -0.2em);
z-index: 10;
}
.project-step[data-status="in-progress"]:only-child::before,
.project-step[data-status="done"] + [data-status="in-progress"]::before {
/* dotted line */
.project-step[data-status="in-progress"]::after,
.project-step:last-child::before {
content: "";
display: block;
height: 1rem;
background-repeat: repeat;
background-position: left center;
position: absolute;
background-repeat: repeat-x;
background-position: right center;
background-image: 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%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
background-size: 0.75rem;
left: 5.5rem;
right: 5.5rem;
left: calc(50% + 1.875rem);
right: calc(var(--gap) / -2);
bottom: -1.875rem;
}
.project-step[data-status="in-progress"]:only-child::after {
--icon-size: 1.25rem;
width: var(--icon-size);
background: var(--color-grey-300);
mask-repeat: no-repeat;
mask-position: center;
mask-size: var(--icon-size);
mask-image: var(--icon-point);
right: 3.75rem;
bottom: -2rem;
.project-step:last-child::before {
left: calc(var(--gap) / -2);
right: 6.75rem;
background-position: left center;
}
/* solid line */
.project-step[data-status="done"]:not(:first-child)::before,
.project-step[data-status="in-progress"]:not(:first-child)::before,
.project-step[data-status="done"]::after {
content: '';
display: block;
height: 4px;
background: var(--color-primary-10);
position: absolute;
bottom: -1.5rem;
}
.project-step[data-status="done"]:not(:first-child)::before,
.project-step[data-status="in-progress"]:not(:first-child)::before {
border-radius: 0 2px 2px 0;
left: calc(var(--gap) / -2);
right: calc(50% + 1.875rem);
}
.project-step[data-status="done"]::after {
border-radius: 2px 0 0 2px;
right: calc(var(--gap) / -2);
left: calc(50% + 1.875rem);
}
.project-step:first-child::after {
left: 5.5rem;
}
/* Hide all steps between in-progress and last step */
.project-step[data-status="in-progress"] ~ .project-step:not(:last-child) {
display: none;
}
.project-step .pill {
border-radius: var(--rounded-md);
padding-inline: var(--space-12);
}
.project-step .pill::after {
content: "";
display: inline-block;
@ -156,10 +182,14 @@ const { stepsLabels, setStatus } = useProjectStore();
.project-step[data-status="done"] > .pill,
.project-step[data-status="uncompleted"] > .pill {
--background: transparent;
color: transparent;
}
.project-step[data-status="done"] .pill::after {
mask-image: var(--icon-check-3);
}
/*.project-step[data-status="done"]:first-child .pill::after {
left: calc(50% + .625rem);
}*/
.project-step[data-status="in-progress"] .pill::after {
mask-image: var(--icon-point-active);
}
@ -167,4 +197,20 @@ const { stepsLabels, setStatus } = useProjectStore();
--icon: var(--icon-point);
--icon-color: var(--color-grey-300);
}
.project-step .pill > span {
margin-top: -.1em;
}
/* in-progress vertical stroke */
.project-step[data-status="in-progress"] .pill > span::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 1.5rem;
background: var(--color-primary-10);
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
}
</style>