From 1fc6b860fc2dcfbec1daecf8ae412f16c0e31d26 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Sat, 18 Jul 2020 12:42:54 +0530 Subject: [PATCH] feat: Card Layout - Form sections will now be cards --- frappe/core/doctype/user/user.json | 18 +----------------- frappe/public/js/frappe/ui/page.html | 9 +++------ frappe/public/js/frappe/ui/page.js | 4 ++-- frappe/public/scss/desktop.scss | 4 ++-- frappe/public/scss/form.scss | 13 ++++++------- frappe/public/scss/global.scss | 5 +++++ frappe/public/scss/list.scss | 1 + frappe/public/scss/page.scss | 25 +++++++++++++++++-------- frappe/public/scss/sidebar.scss | 1 - frappe/public/scss/variables.scss | 2 ++ 10 files changed, 39 insertions(+), 43 deletions(-) diff --git a/frappe/core/doctype/user/user.json b/frappe/core/doctype/user/user.json index 890b1de861..c4e5166ce2 100644 --- a/frappe/core/doctype/user/user.json +++ b/frappe/core/doctype/user/user.json @@ -24,9 +24,6 @@ "user_image", "sb1", "role_profile_name", - "column_break_18", - "column_break_19", - "section_break_20", "roles_html", "roles", "short_bio", @@ -598,19 +595,6 @@ { "fieldname": "section_break_63", "fieldtype": "Column Break" - }, - { - "fieldname": "column_break_18", - "fieldtype": "Column Break" - }, - { - "fieldname": "column_break_19", - "fieldtype": "Column Break" - }, - { - "fieldname": "section_break_20", - "fieldtype": "Section Break", - "hide_border": 1 } ], "icon": "fa fa-user", @@ -618,7 +602,7 @@ "image_field": "user_image", "links": [], "max_attachments": 5, - "modified": "2020-06-23 07:49:33.387721", + "modified": "2020-07-18 02:31:18.550537", "modified_by": "Administrator", "module": "Core", "name": "User", diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index 0270e6b62b..08aa38750d 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -1,6 +1,6 @@
-
+
@@ -11,12 +11,9 @@
- - - - -
+
+
`).appendTo(this.icon_group.removeClass("hide")).click(click); diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss index e517b44ebf..fba868d9e5 100644 --- a/frappe/public/scss/desktop.scss +++ b/frappe/public/scss/desktop.scss @@ -134,9 +134,10 @@ $panel-bg: $gray-50; padding: 15px; border-radius: var(--border-radius-md); height: 100%; + box-shadow: var(--card-shadow); + background-color: white; &.widget-shadow { - box-shadow: $card-box-shadow; &:hover { box-shadow: 0px 2px 8px rgba(17, 43, 66, 0.1), 0px 3px 12px rgba(17, 43, 66, 0.08); } @@ -371,7 +372,6 @@ $panel-bg: $gray-50; } &.links-widget-box { - padding-left: 0px; .link-item { display: block; text-decoration: none; diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss index 424f82520a..cd23d74292 100644 --- a/frappe/public/scss/form.scss +++ b/frappe/public/scss/form.scss @@ -16,22 +16,21 @@ $form-left-padding: $padding-xl; } .form-section { - margin: 0px; - // padding: 15px; + margin: $margin-lg 0px; + border-radius: var(--border-radius-md); + box-shadow: var(--card-shadow); + padding: $padding-sm; + background: white; .form-section-description { margin-bottom: 10px; } .section-head { - // margin: 0px 0px 15px 15px; - position: sticky; - top: calc(#{$navbar-height} + #{$page-head-height}); background: $white; z-index: 1; width: 100%; padding: $padding-md; - padding-left: 0px; margin: 0; font-size: var(--text-lg); font-weight: 500; @@ -67,7 +66,7 @@ $form-left-padding: $padding-xl; } .form-inner-toolbar { - padding-top: $padding-sm; + padding-top: $padding-md; padding-left: $form-left-padding; text-align: right; } diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 40db553381..39a613057b 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -87,6 +87,7 @@ img { .btn { border: none; border-radius: $border-radius; + box-shadow: var(--card-shadow); } .btn-secondary-dark { @@ -130,6 +131,10 @@ img { color: var(--grey-800); } +.btn-default { + background-color: white; +} + .btn-primary { background: $brand-gradient; } diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss index cf45dd89ad..f5264773bf 100644 --- a/frappe/public/scss/list.scss +++ b/frappe/public/scss/list.scss @@ -1,4 +1,5 @@ .frappe-list { + background-color: white; .result, .no-result, .freeze { min-height: #{"calc(100vh - 284px)"}; } diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss index 88f875ffb3..f70502c4cb 100644 --- a/frappe/public/scss/page.scss +++ b/frappe/public/scss/page.scss @@ -6,15 +6,25 @@ margin-bottom: 0px; } +.page-container { + background-color: var(--grey-50); +} + +.custom-actions { + display: flex; +} + .page-actions { align-items: center; .btn { height: 28px; min-width: 28px; - padding: 0px; margin-left: 10px; border-radius: var(--border-radius); } + .icon-btn { + padding: 0; + } .btn-primary, .btn-secondary { padding: 4px 20px; font-size: var(--text-md); @@ -44,15 +54,14 @@ margin-bottom: 60px; } -.layout-main-section { - // border-left: 1px solid $border-color; - // padding-left: 30px; -} +// .layout-main-section { +// background-color: white; +// border-radius: var(--border-radius-md); +// box-shadow: var(--card-shadow); +// overflow: hidden; +// } .page-head { - position: sticky; - top: $navbar-height; - background-color: $white; z-index: 2; .page-head-content { height: $page-head-height; diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss index d3769d951d..00769fbcab 100644 --- a/frappe/public/scss/sidebar.scss +++ b/frappe/public/scss/sidebar.scss @@ -40,7 +40,6 @@ body[data-route^="Module"] .main-menu { .layout-side-section { font-size: var(--text-md); padding-right: 30px; - border-right: 1px solid $border-color; > .divider { display: none !important; diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index 73978a9c31..0fc5191f2d 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -146,6 +146,8 @@ $light: $gray-50 !default; --grey-2-200: #CDD2D7; --grey-2-100: #ECEEF0; --grey-2-50: #F4F5F6; + + --card-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.75), 0px 1px 2px rgba(0, 0, 0, 0.13); } html, body {