fix: improvements

src/bar.js

@@ -58,7 +58,7 @@ export default class Bar {
         this.compute_duration();
         this.corner_radius = this.gantt.options.bar_corner_radius;
         this.width = this.gantt.config.column_width * this.duration;
-        if (this.task.progress < 0) this.task.progress = 0;
+        if (!this.task.progress || this.task.progress < 0) this.task.progress = 0;
         if (this.task.progress > 100) this.task.progress = 100;
     }
 
@@ -111,11 +111,7 @@ export default class Bar {
             height: this.height,
             rx: this.corner_radius,
             ry: this.corner_radius,
-            class:
+            class: 'bar',
-                'bar' +
-                (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-                    ? ' safari'
-                    : ''),
             append_to: this.bar_group,
         });
         if (this.task.color) this.$bar.style.fill = this.task.color;
@@ -150,13 +146,16 @@ export default class Bar {
     draw_progress_bar() {
         if (this.invalid) return;
         this.progress_width = this.calculate_progress_width();
+        let r = this.corner_radius;
+        if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+            r = this.corner_radius + 2;
         this.$bar_progress = createSVG('rect', {
             x: this.x,
             y: this.y,
             width: this.progress_width,
             height: this.height,
-            rx: this.corner_radius + 2,
+            rx: r,
-            ry: this.corner_radius + 2,
+            ry: r,
             class: 'bar-progress',
             append_to: this.bar_group,
         });

src/index.js

@@ -846,7 +846,7 @@ export default class Gantt {
                 last_date,
                 this.options.language,
             ),
-            upper_y: 15,
+            upper_y: 17,
             lower_y: this.options.upper_header_height + 5,
         };
     }
@@ -1335,7 +1335,6 @@ export default class Gantt {
 
     bind_bar_progress() {
         let x_on_start = 0;
-        let y_on_start = 0;
         let is_resizing = null;
         let bar = null;
         let $bar_progress = null;

src/styles/gantt.css

@@ -75,6 +75,7 @@
         position: sticky;
         top: 0;
         left: 0;
+        border-bottom: 1px solid var(--g-row-border-color);
         z-index: 1000;
     }
 
@@ -106,7 +107,7 @@
         position: absolute;
         width: fit-content;
         font-weight: 500;
-        font-size: 16px;
+        font-size: 14px;
         color: var(--g-text-dark);
         height: calc(var(--gv-lower-header-height) * 0.66);
     }
@@ -114,13 +115,13 @@
     & .current-upper {
         position: sticky;
         left: 0 !important;
-        padding: 0 calc(var(--gv-lower-header-height) * 0.33);
+        padding-left: 17px;
         background: white;
     }
 
     & .side-header {
         position: sticky;
-        top: 5px;
+        top: 0;
         right: 0;
         float: right;
 
@@ -129,9 +130,10 @@
         font-weight: 400;
         width: max-content;
         margin-left: auto;
-        padding-right: 5px;
+        padding-right: 10px;
-        padding-top: 5px;
+        padding-top: 10px;
         background: var(--g-header-background);
+        display: flex;
     }
 
     & .side-header * {
@@ -140,18 +142,16 @@
         transition-duration: 150ms;
         background-color: var(--g-actions-background);
         text-align: -webkit-center;
-        text-align: center;
-        height: 1.75rem;
         border-radius: 0.5rem;
         border: none;
-        padding: 0 0.5rem;
+        padding: 5px 8px;
         color: var(--g-text-dark);
-        position: sticky;
-        margin: 5px;
         font-size: 14px;
-        line-height: 1.15;
         letter-spacing: 0.02em;
         font-weight: 420;
+        box-sizing: content-box;
+
+        margin-right: 5px;
 
         &:last-child {
             margin-right: 0;
@@ -163,9 +163,8 @@
     }
 
     & .side-header select {
-        padding: 0;
+        padding-right: 1.25rem;
-        padding-right: 1rem;
+        width: 50px;
-        width: 85px;
     }
 
     & .date-range-highlight {
@@ -324,7 +323,7 @@
             cursor: pointer;
 
         & .bar {
-            outline: 1px solid black;
+            outline: 1px solid var(--g-row-border-color);
             border-radius: 3px;
         }
 

src/styles/light.css

@@ -1,9 +1,9 @@
 :root {
-    --g-arrow-color: #575654;
+    --g-arrow-color: #1f2937;
     --g-bar-color: #fff;
     --g-bar-border: #fff;
-    --g-tick-color-thick: #e0e0e0;
+    --g-tick-color-thick: #ededed;
-    --g-tick-color: #ebeef0;
+    --g-tick-color: #f3f3f3;
     --g-actions-background: #f3f3f3;
     --g-border-color: #ebeff2;
     --g-text-muted: #7c7c7c;
@@ -15,6 +15,7 @@
     --g-expected-progress: #c4c4e9;
     --g-header-background: #fff;
     --g-row-color: #fdfdfd;
+    --g-row-border-color: #c7c7c7;
     --g-today-highlight: #37352f;
     --g-popup-actions: #ebeff2;
     --g-weekend-highlight-color: #f7f7f7;