From d5df45cb55fe2b215202d2afee436ebff0a8f20a Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 21 Nov 2024 17:53:00 +0100
Subject: [PATCH] Fix project-steps style

---
 src/assets/css/src/0.2.variables.css |   1 +
 src/components/project/Project.vue   | 132 ++++++++++++++++++---------
 2 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index e7f1cba..42c02ae 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -20,6 +20,7 @@
   --color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */
   --color-grey-300: hsla(0, 0%, 74%, 1);
   --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
+  --color-grey-500: hsla(180, 1%, 51%, 1);
   --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
   --color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */
   --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */
diff --git a/src/components/project/Project.vue b/src/components/project/Project.vue
index 68da184..809e5f1 100644
--- a/src/components/project/Project.vue
+++ b/src/components/project/Project.vue
@@ -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>