feat: Card Layout
- Form sections will now be cards
This commit is contained in:
Suraj Shetty
parent
6158e204cf
commit
1fc6b860fc
10 changed files with 39 additions and 43 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="page-head flex">
|
||||
<div class="container">
|
||||
<div class="row flex align-center border-bottom page-head-content">
|
||||
<div class="row flex align-center page-head-content">
|
||||
<div class="col-md-5 col-sm-8 col-xs-6 page-title">
|
||||
<!-- <div class="title-image hide hidden-md hidden-lg"></div> -->
|
||||
<!-- title -->
|
||||
|
|
@ -11,12 +11,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex col-md-7 col-sm-4 col-xs-6 page-actions justify-content-lg-end">
|
||||
<!-- ID and icon buttons -->
|
||||
<!-- <span class="checked-items-status text-ellipsis text-muted small hide hidden-xs hidden-sm" style="margin-right: 20px;">## items selected</span> -->
|
||||
<!-- <h6 class="ellipsis sub-heading hide text-muted"></h6> -->
|
||||
<span class="page-icon-group hide hidden-xs hidden-sm"></span>
|
||||
<div class="custom-actions hide"></div>
|
||||
<!-- buttons -->
|
||||
<div class="custom-actions hide"></div>
|
||||
<span class="page-icon-group hide hidden-xs hidden-sm"></span>
|
||||
<div class="menu-btn-group hide">
|
||||
<button type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="hidden-xs">
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ frappe.ui.Page = Class.extend({
|
|||
this.custom_actions = this.page_actions.find(".custom-actions");
|
||||
|
||||
this.page_form = $('<div class="page-form row hide"></div>').prependTo(this.main);
|
||||
this.inner_toolbar = $('<div class="form-inner-toolbar hide"></div>').prependTo(this.main);
|
||||
this.inner_toolbar = this.custom_actions;
|
||||
this.icon_group = this.page_actions.find(".page-icon-group");
|
||||
|
||||
if(this.make_page) {
|
||||
|
|
@ -143,7 +143,7 @@ frappe.ui.Page = Class.extend({
|
|||
|
||||
add_action_icon: function(icon, click, css_class='') {
|
||||
return $(`
|
||||
<button class="text-muted btn btn-default ${css_class}">
|
||||
<button class="text-muted btn btn-default ${css_class} icon-btn">
|
||||
${frappe.utils.icon(icon)}
|
||||
</button>
|
||||
`).appendTo(this.icon_group.removeClass("hide")).click(click);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.frappe-list {
|
||||
background-color: white;
|
||||
.result, .no-result, .freeze {
|
||||
min-height: #{"calc(100vh - 284px)"};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue