From d25ae8cfada0b7bf0f6e4b5e796ffc0e2c248d30 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 9 Sep 2020 15:03:07 +0530
Subject: [PATCH] fix: Split form dashboard sections

---
 frappe/public/js/frappe/form/layout.js        |  5 ++---
 .../frappe/form/templates/form_dashboard.html |  7 ++++++-
 frappe/public/scss/form.scss                  | 19 ++++++-------------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js
index 505cbd172f..1afc346502 100644
--- a/frappe/public/js/frappe/form/layout.js
+++ b/frappe/public/js/frappe/form/layout.js
@@ -110,7 +110,6 @@ frappe.ui.form.Layout = Class.extend({
 		this.fields.unshift({
 			fieldtype: 'Section Break',
 			fieldname: '_form_dashboard',
-			label: __('Overview'),
 			cssClass: 'form-dashboard',
 			collapsible: 1,
 			//hidden: 1
@@ -576,8 +575,8 @@ frappe.ui.form.Section = Class.extend({
 		if(!this.layout.page) {
 			this.layout.page = $('<div class="form-page"></div>').appendTo(this.layout.wrapper);
 		}
-
-		this.wrapper = $(`<div class="row form-section ${this.layout.card_layout ? "card-section" : "" }">`)
+		let make_card = this.layout.card_layout && this.df.fieldname !== '_form_dashboard';
+		this.wrapper = $(`<div class="row form-section ${ make_card ? "card-section" : "" }">`)
 			.appendTo(this.layout.page);
 		this.layout.sections.push(this);
 
diff --git a/frappe/public/js/frappe/form/templates/form_dashboard.html b/frappe/public/js/frappe/form/templates/form_dashboard.html
index 110cff3a7c..bc333e50b2 100644
--- a/frappe/public/js/frappe/form/templates/form_dashboard.html
+++ b/frappe/public/js/frappe/form/templates/form_dashboard.html
@@ -2,14 +2,19 @@
 	<div class="progress-area hidden form-dashboard-section">
 	</div>
 	<div class="form-heatmap hidden form-dashboard-section">
+		<div class="section-head">{{ __("Overview") }}</div>
 		<div id="heatmap-{{ frappe.model.scrub(frm.doctype) }}" class="heatmap"></div>
 		<div class="text-muted small heatmap-message hidden"></div>
 	</div>
-	<div class="form-graph form-dashboard-section hidden"></div>
+	<div class="form-graph form-dashboard-section hidden">
+		<div class="section-head">{{ __("Graph") }}</div>
+	</div>
 	<div class="form-stats form-dashboard-section hidden">
+		<div class="section-head">{{ __("Stats") }}</div>
 		<div class="row"></div>
 	</div>
 	<div class="form-links form-dashboard-section hidden">
+		<div class="section-head">{{ __("Documents") }}</div>
 		<div class="transactions"></div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss
index 846a687282..8708af8262 100644
--- a/frappe/public/scss/form.scss
+++ b/frappe/public/scss/form.scss
@@ -75,27 +75,20 @@
 	}
 }
 
-.form-section.card-section {
+.form-section.card-section, .form-dashboard-section {
 	margin-bottom: var(--margin-lg);
 	@extend .frappe-card;
 }
 
-
 .form-dashboard {
 	.section-head {
-		font-size: var(--text-xl);
+		padding-left: 0;
+		padding-right: 0;
 	}
 	.form-dashboard-section {
-		padding: var(--padding-md);
-		border-bottom: 1px solid var(--border-color);
-	}
-
-	.form-dashboard-section:first-child {
-		padding-top: 0px;
-	}
-
-	.form-dashboard-section:last-child {
-		border-bottom: none;
+		padding-left: calc(var(--padding-lg) + var(--padding-xs));
+		padding-right: calc(var(--padding-lg) + var(--padding-xs));
+		padding-bottom: var(--padding-lg);
 	}
 }