improve ui&ux

src/assets/css/custom.css

@@ -19,10 +19,10 @@ body.loading .loading-overlay{
 }
 
 .container-header {
-    background-color: #3DB9D3;
+    background-color: #3DB9D380;
     width: 100%;
     box-sizing: border-box;
-    padding: 5px;
+    padding: 2px;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/function/function.js

@@ -124,7 +124,7 @@ function initializationProject(){
 			success: function (result) {
 				let data = result.data;
 				let projectName = data.nama;
-                $("#project-name-header").html(projectName);
+				// $("#project-name-header").html(projectName);
 			},
 			error: function (data) {
 				actionHappen = false;

src/function/ganttConfig.js

@@ -258,14 +258,14 @@ var allColumns = [
 	{ name: "start_date", label: "Start Date", align: "center", min_width: 80, editor: editor.start_date, resize: true },
 	{ name: "end_date", label: "Finish Date", align: "center", min_width: 80, editor: editor.end_date, resize: true },
 	{ name: "duration", label: "Duration", align: "center", min_width: 50, editor: editor.duration, resize: true },
-    { name: "rencana_biaya", label: "Cost Planning", align: "center", min_width: 100, editor: costPlanningEditor, resize: true, template: function (text) {
+	{ name: "rencana_biaya", label: "Cost Planning", align: "center", min_width: 100, resize: true, template: function (text) {
 		if(!text.rencana_biaya){
 			return
 		}
 		let rencana_biaya = text.rencana_biaya
 		return "Rp. "+ formatRupiah(rencana_biaya)
 	} },
-    { name: "cost_actual", label: "Cost Actual", align: "center", min_width: 100, editor: editor.costActual, resize: true, template: function (text) {
+	{ name: "cost_actual", label: "Cost Actual", align: "center", min_width: 100, resize: true, template: function (text) {
 		if(!text.biaya_actual){
 			return
 		}
@@ -497,6 +497,9 @@ gantt.attachEvent("onTaskLoading", function(task){
 	return true;
 });
 
+
+gantt.config.autoscroll = true;
+gantt.config.scroll_size = 30;
 gantt.config.layout = {
 	css: "gantt_container",
 	cols: [
@@ -508,17 +511,17 @@ gantt.config.layout = {
 				{ view: "scrollbar", id: "gridScroll", group: "horizontal" }
 			]
 		},
-        { resizer: true, width: 1 },
+		{ resizer: true, width: 3 },
 		{
 			rows: [
-                { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
+				{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer", scrollable: true},
 				{ view: "scrollbar", id: "scrollHor", group: "horizontal" }
 			]
 		},
-        { view: "scrollbar", id: "scrollVer" }
 	]
 };
 
+
 // custom folder, file, collapse icons on activity
 gantt.templates.grid_folder = function (item) {
 	// return "<div class='gantt_tree_icon gantt_folder_" + (item.$open ? "open" : "closed") + "'></div>";
@@ -637,8 +640,6 @@ for (var i = 0; i < radios.length; i++) {
 }
 // end Zoom Scale function
 
-gantt.config.scroll_size = 100;
-
 // gantt initialization
 $(document).ready(function () {
 	initializationProject();