[design] offcanvas sidebar for lists and forms
This commit is contained in:
Anand Doshi
parent
532fb936a9
commit
00a3e03e51
39 changed files with 736 additions and 471 deletions
|
|
@ -36,6 +36,7 @@
|
|||
"public/css/indicator.css",
|
||||
"public/css/avatar.css",
|
||||
"public/css/navbar.css",
|
||||
"public/css/sidebar.css",
|
||||
"public/css/page.css",
|
||||
"public/css/form.css",
|
||||
"public/css/form_grid.css",
|
||||
|
|
@ -134,6 +135,7 @@
|
|||
"public/js/frappe/list/doclistview.js",
|
||||
"public/js/frappe/list/list_sidebar.js",
|
||||
"public/js/frappe/list/list_sidebar.html",
|
||||
"public/js/frappe/list/list_sidebar_stat.html",
|
||||
"public/js/frappe/list/list_item_main.html",
|
||||
"public/js/frappe/list/list_item_row.html",
|
||||
"public/js/frappe/list/list_item_main_head.html",
|
||||
|
|
@ -149,7 +151,7 @@
|
|||
"public/js/frappe/ui/toolbar/bookmarks.js",
|
||||
"public/js/frappe/ui/toolbar/about.js",
|
||||
"public/js/frappe/ui/toolbar/navbar.html",
|
||||
"public/js/frappe/ui/toolbar/left_sidebar.html",
|
||||
"public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html",
|
||||
"public/js/frappe/ui/toolbar/toolbar.js",
|
||||
"public/js/frappe/ui/editor.js",
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
.underline {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.underline-hover {
|
||||
border-bottom: 1px solid #212a33;
|
||||
color: #212a33;
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -7,19 +16,10 @@ body {
|
|||
margin: 0px;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
.desk-container {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
/* Prevent scroll on narrow devices */
|
||||
}
|
||||
.desk-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.desk-main-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -57,6 +57,9 @@ a.grey:hover,
|
|||
border-bottom: 1px solid #212a33;
|
||||
color: #212a33;
|
||||
}
|
||||
.text-color {
|
||||
color: #36414c !important;
|
||||
}
|
||||
.text-muted {
|
||||
color: #8d99a6 !important;
|
||||
}
|
||||
|
|
@ -323,3 +326,8 @@ kbd {
|
|||
.dropdown-menu .divider {
|
||||
margin: 0px;
|
||||
}
|
||||
a.badge-hover:hover .badge,
|
||||
a.badge-hover:focus .badge,
|
||||
a.badge-hover:active .badge {
|
||||
background-color: #D8DFE5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,32 +40,6 @@
|
|||
.field_description_top {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sidebar-section li {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sidebar-section {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.sidebar-section:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sidebar-section h6 {
|
||||
text-transform: uppercase;
|
||||
color: #8d99a6;
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sidebar-section .close {
|
||||
font-size: 18px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.sidebar-section h6 .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.sidebar-section.sidebar-comments {
|
||||
cursor: pointer;
|
||||
}
|
||||
.user-actions {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,9 +72,6 @@
|
|||
.doclist-row .progress {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.stat-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.filterable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
9
frappe/public/css/mixins.css
Normal file
9
frappe/public/css/mixins.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.underline {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.underline-hover {
|
||||
border-bottom: 1px solid #212a33;
|
||||
color: #212a33;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@media (max-width: 767px) {
|
||||
.layout-main > div[class^="col-sm-"],
|
||||
@media (max-width: 991px) {
|
||||
.form-section {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
|
|
@ -7,10 +6,6 @@
|
|||
.module-sidebar-nav {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.list-sidebar {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.layout-main-section {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
|
@ -63,7 +58,7 @@
|
|||
margin-top: 4px;
|
||||
}
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 2px !important;
|
||||
margin-top: 12px !important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#navbar-breadcrumbs {
|
||||
|
|
@ -74,6 +69,9 @@
|
|||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#navbar-breadcrumbs > li > a {
|
||||
padding: 10px 0px 0px;
|
||||
}
|
||||
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -88,27 +86,29 @@
|
|||
.page-head,
|
||||
.sidebar-right,
|
||||
.sidebar-left,
|
||||
.navbar-fixed-top {
|
||||
.navbar-fixed-top,
|
||||
.desk-main-section-overlay {
|
||||
transition: 0.25s;
|
||||
}
|
||||
.offcanvas,
|
||||
.desk-main-section-overlay {
|
||||
.offcanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.desk-main-section-overlay {
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
}
|
||||
.offcanvas.active-left .desk-main-section-overlay,
|
||||
.offcanvas.active-right .desk-main-section-overlay {
|
||||
display: block;
|
||||
background-color: #334143;
|
||||
opacity: 0.5;
|
||||
z-index: 1031;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
}
|
||||
.offcanvas.active-left,
|
||||
.offcanvas.active-left .desk-main-section-overlay,
|
||||
.offcanvas.active-left .page-head,
|
||||
.offcanvas.active-left .navbar-fixed-top {
|
||||
left: 75%;
|
||||
|
|
@ -116,6 +116,7 @@
|
|||
right: -75%;
|
||||
}
|
||||
.offcanvas.active-right,
|
||||
.offcanvas.active-right .desk-main-section-overlay,
|
||||
.offcanvas.active-right .page-head,
|
||||
.offcanvas.active-right .navbar-fixed-top {
|
||||
right: 75%;
|
||||
|
|
@ -148,27 +149,8 @@
|
|||
.offcanvas.active-right .sidebar-right {
|
||||
right: 0;
|
||||
}
|
||||
.offcanvas .sidebar ul {
|
||||
list-style: outside none none;
|
||||
padding-left: 0px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.offcanvas .sidebar-menu li > a {
|
||||
padding: 12px 14px;
|
||||
display: block;
|
||||
clear: both;
|
||||
whitespace: nowrap;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.offcanvas .sidebar li > a:hover,
|
||||
.offcanvas .sidebar li > a:focus,
|
||||
.offcanvas .sidebar li > a:active {
|
||||
background-color: #f0f4f7;
|
||||
}
|
||||
.sidebar .divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: #ebeff2;
|
||||
.offcanvas .sidebar-menu {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sidebar .form-group {
|
||||
margin-bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
background-color: #ff5858;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1px 5px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
#navbar-search {
|
||||
width: 300px;
|
||||
|
|
@ -57,14 +57,6 @@
|
|||
.navbar .badge {
|
||||
font-weight: normal;
|
||||
}
|
||||
#sidebar-notification > li > a:hover .badge,
|
||||
#navbar-notification > li > a:hover .badge,
|
||||
#sidebar-notification > li > a:focus .badge,
|
||||
#navbar-notification > li > a:focus .badge,
|
||||
#sidebar-notification > li > a:active .badge,
|
||||
#navbar-notification > li > a:active .badge {
|
||||
background-color: #D8DFE5;
|
||||
}
|
||||
#navbar-search-results {
|
||||
left: auto;
|
||||
right: inherit;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,13 @@
|
|||
border: 1px solid #d1d8dd;
|
||||
border-top: 0px;
|
||||
}
|
||||
.layout-main-section-wrapper {
|
||||
margin-bottom: 60px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.layout-side-section {
|
||||
margin-right: -15px;
|
||||
}
|
||||
.form-intro-area {
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -60,6 +67,3 @@
|
|||
.page-form .checkbox input {
|
||||
margin-top: -3px;
|
||||
}
|
||||
.layout-main-section-wrapper {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
|
|
|||
150
frappe/public/css/sidebar.css
Normal file
150
frappe/public/css/sidebar.css
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
.underline {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.underline-hover {
|
||||
border-bottom: 1px solid #212a33;
|
||||
color: #212a33;
|
||||
}
|
||||
body[data-route=""] .main-menu .desk-sidebar,
|
||||
body[data-route="desk"] .main-menu .desk-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
body[data-route=""] .main-menu .form-sidebar,
|
||||
body[data-route="desk"] .main-menu .form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
body[data-route^="List"] .main-menu .list-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
body[data-route^="List"] .main-menu .form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
.sidebar-padding {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.sidebar-left .sidebar-menu > li > a {
|
||||
padding: 12px 14px;
|
||||
display: block;
|
||||
whitespace: nowrap;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.sidebar-left .divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: #ebeff2;
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-left .sidebar-menu > li > a:hover,
|
||||
.sidebar-left .sidebar-menu > li > a:focus,
|
||||
.sidebar-left .sidebar-menu > li > a:active {
|
||||
background-color: #f0f4f7;
|
||||
}
|
||||
.layout-side-section {
|
||||
font-size: 12px;
|
||||
}
|
||||
.layout-side-section .divider {
|
||||
display: none !important;
|
||||
}
|
||||
.layout-side-section .sidebar-menu > li > a {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
display: inline-block;
|
||||
}
|
||||
.layout-side-section .sidebar-menu {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
.layout-side-section .sidebar-menu > li > a:hover,
|
||||
.layout-side-section .sidebar-menu > li > a:focus,
|
||||
.layout-side-section .sidebar-menu > li > a:active {
|
||||
border-bottom: 1px solid #212a33;
|
||||
color: #212a33;
|
||||
}
|
||||
.sidebar-menu .badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.sidebar-menu .octicon {
|
||||
font-size: 12px;
|
||||
}
|
||||
.sidebar-menu h6,
|
||||
.sidebar-menu .h6 {
|
||||
text-transform: uppercase;
|
||||
color: #8d99a6;
|
||||
font-size: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.form-sidebar .form-tags .tag-area {
|
||||
margin-top: -3px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
.form-sidebar .form-tags input {
|
||||
font-size: 12px !important;
|
||||
color: #36414c !important;
|
||||
font-style: italic;
|
||||
}
|
||||
.form-sidebar .form-tags .tagit-new {
|
||||
clear: both;
|
||||
margin-top: 2px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.form-sidebar .assignment-row a.close,
|
||||
.form-sidebar .attachment-row a.close {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
.sidebar-left .form-sidebar .form-tags,
|
||||
.sidebar-left .form-sidebar .assignment-row,
|
||||
.sidebar-left .form-sidebar .modified-by,
|
||||
.sidebar-left .form-sidebar .created-by,
|
||||
.sidebar-left .form-sidebar .tags-label {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.sidebar-left .form-sidebar .assigned-to-label,
|
||||
.sidebar-left .form-sidebar .attachments-label,
|
||||
.sidebar-left .form-sidebar .tags-label {
|
||||
padding: 12px 14px;
|
||||
padding-bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.sidebar-left .form-sidebar .assignment-row a.close {
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
.layout-side-section .form-sidebar .attachment-row a.close {
|
||||
top: -4px;
|
||||
}
|
||||
.layout-side-section .form-sidebar .modified-by,
|
||||
.layout-side-section .form-sidebar .created-by {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
.layout-side-section .form-sidebar .assignment-row a.close,
|
||||
.layout-side-section .form-sidebar .attachment-row a.close {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.layout-side-section .list-sidebar {
|
||||
margin-top: -15px;
|
||||
}
|
||||
.sidebar-left .list-sidebar .stat-label,
|
||||
.sidebar-left .list-sidebar .stat-no-records {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.sidebar-left .list-sidebar .stat-label {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.list-sidebar .list-tag-preview {
|
||||
padding: 5px !important;
|
||||
margin-left: 5px;
|
||||
display: inline !important;
|
||||
}
|
||||
.list-sidebar .list-tag-preview:hover,
|
||||
a.close:hover,
|
||||
.list-sidebar .list-tag-preview:active,
|
||||
a.close:active,
|
||||
.list-sidebar .list-tag-preview:focus,
|
||||
a.close:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
|
@ -10,13 +10,12 @@ frappe.provide("frappe.ui.form");
|
|||
|
||||
frappe.ui.form.AssignTo = Class.extend({
|
||||
init: function(opts) {
|
||||
$.extend(this, opts);
|
||||
var me = this;
|
||||
this.$list = this.parent.find(".assign-list");
|
||||
|
||||
this.btn = this.parent.find(".add-assignment").click(function() {
|
||||
me.add();
|
||||
});
|
||||
$.extend(this, opts);
|
||||
this.btn = this.parent.find(".add-assignment").on("click", function() { me.add(); });
|
||||
this.btn_wrapper = this.btn.parent();
|
||||
|
||||
this.refresh();
|
||||
},
|
||||
refresh: function() {
|
||||
|
|
@ -30,7 +29,7 @@ frappe.ui.form.AssignTo = Class.extend({
|
|||
render: function(d) {
|
||||
var me = this;
|
||||
this.frm.get_docinfo().assignments = d;
|
||||
this.$list.empty();
|
||||
this.parent.find(".assignment-row").remove();
|
||||
|
||||
if(me.primary_action) {
|
||||
me.primary_action.remove();
|
||||
|
|
@ -48,11 +47,16 @@ frappe.ui.form.AssignTo = Class.extend({
|
|||
info.image = frappe.user_info(d[i].owner).image;
|
||||
info.description = d[i].description || "";
|
||||
|
||||
$(repl('<div class="text-ellipsis">\
|
||||
<a href="#" class="close" data-owner="%(owner)s">×</a>\
|
||||
<span class="h6">%(fullname)s</span>\
|
||||
</div>', info))
|
||||
.appendTo(this.$list);
|
||||
$(repl('<li class="assignment-row">\
|
||||
<a class="close" data-owner="%(owner)s">×</a>\
|
||||
<div class="text-ellipsis" style="width: 80%">\
|
||||
<div class="avatar avatar-small">\
|
||||
<img class="media-object" src="%(image)s">\
|
||||
</div>\
|
||||
<span>%(fullname)s</span>\
|
||||
</div>\
|
||||
</li>', info))
|
||||
.appendTo(this.parent);
|
||||
|
||||
if(d[i].owner===user) {
|
||||
me.primary_action = this.frm.page.add_menu_item(__("Assignment Complete"), function() {
|
||||
|
|
@ -61,21 +65,20 @@ frappe.ui.form.AssignTo = Class.extend({
|
|||
}
|
||||
|
||||
if(!(d[i].owner === user || me.frm.perm[0].write)) {
|
||||
me.$list.find('a.close').remove();
|
||||
me.parent.find('a.close').remove();
|
||||
}
|
||||
}
|
||||
|
||||
// set remove
|
||||
this.$list.find('a.close').click(function() {
|
||||
this.parent.find('a.close').click(function() {
|
||||
me.remove($(this).attr('data-owner'));
|
||||
return false;
|
||||
});
|
||||
|
||||
this.btn.toggle(false);
|
||||
this.btn_wrapper.addClass("hide");
|
||||
} else {
|
||||
this.btn.toggle(true);
|
||||
this.btn_wrapper.removeClass("hide");
|
||||
}
|
||||
|
||||
},
|
||||
add: function() {
|
||||
var me = this;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ frappe.ui.form.Attachments = Class.extend({
|
|||
},
|
||||
make: function() {
|
||||
var me = this;
|
||||
this.$list = this.parent.find(".attachment-list");
|
||||
|
||||
this.parent.find(".add-attachment").click(function() {
|
||||
me.new_attachment();
|
||||
});
|
||||
this.add_attachment_wrapper = this.parent.find(".add_attachment").parent();
|
||||
this.attachments_label = this.parent.find(".attachments-label");
|
||||
},
|
||||
max_reached: function() {
|
||||
// no of attachments
|
||||
|
|
@ -27,24 +27,23 @@ frappe.ui.form.Attachments = Class.extend({
|
|||
return true;
|
||||
},
|
||||
refresh: function() {
|
||||
var doc = this.frm.doc;
|
||||
if(doc.__islocal) {
|
||||
var me = this;
|
||||
|
||||
if(this.frm.doc.__islocal) {
|
||||
this.parent.toggle(false);
|
||||
return;
|
||||
}
|
||||
this.parent.toggle(true);
|
||||
this.parent.find(".btn").toggle(!this.max_reached());
|
||||
|
||||
this.$list.empty();
|
||||
|
||||
var attachments = this.get_attachments();
|
||||
var that = this;
|
||||
this.parent.find(".attachment-row").remove();
|
||||
|
||||
var max_reached = this.max_reached();
|
||||
this.add_attachment_wrapper.toggleClass("hide", !max_reached);
|
||||
|
||||
// add attachment objects
|
||||
var attachments = this.get_attachments();
|
||||
if(attachments.length) {
|
||||
attachments.forEach(function(attachment) {
|
||||
that.add_attachment(attachment)
|
||||
me.add_attachment(attachment)
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -63,15 +62,16 @@ frappe.ui.form.Attachments = Class.extend({
|
|||
}
|
||||
|
||||
var me = this;
|
||||
var $attach = $(repl('<div class="text-ellipsis">\
|
||||
<a href="#" class="close">×</a>\
|
||||
<a class="h6" href="%(file_url)s" style="margin-top: 0px;"\
|
||||
target="_blank" title="%(file_name)s">%(file_name)s</a>\
|
||||
</div>', {
|
||||
var $attach = $(repl('<li class="attachment-row">\
|
||||
<a class="close" data-owner="%(owner)s">×</a>\
|
||||
<a href="%(file_url)s" target="_blank" title="%(file_name)s" \
|
||||
class="text-ellipsis" style="width: calc(100% - 43px);">\
|
||||
<span>%(file_name)s</span></a>\
|
||||
</li>', {
|
||||
file_name: file_name,
|
||||
file_url: file_url
|
||||
}))
|
||||
.appendTo(this.$list)
|
||||
.insertAfter(this.attachments_label)
|
||||
|
||||
var $close =
|
||||
$attach.find(".close")
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@ frappe.ui.form.Footer = Class.extend({
|
|||
var me = this;
|
||||
$.extend(this, opts);
|
||||
this.make();
|
||||
this.make_assignments();
|
||||
this.make_attachments();
|
||||
this.make_tags();
|
||||
this.make_comments();
|
||||
// render-complete
|
||||
$(this.frm.wrapper).on("render_complete", function() {
|
||||
|
|
@ -24,29 +21,6 @@ frappe.ui.form.Footer = Class.extend({
|
|||
})
|
||||
|
||||
},
|
||||
make_tags: function() {
|
||||
if (this.frm.meta.issingle) {
|
||||
this.frm.sidebar.parent.find(".form-tags").toggle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.frm.tags = new frappe.ui.TagEditor({
|
||||
parent: this.frm.sidebar.parent.find(".tag-area"),
|
||||
frm: this.frm,
|
||||
})
|
||||
},
|
||||
make_attachments: function() {
|
||||
this.frm.attachments = new frappe.ui.form.Attachments({
|
||||
parent: this.frm.sidebar.parent.find(".form-attachments"),
|
||||
frm: this.frm
|
||||
});
|
||||
},
|
||||
make_assignments: function() {
|
||||
this.frm.assign_to = new frappe.ui.form.AssignTo({
|
||||
parent: this.frm.sidebar.parent.find(".form-assignments"),
|
||||
frm: this.frm
|
||||
});
|
||||
},
|
||||
make_comments: function() {
|
||||
this.frm.comments = new frappe.ui.form.Comments({
|
||||
parent: this.wrapper.find(".form-comments"),
|
||||
|
|
@ -58,10 +32,7 @@ frappe.ui.form.Footer = Class.extend({
|
|||
this.parent.addClass("hide");
|
||||
} else {
|
||||
this.parent.removeClass("hide");
|
||||
this.frm.attachments.refresh();
|
||||
this.frm.comments.refresh();
|
||||
this.frm.assign_to.refresh();
|
||||
this.frm.tags && this.frm.tags.refresh();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ frappe.ui.form.Comments = Class.extend({
|
|||
});
|
||||
|
||||
this.wrapper.find(".is-email").prop("checked", this.last_type==="Email");
|
||||
this.update_sidebar_comments();
|
||||
this.frm.sidebar.refresh_comments();
|
||||
|
||||
},
|
||||
render_comment: function(c) {
|
||||
|
|
@ -164,12 +164,6 @@ frappe.ui.form.Comments = Class.extend({
|
|||
c.icon_fg = "#fff";
|
||||
|
||||
},
|
||||
update_sidebar_comments: function() {
|
||||
var comments = $.map(this.get_comments(), function(c) {
|
||||
return (c.comment_type==="Email" || c.comment_type==="Comment") ? c : null;
|
||||
});
|
||||
this.frm.sidebar.wrapper.find(".n-comments").html(comments.length);
|
||||
},
|
||||
get_comments: function() {
|
||||
return this.frm.get_docinfo().comments;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,52 +1,33 @@
|
|||
<div class="form-sidebar">
|
||||
<ul class="sidebar-section user-actions list-unstyled hide">
|
||||
</ul>
|
||||
{% if (!frm.meta.hide_toolbar) { %}
|
||||
<div class="sidebar-section sidebar-comments">
|
||||
<h6>{%= __("Comments") %}
|
||||
<span class="label label-default n-comments"></span></h6>
|
||||
</div>
|
||||
<div class="sidebar-section form-tags">
|
||||
<h6 style="display: inline-block">
|
||||
{%= __("Tags") %}
|
||||
</h6>
|
||||
<ul class="list-unstyled sidebar-menu user-actions hide">
|
||||
<li class="divider"></li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu">
|
||||
<li class="divider"></li>
|
||||
<li><a class="strong sidebar-comments badge-hover">{%= __("Comments") %} <span class="pull-right badge n-comments">0</span></a></li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-assignments">
|
||||
<li class="divider"></li>
|
||||
<li class="h6 assigned-to-label">{%= __("Assigned To") %}</li>
|
||||
<li><a class="strong add-assignment">{%= __("Assign") %}
|
||||
<i class="octicon octicon-plus" style="margin-left: 2px;"></i></a></li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-attachments">
|
||||
<li class="divider"></li>
|
||||
<li class="h6 attachments-label">{%= __("Attachments") %}</li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="strong add-attachment">{%= __("Attach File") %}
|
||||
<i class="octicon octicon-plus" style="margin-left: 2px;"></i></li></a>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu">
|
||||
<li class="divider"></li>
|
||||
<li class="h6 tags-label">{%= __("Tags") %}</li>
|
||||
<li class="form-tags">
|
||||
<div class="tag-area"></div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="sidebar-section form-assignments">
|
||||
<h6>
|
||||
{%= __("Assigned To") %}:
|
||||
</h6>
|
||||
<div class="assign-list"></div>
|
||||
<div>
|
||||
<a class="grey h6 add-assignment" style="margin-top: 0px;">{%= __("Assign") %}
|
||||
<span class="octicon octicon-plus h6" style="margin-top: 0px; font-size: 14px;"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section form-attachments">
|
||||
<h6>
|
||||
{%= __("Attachments") %}:
|
||||
</h6>
|
||||
<div class="attachment-list"></div>
|
||||
<div>
|
||||
<a class="grey h6 add-attachment" style="margin-top: 0px;">{%= __("Attach a file") %}
|
||||
<span class="octicon octicon-plus h6" style="margin-top: 0px; font-size: 14px;"></span></a>
|
||||
|
||||
<br><span class="small text-muted">
|
||||
{%= __("Drag and drop to attach") %}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h6>
|
||||
{%= __("Last Edited") %}
|
||||
</h6>
|
||||
<div class="modified-by text-muted small"></div>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h6>
|
||||
{%= __("Created By") %}
|
||||
</h6>
|
||||
<div class="created-by text-muted small"></div>
|
||||
</div>
|
||||
{% } %}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu text-muted">
|
||||
<li class="divider"></li>
|
||||
<li class="modified-by"></li>
|
||||
<li class="created-by"></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -2,32 +2,93 @@ frappe.provide("frappe.ui.form");
|
|||
frappe.ui.form.Sidebar = Class.extend({
|
||||
init: function(opts) {
|
||||
$.extend(this, opts);
|
||||
this.make();
|
||||
},
|
||||
|
||||
make: function() {
|
||||
var sidebar_content = frappe.render_template("form_sidebar", {doctype: this.frm.doctype, frm:this.frm});
|
||||
|
||||
this.offcanvas_form_sidebar = $(".offcanvas .form-sidebar").html(sidebar_content);
|
||||
this.page_sidebar = $('<div class="form-sidebar hidden-xs hidden-sm"></div>')
|
||||
.html(sidebar_content)
|
||||
.appendTo(this.page.sidebar.empty());
|
||||
|
||||
this.sidebar = this.page_sidebar.add(this.offcanvas_form_sidebar);
|
||||
this.comments = this.sidebar.find(".sidebar-comments");
|
||||
this.user_actions = this.sidebar.find(".user-actions");
|
||||
|
||||
this.make_assignments();
|
||||
this.make_attachments();
|
||||
this.make_tags();
|
||||
|
||||
this.bind_events();
|
||||
|
||||
},
|
||||
|
||||
bind_events: function() {
|
||||
var me = this;
|
||||
this.parent.addClass("hidden-xs");
|
||||
this.wrapper = $(frappe.render_template("form_sidebar",
|
||||
{doctype: this.frm.doctype, frm:this.frm}))
|
||||
.appendTo(this.parent);
|
||||
this.$user_actions = this.wrapper.find(".user-actions");
|
||||
this.wrapper.find(".sidebar-section.sidebar-comments").on("click", function() {
|
||||
$(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top);
|
||||
|
||||
// scroll to comments
|
||||
this.comments.on("click", function() {
|
||||
$(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top
|
||||
- $(".navbar").height() - $(".page-head").height());
|
||||
});
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
if(this.frm.doc.__islocal) {
|
||||
this.sidebar.toggle(false);
|
||||
} else {
|
||||
this.sidebar.toggle(true);
|
||||
this.frm.assign_to.refresh();
|
||||
this.frm.attachments.refresh();
|
||||
this.frm.tags && this.frm.tags.refresh();
|
||||
this.sidebar.find(".modified-by").html(__("{0} edited this {1}",
|
||||
["<strong>" + frappe.user.full_name(this.frm.doc.modified_by) + "</strong>",
|
||||
"<br>" + comment_when(this.frm.doc.modified)]));
|
||||
this.sidebar.find(".created-by").html(__("{0} created this {1}",
|
||||
["<strong>" + frappe.user.full_name(this.frm.doc.owner) + "</strong>",
|
||||
"<br>" + comment_when(this.frm.doc.creation)]));
|
||||
}
|
||||
},
|
||||
|
||||
refresh_comments: function() {
|
||||
var comments = $.map(this.frm.comments.get_comments(), function(c) {
|
||||
return (c.comment_type==="Email" || c.comment_type==="Comment") ? c : null;
|
||||
});
|
||||
this.comments.find(".n-comments").html(comments.length);
|
||||
},
|
||||
|
||||
make_tags: function() {
|
||||
if (this.frm.meta.issingle) {
|
||||
this.sidebar.find(".form-tags").toggle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.frm.tags = new frappe.ui.TagEditor({
|
||||
parent: this.sidebar.find(".tag-area"),
|
||||
frm: this.frm
|
||||
});
|
||||
},
|
||||
make_attachments: function() {
|
||||
var me = this;
|
||||
this.frm.attachments = new frappe.ui.form.Attachments({
|
||||
parent: me.sidebar.find(".form-attachments"),
|
||||
frm: me.frm
|
||||
});
|
||||
},
|
||||
make_assignments: function() {
|
||||
this.frm.assign_to = new frappe.ui.form.AssignTo({
|
||||
parent: this.sidebar.find(".form-assignments"),
|
||||
frm: this.frm
|
||||
});
|
||||
},
|
||||
add_user_action: function(label, click) {
|
||||
return $('<a>').html(label).appendTo($('<li>')
|
||||
.appendTo(this.$user_actions.removeClass("hide"))).on("click", click);
|
||||
return $('<a>').html(label).appendTo($('<li class="user-action-row">')
|
||||
.appendTo(this.user_actions.removeClass("hide"))).on("click", click);
|
||||
},
|
||||
clear_user_actions: function() {
|
||||
this.$user_actions.empty().addClass("hide");
|
||||
this.user_actions.addClass("hide")
|
||||
this.user_actions.find(".user-action-row").remove();
|
||||
},
|
||||
refresh: function() {
|
||||
if(this.frm.doc.__islocal) {
|
||||
this.wrapper.toggle(false);
|
||||
} else {
|
||||
this.wrapper.toggle(true);
|
||||
this.wrapper.find(".created-by").html(frappe.user.full_name(this.frm.doc.owner) +
|
||||
"<br>" + comment_when(this.frm.doc.creation));
|
||||
this.wrapper.find(".modified-by").html(frappe.user.full_name(this.frm.doc.modified_by) +
|
||||
"<br>" + comment_when(this.frm.doc.modified));
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -403,10 +403,11 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
|
|||
this.sidebar_stats = new frappe.views.ListSidebar({
|
||||
doctype: this.doctype,
|
||||
stats: this.listview.stats,
|
||||
parent: $('<div>').appendTo(this.$page.find('.layout-side-section')),
|
||||
parent: this.$page.find('.layout-side-section'),
|
||||
set_filter: function(fieldname, label) {
|
||||
me.set_filter(fieldname, label);
|
||||
},
|
||||
page: this.page,
|
||||
doclistview: this
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
<div class="list-sidebar hidden-xs">
|
||||
<div class="sidebar-section">
|
||||
<ul class="user-actions list-unstyled hide">
|
||||
</ul>
|
||||
<ul class="standard-actions list-unstyled">
|
||||
<li>
|
||||
<a href="#Report/{%= doctype %}">{%= __("Report") %}</a></li>
|
||||
<li class="hide calendar-link">
|
||||
<a href="#Calendar/{%= doctype %}">{%= __("Calendar") %}</a></li>
|
||||
<li class="hide gantt-link">
|
||||
<a href="#Gantt/{%= doctype %}">{%= __("Gantt") %}</a></li>
|
||||
<li>
|
||||
<a onclick="cur_list.assigned_to_me()">{%= __("Assigned To Me") %}</a></li>
|
||||
<li>
|
||||
<a onclick="cur_list.starred_by_me()">{%= __("Starred By Me") %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled sidebar-menu user-actions hide">
|
||||
<li class="divider"></li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu standard-actions">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#Report/{%= doctype %}">{%= __("Report") %}</a></li>
|
||||
<li class="hide calendar-link"><a href="#Calendar/{%= doctype %}">{%= __("Calendar") %}</a></li>
|
||||
<li class="hide gantt-link"><a href="#Gantt/{%= doctype %}">{%= __("Gantt") %}</a></li>
|
||||
<li><a onclick="cur_list.assigned_to_me()">{%= __("Assigned To Me") %}</a></li>
|
||||
<li><a onclick="cur_list.starred_by_me()">{%= __("Starred By Me") %}</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,21 @@ frappe.provide('frappe.views');
|
|||
frappe.views.ListSidebar = Class.extend({
|
||||
init: function(opts) {
|
||||
$.extend(this, opts);
|
||||
this.wrapper = $(frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype}))
|
||||
.appendTo(this.parent);
|
||||
this.get_stats();
|
||||
this.make();
|
||||
},
|
||||
make: function() {
|
||||
var sidebar_content = frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype});
|
||||
|
||||
this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content);
|
||||
this.page_sidebar = $('<div class="list-sidebar hidden-xs hidden-sm"></div>')
|
||||
.html(sidebar_content)
|
||||
.appendTo(this.page.sidebar.empty());
|
||||
|
||||
this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
|
||||
|
||||
if(frappe.views.calendar[this.doctype]) {
|
||||
this.wrapper.find(".calendar-link, .gantt-link").removeClass("hide");
|
||||
this.sidebar.find(".calendar-link, .gantt-link").removeClass("hide");
|
||||
}
|
||||
},
|
||||
get_stats: function() {
|
||||
|
|
@ -35,90 +45,49 @@ frappe.views.ListSidebar = Class.extend({
|
|||
});
|
||||
|
||||
// reload button at the end
|
||||
if(me.stats.length) {
|
||||
$('<a class="small text-muted">'+__('Refresh Stats')+'</a>')
|
||||
.css({"margin-top":"15px", "display":"inline-block"})
|
||||
.click(function() {
|
||||
me.reload_stats();
|
||||
return false;
|
||||
}).appendTo($('<div class="stat-wrapper">')
|
||||
.appendTo(me.wrapper));
|
||||
}
|
||||
// if(me.stats.length) {
|
||||
// $('<a class="small text-muted">'+__('Refresh Stats')+'</a>')
|
||||
// .css({"margin-top":"15px", "display":"inline-block"})
|
||||
// .click(function() {
|
||||
// me.reload_stats();
|
||||
// return false;
|
||||
// }).appendTo($('<div class="stat-wrapper">')
|
||||
// .appendTo(me.sidebar));
|
||||
// }
|
||||
|
||||
me.doclistview.set_sidebar_height();
|
||||
}
|
||||
});
|
||||
},
|
||||
render_stat: function(field, stat) {
|
||||
var me = this;
|
||||
var show_tags = '<a class="list-tag-preview" style="margin-left: 7px;">'
|
||||
+ '<span class="octicon octicon-pencil" style="font-size: 12px;" title="'+__("Edit Tags")+'"></span></a>';
|
||||
|
||||
if(!stat || !stat.length) {
|
||||
if(field==='_user_tags') {
|
||||
$('<div class="sidebar-section">\
|
||||
<h6>\
|
||||
</i> '+__('Tags')+show_tags+'</h6>\
|
||||
<div class="side-panel-body">\
|
||||
<div class="text-muted small"><i>'+__('No records tagged.')+'</i><br>'
|
||||
+'</div>\
|
||||
</div></div>').appendTo(this.wrapper);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var sum = 0;
|
||||
var label = frappe.meta.docfield_map[this.doctype][field] ?
|
||||
frappe.meta.docfield_map[this.doctype][field].label : field;
|
||||
if(label==='_user_tags') label = 'Tags' + show_tags;
|
||||
var show_tags = '<a class="list-tag-preview hidden-xs" title="' + __("Show tags")
|
||||
+ '"><i class="octicon octicon-pencil"></i></a>';
|
||||
|
||||
// grid
|
||||
var $w = $('<div class="sidebar-section">\
|
||||
<h6>'+ __(label) +'</h6>\
|
||||
<div class="side-panel-body">\
|
||||
</div>\
|
||||
</div>');
|
||||
|
||||
// sort items
|
||||
stat = stat.sort(function(a, b) { return b[1] - a[1] });
|
||||
var sum = 0;
|
||||
stat = (stat || []).sort(function(a, b) { return b[1] - a[1] });
|
||||
$.each(stat, function(i,v) { sum = sum + v[1]; })
|
||||
|
||||
// render items
|
||||
$.each(stat, function(i, v) {
|
||||
me.render_stat_item(i, v, sum, field).appendTo($w.find('.side-panel-body'));
|
||||
});
|
||||
var context = {
|
||||
field: field,
|
||||
stat: stat,
|
||||
sum: sum,
|
||||
label: label==='_user_tags' ? (__("Tags") + show_tags) : __(label),
|
||||
};
|
||||
|
||||
$w.appendTo(this.wrapper);
|
||||
},
|
||||
render_stat_item: function(i, v, max, field) {
|
||||
var me = this;
|
||||
var args = {}
|
||||
args.label = v[0];
|
||||
args._label = __(v[0]);
|
||||
args.width = flt(v[1]) / max * 100;
|
||||
args.count = v[1];
|
||||
args.field = field;
|
||||
args.bar_style = "";
|
||||
|
||||
$item = $(repl('<div class="stat-label small text-muted" >\
|
||||
<a href="#" data-label="%(label)s" data-field="%(field)s">\
|
||||
<span class="label label-default pull-right">%(count)s</span>\
|
||||
<span>%(_label)s</span></a>\
|
||||
</div>', args));
|
||||
|
||||
this.setup_stat_item_click($item);
|
||||
return $item;
|
||||
var sidebar_stat = $(frappe.render_template("list_sidebar_stat", context))
|
||||
.on("click", ".stat-link", function() {
|
||||
var fieldname = $(this).attr('data-field');
|
||||
var label = $(this).attr('data-label');
|
||||
me.set_filter(fieldname, label);
|
||||
return false;
|
||||
})
|
||||
.appendTo(this.sidebar);
|
||||
},
|
||||
reload_stats: function() {
|
||||
this.wrapper.empty();
|
||||
this.sidebar.find(".sidebar-stat").remove();
|
||||
this.get_stats();
|
||||
},
|
||||
setup_stat_item_click: function($item) {
|
||||
var me = this;
|
||||
$item.find('a').click(function() {
|
||||
var fieldname = $(this).attr('data-field');
|
||||
var label = $(this).attr('data-label');
|
||||
me.set_filter(fieldname, label);
|
||||
return false;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
19
frappe/public/js/frappe/list/list_sidebar_stat.html
Normal file
19
frappe/public/js/frappe/list/list_sidebar_stat.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<ul class="list-unstyled sidebar-menu sidebar-stat">
|
||||
<li class="divider"></li>
|
||||
<li class="h6 stat-label">{%= label %}</li>
|
||||
{% if(!stat.length) { %}
|
||||
<li class="stat-no-records text-muted">{%= __("No records tagged.") %}</li>
|
||||
{% } else {
|
||||
for (var i=0, l=stat.length; i < l; i++) {
|
||||
var stat_label = stat[i][0];
|
||||
var stat_count = stat[i][1];
|
||||
%}
|
||||
<li class="text-muted">
|
||||
<a class="stat-link badge-hover" data-label="{%= stat_label %}" data-field="{%= field %}">
|
||||
<span class="badge">{%= stat_count %}</span>
|
||||
<span>{%= __(stat_label) %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% }
|
||||
} %}
|
||||
</ul>
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
</div>
|
||||
<div class="page-actions text-right col-xs-5">
|
||||
<h6 class="sub-heading hide text-muted"></h6>
|
||||
<span class="page-icon-group hide hidden-xs"></span>
|
||||
<span class="page-icon-group hide hidden-xs hidden-sm"></span>
|
||||
<div class="btn-group menu-btn-group hide">
|
||||
<button type="button" class="btn btn-default btn-sm dropdown-toggle"
|
||||
data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="hidden-xs">{%= __("Menu") %} <span class="caret"></span></span>
|
||||
<span class="visible-xs"><i class="octicon octicon-three-bars"></i></span>
|
||||
<span class="visible-xs"><i class="octicon octicon-triangle-down"></i></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -40,14 +40,14 @@ frappe.ui.Page = Class.extend({
|
|||
if(this.single_column) {
|
||||
// nesting under col-sm-12 for consistency
|
||||
this.add_view("main", '<div class="row layout-main">\
|
||||
<div class="col-sm-12 layout-main-section-wrapper">\
|
||||
<div class="col-md-12 layout-main-section-wrapper">\
|
||||
<div class="layout-main-section"></div>\
|
||||
</div>\
|
||||
</div>');
|
||||
} else {
|
||||
var main = this.add_view("main", '<div class="row layout-main">\
|
||||
<div class="col-sm-2 layout-side-section"></div>\
|
||||
<div class="col-sm-10 layout-main-section-wrapper">\
|
||||
<div class="col-md-2 layout-side-section"></div>\
|
||||
<div class="col-md-10 layout-main-section-wrapper">\
|
||||
<div class="layout-main-section"></div>\
|
||||
</div>\
|
||||
</div>');
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ frappe.ui.TagEditor = Class.extend({
|
|||
this.$tags = $('<ul>').prependTo(this.$w).tagit({
|
||||
animate: false,
|
||||
allowSpaces: true,
|
||||
placeholderText: __('Add Tag'),
|
||||
placeholderText: __('Type to tag' + "..."),
|
||||
onTagAdded: function(ev, tag) {
|
||||
if(me.initialized && !me.refreshing) {
|
||||
var tag = tag.find('.tagit-label').text();
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ frappe.ui.toolbar.Search = frappe.ui.toolbar.SelectorDialog.extend({
|
|||
|
||||
frappe.search = {
|
||||
setup: function() {
|
||||
$("#navbar-search, #sidebar-search").autocomplete({
|
||||
var opts = {
|
||||
minLength: 0,
|
||||
source: function(request, response) {
|
||||
var txt = strip(request.term);
|
||||
|
|
@ -53,7 +53,9 @@ frappe.search = {
|
|||
$(this).val('');
|
||||
return false;
|
||||
}
|
||||
}).data('ui-autocomplete')._renderItem = function(ul, d) {
|
||||
};
|
||||
|
||||
var render_item = function(ul, d) {
|
||||
var html = "<span>" + __(d.value) + "</span>";
|
||||
if(d.description && d.value!==d.description) {
|
||||
html += '<br><span class="text-muted">' + __(d.description) + '</span>';
|
||||
|
|
@ -64,6 +66,9 @@ frappe.search = {
|
|||
.appendTo(ul);
|
||||
};
|
||||
|
||||
$("#navbar-search").autocomplete(opts).data('ui-autocomplete')._renderItem = render_item;
|
||||
$("#sidebar-search").autocomplete(opts).data('ui-autocomplete')._renderItem = render_item;
|
||||
|
||||
frappe.search.make_page_title_map();
|
||||
},
|
||||
add_help: function() {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand toggle-sidebar visible-xs">
|
||||
<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
|
||||
<i class="octicon octicon-three-bars"></i>
|
||||
</a>
|
||||
<a class="navbar-brand navbar-home hidden-xs" href="#">Home</a>
|
||||
<a class="navbar-brand navbar-home hidden-xs hidden-sm" href="#">Home</a>
|
||||
<ul class="nav navbar-nav text-ellipsis" id="navbar-breadcrumbs">
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="nav navbar-nav navbar-right visible-xs">
|
||||
<ul class="nav navbar-nav navbar-right visible-xs visible-sm">
|
||||
<li>
|
||||
<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">
|
||||
<span class="navbar-new-comments">0</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hidden-xs">
|
||||
<div class="hidden-xs hidden-sm">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
|
||||
|
|
|
|||
|
|
@ -6,9 +6,17 @@
|
|||
<span class="octicon octicon-search navbar-search-icon"></span>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="sidebar-menu">
|
||||
<ul class="list-unstyled sidebar-menu">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" class="strong">{%= __("All Applications") %}</a></li>
|
||||
<li><a href="#" class="all-applications strong">{%= __("All Applications") %}</a></li>
|
||||
</ul>
|
||||
<div class="form-sidebar" style="display: none">
|
||||
|
||||
</div>
|
||||
<div class="list-sidebar" style="display: none">
|
||||
|
||||
</div>
|
||||
<ul class="desk-sidebar list-unstyled sidebar-menu" style="display: none">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
|
||||
{%= __("About") %}</a></li>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
frappe.ui.toolbar.Toolbar = Class.extend({
|
||||
init: function() {
|
||||
var header = $('header').append(frappe.render_template("navbar", {}));
|
||||
var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("left_sidebar", {}));
|
||||
var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
|
||||
|
||||
header.find(".toggle-sidebar").on("click", function() {
|
||||
$(".offcanvas").toggleClass("active-left").removeClass("active-right");
|
||||
|
|
@ -74,7 +74,7 @@ frappe.ui.toolbar.update_notifications = function() {
|
|||
$.each(modules, function(i, module) {
|
||||
var count = frappe.boot.notification_info.open_count_module[module];
|
||||
if(count) {
|
||||
var notification_row = repl('<li><a data-module="%(data_module)s">\
|
||||
var notification_row = repl('<li><a class="badge-hover" data-module="%(data_module)s">\
|
||||
<span class="badge pull-right">\
|
||||
%(count)s</span> \
|
||||
%(module)s </a></li>', {
|
||||
|
|
@ -100,7 +100,7 @@ frappe.ui.toolbar.update_notifications = function() {
|
|||
$.each(doctypes, function(i, doctype) {
|
||||
var count = frappe.boot.notification_info.open_count_doctype[doctype];
|
||||
if(count) {
|
||||
var notification_row = repl('<li><a data-doctype="%(data_doctype)s">\
|
||||
var notification_row = repl('<li><a class="badge-hover" data-doctype="%(data_doctype)s">\
|
||||
<span class="badge pull-right">\
|
||||
%(count)s</span> \
|
||||
%(doctype)s </a></li>', {
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@ frappe.views.Container = Class.extend({
|
|||
|
||||
var divider = function() {
|
||||
$('<li class="breadcrumb-divider">\
|
||||
<i class="icon-chevron-right hidden-xs"></i>\
|
||||
<i class="icon-chevron-left visible-xs"></i>\
|
||||
<i class="icon-chevron-right hidden-xs hidden-sm"></i>\
|
||||
<i class="icon-chevron-left visible-xs visible-sm"></i>\
|
||||
</li>').appendTo($breadcrumbs);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ frappe.views.moduleview.ModuleView = Class.extend({
|
|||
},
|
||||
|
||||
make_title: function(name) {
|
||||
this.page_title = this.page.wrapper.find(".page-title").addClass("hidden-xs");
|
||||
this.page_title = this.page.wrapper.find(".page-title").addClass("hidden-xs hidden-sm");
|
||||
this.page.wrapper.find(".mobile-title, .mobile-module-icon").remove();
|
||||
|
||||
$(frappe.render_template("module_title", {
|
||||
|
|
|
|||
|
|
@ -90,11 +90,9 @@ _f.Frm.prototype.setup = function() {
|
|||
|
||||
this.sidebar = new frappe.ui.form.Sidebar({
|
||||
frm: this,
|
||||
parent: this.page.sidebar
|
||||
page: this.page
|
||||
});
|
||||
|
||||
this.page.sidebar = this.sidebar;
|
||||
|
||||
this.toolbar = new frappe.ui.form.Toolbar({
|
||||
frm: this,
|
||||
page: this.page
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
|
|
@ -11,20 +12,10 @@ body {
|
|||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.desk-container {
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
.desk-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.desk-main-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -50,14 +41,15 @@ a.disabled, a.disabled:hover {
|
|||
}
|
||||
|
||||
a.grey, .sidebar-section a, .nav-pills a, .control-value a, .data-row a {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
.underline;
|
||||
}
|
||||
|
||||
a.grey:hover, .sidebar-section a:hover, .nav-pills a:hover, .control-value a:hover, .data-row a:hover {
|
||||
border-bottom: 1px solid @grey-link-color;
|
||||
color: @grey-link-color;
|
||||
.underline-hover;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: @text-color !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
|
|
@ -243,7 +235,7 @@ ul.linked-with-list li {
|
|||
|
||||
.ui-menu .ui-menu-item {
|
||||
padding: 7px;
|
||||
font-size: @font-size-medium;
|
||||
font-size: @text-medium;
|
||||
}
|
||||
|
||||
/* z-index hack */
|
||||
|
|
@ -297,7 +289,7 @@ ul.linked-with-list li {
|
|||
left: 2px;
|
||||
display:inline-block;
|
||||
background:#ff5858;
|
||||
font-size: @font-size-medium;
|
||||
font-size: @text-medium;
|
||||
line-height:20px;
|
||||
padding:0 8px;
|
||||
color:#fff;
|
||||
|
|
@ -376,7 +368,7 @@ kbd {
|
|||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
padding: 0px;
|
||||
font-size: @font-size-medium;
|
||||
font-size: @text-medium;
|
||||
|
||||
// only rounded bottoms
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
|
|
@ -385,3 +377,11 @@ kbd {
|
|||
.dropdown-menu .divider {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a.badge-hover& {
|
||||
&:hover .badge,
|
||||
&:focus .badge,
|
||||
&:active .badge {
|
||||
background-color: #D8DFE5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,38 +51,6 @@
|
|||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.sidebar-section li {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.sidebar-section:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sidebar-section h6 {
|
||||
text-transform: uppercase;
|
||||
color: @text-muted;
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar-section .close {
|
||||
font-size: 18px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-section h6 .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sidebar-section.sidebar-comments {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,10 +92,6 @@
|
|||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.filterable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
12
frappe/public/less/mixins.less
Normal file
12
frappe/public/less/mixins.less
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import "variables.less";
|
||||
|
||||
.underline {
|
||||
color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.underline-hover {
|
||||
border-bottom: 1px solid @grey-link-color;
|
||||
color: @grey-link-color;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@import "variables.less";
|
||||
|
||||
@media(max-width: 767px) {
|
||||
.layout-main > div[class^="col-sm-"],
|
||||
@media(max-width: 991px) {
|
||||
// .layout-main > div[class^="col-md-"],
|
||||
.form-section {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
|
|
@ -11,11 +11,6 @@
|
|||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.list-sidebar {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.layout-main-section {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
|
@ -83,7 +78,7 @@
|
|||
}
|
||||
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 2px !important;
|
||||
margin-top: 12px !important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -97,6 +92,10 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#navbar-breadcrumbs > li > a {
|
||||
padding: 10px 0px 0px;
|
||||
}
|
||||
|
||||
// select all except last 2
|
||||
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
|
||||
display: none;
|
||||
|
|
@ -116,30 +115,33 @@
|
|||
.page-head,
|
||||
.sidebar-right,
|
||||
.sidebar-left,
|
||||
.navbar-fixed-top {
|
||||
.navbar-fixed-top,
|
||||
.desk-main-section-overlay {
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.offcanvas,
|
||||
.desk-main-section-overlay {
|
||||
.offcanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.desk-main-section-overlay {
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.offcanvas.active-left .desk-main-section-overlay,
|
||||
.offcanvas.active-right .desk-main-section-overlay {
|
||||
display: block;
|
||||
background-color: @modal-backdrop-bg;
|
||||
opacity: 0.5;
|
||||
z-index: 1031;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.offcanvas.active-left,
|
||||
.offcanvas.active-left .desk-main-section-overlay,
|
||||
.offcanvas.active-left .page-head,
|
||||
.offcanvas.active-left .navbar-fixed-top {
|
||||
left: 75%; /* 9 columns */
|
||||
|
|
@ -147,6 +149,7 @@
|
|||
}
|
||||
|
||||
.offcanvas.active-right,
|
||||
.offcanvas.active-right .desk-main-section-overlay,
|
||||
.offcanvas.active-right .page-head,
|
||||
.offcanvas.active-right .navbar-fixed-top {
|
||||
right: 75%; /* 9 columns */
|
||||
|
|
@ -182,32 +185,8 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.offcanvas .sidebar ul {
|
||||
list-style: outside none none;
|
||||
padding-left: 0px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.offcanvas .sidebar-menu li > a {
|
||||
padding: 12px 14px;
|
||||
display: block;
|
||||
clear: both;
|
||||
whitespace: nowrap;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.offcanvas .sidebar li > a& {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @btn-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: @navbar-default-border;
|
||||
.offcanvas .sidebar-menu {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar .form-group {
|
||||
|
|
@ -259,4 +238,5 @@
|
|||
.sidebar .user-menu img {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
background-color: @indicator-red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1px 5px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
#navbar-search {
|
||||
|
|
@ -70,15 +70,6 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
#sidebar-notification > li > a&,
|
||||
#navbar-notification > li > a& {
|
||||
&:hover .badge,
|
||||
&:focus .badge,
|
||||
&:active .badge {
|
||||
background-color: #D8DFE5;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar-search-results {
|
||||
left: auto;
|
||||
right: inherit;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,15 @@
|
|||
border-top: 0px;
|
||||
}
|
||||
|
||||
.layout-main-section-wrapper {
|
||||
margin-bottom: 60px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.layout-side-section {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.form-intro-area {
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -77,7 +86,3 @@
|
|||
.page-form .checkbox input {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.layout-main-section-wrapper {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
|
|
|||
194
frappe/public/less/sidebar.less
Normal file
194
frappe/public/less/sidebar.less
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
body[data-route=""] .main-menu,
|
||||
body[data-route="desk"] .main-menu {
|
||||
.desk-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-route^="List"] .main-menu {
|
||||
.list-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-padding {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
.sidebar-menu > li > a {
|
||||
.sidebar-padding;
|
||||
display: block;
|
||||
whitespace: nowrap;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: @navbar-default-border;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left .sidebar-menu > li > a& {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @btn-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-side-section {
|
||||
font-size: @text-medium;
|
||||
|
||||
.divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-menu > li > a {
|
||||
.underline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-side-section .sidebar-menu > li > a& {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.underline-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
text-transform: uppercase;
|
||||
color: @text-muted;
|
||||
font-size: @text-small;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// form sidebar
|
||||
.form-sidebar {
|
||||
.form-tags {
|
||||
.tag-area {
|
||||
margin-top: -3px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: @text-medium !important;
|
||||
color: @text-color !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tagit-new {
|
||||
clear: both;
|
||||
margin-top: 2px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.assignment-row a.close,
|
||||
.attachment-row a.close {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left .form-sidebar {
|
||||
.form-tags,
|
||||
.assignment-row,
|
||||
.modified-by,
|
||||
.created-by,
|
||||
.tags-label {
|
||||
.sidebar-padding;
|
||||
}
|
||||
|
||||
.assigned-to-label,
|
||||
.attachments-label,
|
||||
.tags-label {
|
||||
.sidebar-padding;
|
||||
padding-bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.assignment-row a.close {
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-side-section .form-sidebar {
|
||||
.attachment-row a.close {
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.modified-by,
|
||||
.created-by {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
|
||||
.assignment-row a.close,
|
||||
.attachment-row a.close {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// list sidebar
|
||||
|
||||
.layout-side-section .list-sidebar {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.sidebar-left .list-sidebar {
|
||||
.stat-label,
|
||||
.stat-no-records {
|
||||
.sidebar-padding;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-sidebar .list-tag-preview {
|
||||
padding: 5px !important;
|
||||
margin-left: 5px;
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.list-sidebar .list-tag-preview&,
|
||||
a.close {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
@light-bg: #fafbfc;
|
||||
@modal-backdrop-bg: #334143;
|
||||
@text-extra-muted: @border-color;
|
||||
@font-size-medium: 12px;
|
||||
@text-medium: 12px;
|
||||
@text-small: 10px;
|
||||
|
||||
@indicator-blue: #5e64ff;
|
||||
@indicator-red: #ff5858;
|
||||
|
|
@ -29,4 +30,3 @@
|
|||
@label-info-bg: #E8DDFF;
|
||||
@label-warning-bg: #FFE6BF;
|
||||
@label-danger-bg: #FFDCDC;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,18 +19,16 @@
|
|||
<body>
|
||||
<div class="splash">{% include "public/images/frappe.svg" %}</div>
|
||||
|
||||
<div class="desk-container">
|
||||
<div class="offcanvas">
|
||||
<div class="desk-main-section">
|
||||
<header></header>
|
||||
<div id="body_div"></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
<div class="desk-main-section-overlay"></div>
|
||||
<div class="sidebar sidebar-left visible-xs"></div>
|
||||
<div class="sidebar sidebar-right visible-xs">
|
||||
<ul class="sidebar-menu" id="sidebar-notification"></ul>
|
||||
</div>
|
||||
<div class="desk-container offcanvas">
|
||||
<div class="desk-main-section">
|
||||
<header></header>
|
||||
<div id="body_div"></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
<div class="modal-backdrop desk-main-section-overlay"></div>
|
||||
<div class="sidebar sidebar-left visible-xs visible-sm"></div>
|
||||
<div class="sidebar sidebar-right visible-xs visible-sm">
|
||||
<ul class="list-unstyled sidebar-menu" id="sidebar-notification"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue