fix: Split form dashboard sections

This commit is contained in:
Suraj Shetty 2020-09-09 15:03:07 +05:30
parent d17b6d0b42
commit d25ae8cfad
3 changed files with 14 additions and 17 deletions

View file

@ -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);

View file

@ -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>

View file

@ -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);
}
}