fix: Fix Editing progress look and feel - refs #253798

eea · Jun 6, 2023 · df63921 · df63921
1 parent 3398466
commit df63921
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/ProgressWorkflow.jsx b/src/ProgressWorkflow.jsx
@@ -227,7 +227,7 @@ const ProgressWorkflow = (props) => {
               >
                 {`${currentState.done}%`}
               </button>
-              <div className={`sidenav-ol is-hidden`}>
+              <div className={`sidenav-ol sidenav-ol--wp is-hidden`}>
                 <ol
                   className="progress-reversed"
                   style={{

diff --git a/src/less/editor.less b/src/less/editor.less
@@ -4,6 +4,11 @@
 @border-color: rgba(0, 0, 0, 0.3);
 @progress-indicator-color: #607d8b;
 @progress-green: darkseagreen;
+@progress-circle-diameter: 26px;
+@progress-spacing: 20px;
+@progress-padding: @progress-circle-diameter + 2 * @progress-spacing;
+@progress-sidebar-width: 200px;
+@progress-sidebar-left: 80px;
 
 .circle-right-btn {
   display: inline-block !important;
@@ -24,12 +29,15 @@
   position: fixed;
   z-index: 1;
   top: 0;
-  left: 80px;
-  width: 200px;
   padding: 8px 0;
   background: #fff;
   box-shadow: 0 1px 2px 0 #c7d5d8;
   overflow-x: hidden;
+
+  &.sidenav-ol--wp {
+    left: @progress-sidebar-left;
+    width: @progress-sidebar-width;
+  }
 }
 
 .is-hidden {
@@ -52,7 +60,7 @@
 
 .progress-reversed {
   position: relative;
-  padding: 0 1rem 0 3.5rem;
+  padding: 0 1rem 0 @progress-padding;
   margin: 2rem 0 0;
   counter-reset: item;
   list-style: none;
@@ -82,33 +90,32 @@
 .progress__item {
   position: relative;
   min-height: 75px;
-  padding-left: 0.5rem;
   counter-increment: item -1;
 
   &:before {
     position: absolute;
-    top: 26px;
-    left: -1.6rem;
+    top: @progress-circle-diameter;
+    left: -@progress-padding / 2 - 1px;
     width: 1px;
-    height: calc(100% - 26px);
+    height: calc(100% - @progress-circle-diameter);
     border-left: 1px solid @progress-indicator-color;
     content: '';
   }
 
   &:after {
     position: absolute;
     top: 0;
-    left: -2.5rem;
-    width: 26px;
-    height: 26px;
+    left: -@progress-circle-diameter - @progress-spacing;
+    width: @progress-circle-diameter;
+    height: @progress-circle-diameter;
     border: 1px solid @progress-indicator-color;
     background: white;
     border-radius: 50%;
     color: #000;
     content: ' ';
     font-size: 13px;
     font-weight: 400;
-    line-height: 22px;
+    line-height: @progress-circle-diameter + 2px;
     text-align: center;
   }