feat: kanban style (#26538)

* fix(Kanban): hide sidebar toggle

* fix(Kanban): toggle full-width if more than five columns are visible

* fix(Kanban): show correct cursor on column header

* fix(Kanban): increase column height, add margin

* fix(Kanban): increase card padding

* feat(Kanban): set column background based on indicator

* fix(Kanban): add-button background color

* feat(Kanban): grow columns if there's leftover space

* fix(Kanban): space between columns

(cherry picked from commit 551a520)

frappe/public/js/frappe/views/kanban/kanban_column.html

@@ -1,4 +1,4 @@
-<div class="kanban-column" data-column-value="{{title}}">
+<div class="kanban-column" data-column-value="{{title}}" style="background-color: var(--bg-{{indicator}});">
 	<div class="kanban-column-header">
 		<span class="kanban-column-title">
 			<span class="indicator-pill {{indicator}}"></span>

frappe/public/js/frappe/views/kanban/kanban_view.js

@@ -136,10 +136,13 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
 		this.hide_card_layout = true;
 		this.hide_sort_selector = true;
 		super.setup_page();
+
+		this.page.disable_sidebar_toggle = true;
+		this.page.setup_sidebar_toggle();
 	}
 
 	setup_view() {
-		if (this.board.columns.length > 5) {
+		if (this.board.columns.filter((col) => col.status !== "Archived").length > 5) {
 			this.page.container.addClass("full-width");
 		}
 		this.setup_realtime_updates();

frappe/public/scss/desk/kanban.scss

@@ -15,6 +15,7 @@
 
 .kanban {
 	display: flex;
+	gap: 0.5em;
 	overflow-y: hidden;
 
 	-ms-overflow-style: none; /* IE and Edge */
@@ -27,19 +28,17 @@
 	.kanban-column {
 		@include transition();
 
-		flex: 0 0 260px;
-		max-width: 260px;
+		flex: 1 0 260px;
 		border-radius: var(--border-radius);
 		padding: var(--padding-md);
-		min-height: calc(100vh - 250px);
-		max-height: calc(100vh - var(--navbar-height) - var(--page-bottom-margin) - 80px);
+		min-height: calc(100vh - 150px);
 
 		.add-card {
 			@include flex(flex, center, center, null);
 			@include transition();
 
 			color: var(--text-light);
-			background-color: var(--kanban-new-card-bg);
+			background-color: var(--bg-color);
 			height: 27px;
 			font-size: var(--text-md);
 			margin-bottom: var(--margin-sm);
@@ -105,10 +104,6 @@
 					margin: 0;
 				}
 			}
-
-			&:hover {
-				cursor: pointer;
-			}
 		}
 
 		.kanban-column-title {
@@ -123,6 +118,7 @@
 			.kanban-title {
 				@include get_textstyle("lg", "semibold");
 				margin-left: var(--margin-sm);
+				cursor: grab;
 			}
 		}
 
@@ -182,7 +178,7 @@
 
 					.kanban-card-body {
 						cursor: grab;
-						padding: var(--padding-sm);
+						padding: var(--padding-md);
 
 						.kanban-title-area {
 							margin-bottom: 12px;