KAAV-1473 range indicator line between range and point vis elements

City-of-Helsinki · Jun 26, 2024 · d70b8c7 · d70b8c7
1 parent b691926
commit d70b8c7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/components/ProjectTimeline/VisTimeline.scss b/src/components/ProjectTimeline/VisTimeline.scss
@@ -87,8 +87,8 @@
     .board{
         //Makes range item apper to be two single items
         .vis-item-overflow{
-            height: $size5;
-            border-top: $size4 solid rgba(0, 0, 0, .95);
+            height: $size4;
+            border-top: 0.2rem solid rgba(0, 0, 0, .95);
             color: #fff;
             background-color: #fff;
             width: 100%;
@@ -98,26 +98,26 @@
             }
         }
         .vis-drag-left{
-            height: $size18 !important;
-            width: $size18 !important;
+            height: $size24 !important;
+            width: $size24 !important;
             background-color:#f2f2f2;
             border-radius: 50%;
-            top: -8px !important;
+            top: -11px !important;
             display: inline-block;
             border: $size1 solid #1a1a1a;
-            border-radius: 8px;
+            border-radius: 14px;
             padding: 5px;
             background-color: #fff;
         }
         .vis-drag-right{
-            height: $size18 !important;
-            width: $size18 !important;
+            height: 1.3rem !important;
+            width: 1.3rem !important;
             background-color:#f2f2f2;
             border-radius: 50%;
-            top: -8px !important;
+            top: -10px !important;
             display: inline-block;
             border: $size1 solid #fff;
-            border-radius: 8px;
+            border-radius: 14px;
             padding: 5px;
             background-color: #1a1a1a;
             box-shadow: 0 0 0 2px #1a1a1a;
@@ -151,6 +151,14 @@
         box-shadow: 0 0 0 2px #1a1a1a;
     }
 
+    .divider{
+        position: absolute;
+        background-color: #1a1a1a;
+        border-color: #1a1a1a;
+        height: 4px;
+        top: 22px !important;
+    }
+
     .vis-dot{
         position: absolute;
         padding: 0px;
@@ -164,6 +172,10 @@
         width: 24px;
     }
 
+    .vis-range{
+        border-color: #1a1a1a;
+    }
+
     .locked{
         background-color: rgba(255, 0, 0, 0.2);
     }

diff --git a/src/components/project/EditProjectTimetableModal/index.js b/src/components/project/EditProjectTimetableModal/index.js
@@ -230,6 +230,18 @@ class EditProjectTimeTableModal extends Component {
         locked: false,
         type: 'point'
       });
+      phaseData.push({
+        start: milestone,
+        end: dashStart,
+        id: numberOfPhases + " divider",
+        content: "",
+        className: "divider",
+        title: "divider",
+        phaseID: deadlines[i].deadline.phase_id,
+        phase: false,
+        group: numberOfPhases,
+        locked: false,
+      });
       phaseData.push({
         start: dashStart,
         end: dashEnd,