diff --git a/index.html b/index.html index 3df3915..3d20029 100644 --- a/index.html +++ b/index.html @@ -3,57 +3,280 @@ Simple Gantt + + -
-

- Interactive Gantt Chart entirely made in SVG! -

-
-

Control edit access with ease

-

Allow your employees to change only what they need to.

- - - +

Frappe Gantt

+
+
+
+

Set edit access

+

+ Easy make sure your employees change only what + they need to. +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+

Versatile Actions

+

+ Change the view mode, or scroll to today, or add + anything you like β. +

+
+ + +
+
+ + +
+
-
-

Versatile sidebar

-

Change the view mode or scroll to today with you.

- - -
-
-

Mark holidays

-

- Be it public holidays, company milestones, or just weekends, - Frappe Gantt enables you to see it all. -

- +
+
+

Mark Holidays

+

+ Be it public holidays, company milestones, or just + weekends, you can see it all. +

+
+ + +
+
+
-
-

...or ignore them

-

- Remove specific dates from your Gantt chart - it's now - completely ignored. -

- +
+
+

...or ignore them

+

+ Remove time periods from your Gantt - they're now + completely ignored. +

+
+ + +
+
+
+
+
+
+
+

Control the styles completely.

+ Modify Grid +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ Modify Bar +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
-
+
+ diff --git a/src/bar.js b/src/bar.js index 8a21b37..72a08eb 100644 --- a/src/bar.js +++ b/src/bar.js @@ -273,8 +273,8 @@ export default class Bar { y: bar.getY() + 1, width: handle_width, height: this.height - 2, - rx: this.corner_radius, - ry: this.corner_radius, + rx: 3, + ry: 3, class: 'handle right', append_to: this.handle_group, }); @@ -284,8 +284,8 @@ export default class Bar { y: bar.getY() + 1, width: handle_width, height: this.height - 2, - rx: this.corner_radius, - ry: this.corner_radius, + rx: 3, + ry: 3, class: 'handle left', append_to: this.handle_group, }); diff --git a/src/defaults.js b/src/defaults.js index b54ebb1..11963b4 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -100,7 +100,7 @@ const DEFAULT_OPTIONS = { bar_corner_radius: 3, bar_height: 30, container_height: 300, - column_width: 30, + column_width: null, date_format: 'YYYY-MM-DD', snap_at: null, infinite_padding: true, diff --git a/src/gantt.css b/src/gantt.css index fad2c83..2fc0929 100644 --- a/src/gantt.css +++ b/src/gantt.css @@ -67,7 +67,7 @@ position: sticky; top: 0; left: 0; - z-index: 10; + z-index: 1000; } & .lower-text, @@ -153,7 +153,7 @@ position: absolute; background: var(--dark-blue); width: 1px; - z-index: 1000; + z-index: 999; } & .current-date-highlight { @@ -300,8 +300,8 @@ } & .bar { - -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); - filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16)); + -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.9)); + filter: drop-shadow(3px 3px 2px rgba(17, 43, 66, 0.26)); border-radius: 3px; } diff --git a/src/index.js b/src/index.js index 5bc7ed9..74634e6 100644 --- a/src/index.js +++ b/src/index.js @@ -223,7 +223,7 @@ export default class Gantt { this.config.step = duration; this.config.unit = scale; this.config.column_width = - mode.column_width || this.options.column_width; + this.options.column_width || mode.column_width || 30; } setup_dates() { @@ -282,12 +282,6 @@ export default class Gantt { this.config.unit, ); } - console.log( - gantt_start, - gantt_end, - this.config.extend_by_units * 3, - this.config.unit, - ); let format_string = this.config.view_mode.format_string || 'YYYY-MM-DD HH'; @@ -661,7 +655,8 @@ export default class Gantt { classes: 'current-highlight', append_to: this.$extras, }); - let $today = this.$extras.querySelector( + + let $today = this.$container.querySelector( '.date_' + date.replaceAll(' ', '_'), ); if ($today) { @@ -905,7 +900,7 @@ export default class Gantt { const scroll_pos = (units_since_first_task / this.config.step) * this.config.column_width; - parent_element.scrollTo({ left: scroll_pos - 2, behavior: 'smooth' }); + parent_element.scrollTo({ left: scroll_pos - 4, behavior: 'smooth' }); this.$side_header.style.left = this.$container.clientWidth + @@ -947,15 +942,8 @@ export default class Gantt { scroll_today() { const today = new Date(); - this.set_scroll_position( - new Date( - today.getFullYear() + - '-' + - (today.getMonth() + 1) + - '-' + - today.getDate(), - ), - ); + today.setHours(0, 0, 0, 0); + this.set_scroll_position(today); } bind_grid_click() {