vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[design] mobile list views

Browse source
This commit is contained in:
Anand Doshi 2015-01-29 19:15:52 +05:30
parent a90e0fc711
commit a6cbecefba
23 changed files with 364 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frappe/public/css/desk.css
View file

@ -1,12 +1,3 @@
.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%;
}
@ -20,13 +11,6 @@ body {
overflow-x: hidden;
/* Prevent scroll on narrow devices */
}
.desk-main-section {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
overflow-y: auto;
}
.desk-main-section-overlay {
display: none;
cursor: pointer;

3
frappe/public/css/list.css
View file

@ -85,6 +85,9 @@
.list-row-right .modified {
margin-top: 3px;
}
.list-row-right .list-row-modified {
margin-top: 3px;
}
.list-row-right {
margin-top: -2px;
margin-bottom: -4px;

9
frappe/public/css/mixins.css
View file

@ -1,9 +0,0 @@
.underline {
color: inherit;
border-bottom: 1px solid transparent;
margin-bottom: 0.4em;
}
.underline-hover {
border-bottom: 1px solid #212a33;
color: #212a33;
}

120
frappe/public/css/mobile.css
View file

@ -6,13 +6,9 @@
padding-left: 0px !important;
padding-right: 0px !important;
}
}
@media (max-width: 991px) {
.layout-main-section {
border-color: transparent !important;
}
.form-intro-area {
padding: 15px 0px;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
.form-grid {
margin-left: -17px;
@ -21,30 +17,63 @@
border-right: none !important;
border-radius: none;
}
.doclist-row {
position: relative;
padding-right: 10px;
}
.doclist-row .list-row-id {
left: 40px;
text-align: left;
margin-top: 3px;
}
.doclist-row .list-row-indicator {
position: absolute;
right: 0px;
margin-top: 2px;
top: -19px;
}
.doclist-row .list-row-modified {
margin-right: -10px;
}
.doclist-row .list-row-right {
float: right;
}
.doclist-row .list-row-right.no-right-column {
position: absolute;
top: 0;
right: 10px;
left: -10px;
width: 100%;
}
.doclist-row .list-row-right.no-right-column .list-row-indicator {
top: 0;
}
}
@media (max-width: 991px) {
.form-intro-area {
padding: 15px 0px;
}
.grid-row-open {
top: 0;
}
.page-title h1 {
body[data-route^="Form"] .page-title h1 {
margin-top: 10px;
}
.page-title .indicator {
body[data-route^="Form"] .page-title .indicator {
display: block;
margin-top: -5px;
margin-bottom: 3px;
}
.page-head .sub-heading {
display: block;
position: absolute;
bottom: -30px;
right: 8px;
}
.page-actions {
body[data-route^="Form"] .page-actions {
padding-top: 10px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
.page-head {
min-height: 1px;
body[data-route^="Form"] .page-head .sub-heading {
display: block;
position: absolute;
bottom: -30px;
right: 8px;
}
.nav > li > a {
padding: 10px 0px;
@ -59,25 +88,47 @@
.navbar > .container > .navbar-right {
float: right;
}
.navbar-brand .octicon-home {
margin-top: 4px;
body[data-route^="Module"] .navbar .navbar-home {
display: inline-block !important;
padding-left: 0px;
margin-left: 0px;
}
.navbar .breadcrumb-divider {
margin-top: 12px !important;
margin-right: 3px;
body[data-route^="Module"] .navbar .navbar-home:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
display: inline-block;
speak: none;
color: #c0c9d2;
font-size: 14px;
transition: 0.2s;
position: relative;
top: 1px;
content: "\f053" !important;
margin-right: 5px !important;
}
body[data-route^="Module"] .navbar .navbar-home:hover:before,
body[data-route^="Module"] .navbar .navbar-home:focus:before,
body[data-route^="Module"] .navbar .navbar-home:active:before {
color: #36414c;
}
#navbar-breadcrumbs {
margin: 0px;
display: inline-block;
}
#navbar-breadcrumbs > li {
#navbar-breadcrumbs > li,
#navbar-breadcrumbs > li > a {
display: inline-block;
vertical-align: middle;
}
#navbar-breadcrumbs > li > a {
padding: 10px 0px 0px;
#navbar-breadcrumbs > li > a:before {
content: "\f053" !important;
margin-right: 5px !important;
}
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
display: none;
}
.navbar-nav {
@ -86,15 +137,21 @@
.offcanvas {
transition: 0.25s;
}
.offcanvas {
.desk-main-section-overlay {
bottom: 0;
position: fixed;
}
.desk-container,
.offcanvas,
.desk-main-section {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.desk-main-section-overlay {
bottom: 0;
.offcanvas.active-left,
.offcanvas.active-right {
position: fixed;
}
.offcanvas.active-left .desk-main-section-overlay,
@ -176,6 +233,9 @@
body[data-route^="Module"] .navbar-center {
display: block !important;
position: absolute;
top: 10px;
top: 11px;
left: 25%;
right: 25%;
text-align: center;
}
}

3
frappe/public/css/module.css
View file

@ -1,6 +1,3 @@
.module-section {
margin-bottom: 15px;
}
.module-item {
margin: 0px;
padding: 7px;

31
frappe/public/css/navbar.css
View file

@ -10,12 +10,6 @@
font-size: 12px;
font-weight: bold;
}
.navbar .breadcrumb-divider {
margin-top: 10px;
}
.navbar .breadcrumb-divider i {
color: #C0C9D2;
}
.navbar-icon-home {
vertical-align: middle;
}
@ -70,3 +64,28 @@
font-weight: bold;
color: #6c7680;
}
#navbar-breadcrumbs > li > a:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
display: inline-block;
speak: none;
color: #c0c9d2;
font-size: 14px;
transition: 0.2s;
content: "\f054";
margin-right: 15px;
position: relative;
top: 1px;
}
#navbar-breadcrumbs > li > a:hover:before,
#navbar-breadcrumbs > li > a:focus:before,
#navbar-breadcrumbs > li > a:active:before {
color: #36414c;
}
#navbar-breadcrumbs > li > a {
padding: 10px 15px 10px 0px;
}

17
frappe/public/css/sidebar.css
View file

@ -1,12 +1,3 @@
.underline {
color: inherit;
border-bottom: 1px solid transparent;
margin-bottom: 0.4em;
}
.underline-hover {
border-bottom: 1px solid #212a33;
color: #212a33;
}
.hide-form-sidebar .form-sidebar {
display: none !important;
}
@ -45,6 +36,9 @@ body[data-route^="Module"] .main-menu .form-sidebar {
background-color: #ebeff2;
width: 100%;
}
.offcanvas .sidebar .badge {
right: 15px !important;
}
.offcanvas .sidebar .sidebar-menu > li > a:hover,
.offcanvas .sidebar .sidebar-menu > li > a:focus,
.offcanvas .sidebar .sidebar-menu > li > a:active {
@ -52,6 +46,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
}
.layout-side-section {
font-size: 12px;
padding-right: 0px;
}
.layout-side-section .divider {
display: none !important;
@ -73,8 +68,8 @@ body[data-route^="Module"] .main-menu .form-sidebar {
}
.sidebar-menu .badge {
position: absolute;
right: 15px;
font-weight: normal;
right: 0px;
}
.sidebar-menu .octicon {
font-size: 12px;
@ -102,7 +97,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
}
.form-sidebar a.close {
position: absolute;
right: 15px;
right: 5px;
}
.form-sidebar .attachment-row a.close {
margin-top: -5px;

2
frappe/public/js/frappe/form/sidebar.js
View file

@ -30,6 +30,8 @@ frappe.ui.form.Sidebar = Class.extend({
// scroll to comments
this.comments.on("click", function() {
$(".offcanvas").removeClass("active-left active-right");
$(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top
- $(".navbar").height() - $(".page-head").height());
});

7
frappe/public/js/frappe/list/doclistview.js
View file

@ -89,9 +89,10 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
},
init_headers: function() {
var main = frappe.render_template("list_item_main_head", {columns: this.listview.columns});
$(frappe.render_template("list_item_row_head",
{main:main, list:this})).appendTo(this.page.main.find(".list-headers"));
var main = frappe.render_template("list_item_main_head",
{ columns: this.listview.columns, right_column: this.listview.settings.right_column });
$(frappe.render_template("list_item_row_head",{ main:main, list:this }))
.appendTo(this.page.main.find(".list-headers"));
},
init_listview: function() {

11
frappe/public/js/frappe/list/list_item_main_head.html
View file

@ -3,6 +3,17 @@
var col = columns[i]; total_cols += parseInt(col.colspan); %}
{% if (total_cols <= 12) { %}
<div class="col-sm-{%= col.colspan %} list-col text-ellipsis h6 text-muted
{% if(col.type==="Subject") {
if (right_column) { %}
col-xs-9
{% } else { %}
col-xs-12
{% } %}
{% } else if(right_column && col.fieldname===right_column) { %}
col-xs-3
{% } else { %}
hidden-xs
{% } %}
{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}">
<span class="list-value">{%= col.title || col.label || "" %}</span>
</div>

30
frappe/public/js/frappe/list/list_item_row.html
View file

@ -1,27 +1,33 @@
<div class="row doclist-row">
<div class="{% if (list.meta.title_field) { %}
col-sm-8 col-xs-7
<div class="{% if(right_column) { %} col-xs-12 {% } else { %} col-xs-10 {% } %}
{% if (list.meta.title_field) { %}
col-sm-8
{% } else { %}
col-sm-10 col-xs-9
col-sm-10
{% } %} list-row-left">
<!-- title + columns -->
{%= main %}
</div>
<!-- id -->
{% if (list.meta.title_field) { %}
<div class="list-col col-sm-2 col-xs-3 text-right text-ellipsis rtl list-row-id">
{% if (list.meta.title_field) {
var is_different = data.name !== data[list.meta.title_field];
%}
<div class="list-col col-sm-2 col-xs-10 text-right text-ellipsis rtl list-row-id
{% if (!is_different) { %} hidden-xs {% } %}">
{% if (is_different) { %}
<a class="text-muted list-value" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
{%= data.name %}</a>
{% } %}
</div>
{% } %}
<!-- comment -->
<div class="list-col col-sm-2 col-xs-3 text-right list-row-right">
<div class="visible-xs pull-right">{%= list.get_indicator_dot(data) %}</div>
<div class="pull-right">
<span class="text-muted" style="margin-right: 10px;">
{%= comment_when(data.modified, true) %}</span>
<div class="list-col col-sm-2 col-xs-2
{% if(!right_column) { %} no-right-column {% } %}
text-right list-row-right">
<div class="visible-xs pull-right list-row-indicator">{%= list.get_indicator_dot(data) %}</div>
<div class="hidden-xs pull-right">
{% if (data._assign_list.length) { %}
<span class="filterable"
data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
@ -34,5 +40,9 @@
{%= data._comments_list.length || 0 %}
</span>
</div>
<div class="pull-right list-row-modified">
<span class="text-muted" style="margin-right: 10px;">
{%= comment_when(data.modified, true) %}</span>
</div>
</div>
</div>

13
frappe/public/js/frappe/list/list_item_row_head.html
View file

@ -1,9 +1,10 @@
<div class="list-row list-row-head hidden-xs">
<div class="list-row list-row-head">
<div class="row doclist-row">
<div class="{% if (list.meta.title_field) { %}
col-sm-8 col-xs-7
<div class="col-xs-12
{% if (list.meta.title_field) { %}
col-sm-8
{% } else { %}
col-sm-10 col-xs-9
col-sm-10
{% } %} list-row-left">
<!-- title + columns -->
{%= main %}
@ -11,11 +12,11 @@
<!-- id -->
{% if (list.meta.title_field) { %}
<div class="list-col col-sm-2 col-xs-3 text-right">
<div class="list-col col-sm-2 text-right">
</div>
{% } %}
<!-- comment -->
<div class="list-col col-sm-2 col-xs-3 text-right list-row-right"></div>
<div class="list-col col-sm-2 hidden-xs text-right list-row-right"></div>
</div>
</div>

9
frappe/public/js/frappe/list/listview.js
View file

@ -209,7 +209,12 @@ frappe.views.ListView = Class.extend({
right_column: this.settings.right_column
});
$(frappe.render_template("list_item_row", {data: data, main: main, list: this})).appendTo(row);
$(frappe.render_template("list_item_row", {
data: data,
main: main,
list: this,
right_column: this.settings.right_column
})).appendTo(row);
this.render_tags(row, data);
@ -278,7 +283,7 @@ frappe.views.ListView = Class.extend({
data._name_encoded = encodeURIComponent(data.name);
data._submittable = frappe.model.is_submittable(this.doctype);
data._title = data[this.title_field || "name"];
data._title = data[this.title_field || "name"] || data["name"];
data._full_title = data._title;
if(data._title.length > 40) {

4
frappe/public/js/frappe/ui/toolbar/navbar.html
View file

@ -5,10 +5,10 @@
<i class="octicon octicon-three-bars"></i>
</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 class="nav navbar-nav" id="navbar-breadcrumbs">
</ul>
</div>
<div class="navbar-center" style="display: none; left: calc(50% - 42px);"></div>
<div class="navbar-center text-ellipsis" style="display: none;"></div>
<ul class="nav navbar-nav navbar-right visible-xs visible-sm">
<li>
<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">

20
frappe/public/js/frappe/views/container.js
View file

@ -81,13 +81,6 @@ frappe.views.Container = Class.extend({
var $breadcrumbs = $("#navbar-breadcrumbs").empty();
if(!breadcrumbs) return;
var divider = function() {
$('<li class="breadcrumb-divider">\
<i class="icon-chevron-right hidden-xs hidden-sm"></i>\
<i class="icon-chevron-left visible-xs visible-sm"></i>\
</li>').appendTo($breadcrumbs);
}
if(breadcrumbs.module && breadcrumbs.module != "Desk") {
if(in_list(["Core", "Email", "Custom", "Workflow"], breadcrumbs.module))
breadcrumbs.module = "Setup";
@ -96,17 +89,16 @@ frappe.views.Container = Class.extend({
label = module_info ? module_info.label : breadcrumbs.module;
if(module_info) {
divider();
// if(icon) {
// icon = '<span class="'+icon+' text-muted"></span> '
// }
$('<li><a href="#Module/'+ breadcrumbs.module +'">' + __(label) +'</a></li>').appendTo($breadcrumbs);
$(repl('<li><a href="#Module/%(module)s">%(label)s</a></li>',
{ module: breadcrumbs.module, label: __(label) }))
.appendTo($breadcrumbs);
}
}
if(breadcrumbs.doctype) {
divider();
$('<li><a href="#List/'+ breadcrumbs.doctype +'">'+ __(breadcrumbs.doctype) +'</a></li>').appendTo($breadcrumbs);
$(repl('<li><a href="#List/%(doctype)s">%(label)s</a></li>',
{doctype: breadcrumbs.doctype, label: __(breadcrumbs.doctype)}))
.appendTo($breadcrumbs);
}
}
});

8
frappe/public/less/desk.less
View file

@ -16,14 +16,6 @@ body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
.desk-main-section {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
overflow-y: auto;
}
.desk-main-section-overlay {
display: none;
cursor: pointer;

4
frappe/public/less/list.less
View file

@ -109,6 +109,10 @@
margin-top: 3px;
}
.list-row-right .list-row-modified {
margin-top: 3px;
}
.list-row-right {
margin-top: -2px;
margin-bottom: -4px;

30
frappe/public/less/mixins.less
View file

@ -1,12 +1,38 @@
@import "variables.less";
.underline {
.underline() {
color: inherit;
border-bottom: 1px solid transparent;
margin-bottom: 0.4em;
}
.underline-hover {
.underline-hover() {
border-bottom: 1px solid @grey-link-color;
color: @grey-link-color;
}
.breadcrumb-divider() {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
display: inline-block;
speak: none;
color: @breadcrumb-divider-color;
font-size: 14px;
transition: 0.2s;
position: relative;
top: 1px;
}
.breadcrumb-divider-left() {
content: "\f053" !important;
margin-right: 5px !important;
}
.breadcrumb-divider-right() {
content: "\f054";
margin-right: 15px;
}

155
frappe/public/less/mobile.less
View file

@ -1,4 +1,5 @@
@import "variables.less";
@import "mixins.less";
@media(max-width: 767px) {
.layout-main-section-wrapper {
@ -9,15 +10,10 @@
padding-left: 0px !important;
padding-right: 0px !important;
}
}
@media(max-width: 991px) {
.layout-main-section {
border-color: transparent !important;
}
.form-intro-area {
padding: 15px 0px;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
.form-grid {
@ -28,35 +24,80 @@
border-radius: none;
}
// listviews
.doclist-row {
position: relative;
padding-right: 10px;
.list-row-id {
left: 40px;
text-align: left;
margin-top: 3px;
// left: 83.33333333%;
}
.list-row-indicator {
position: absolute;
right: 0px;
margin-top: 2px;
top: -19px;
}
.list-row-modified {
margin-right: -10px;
}
.list-row-right {
float: right;
}
.list-row-right.no-right-column {
position: absolute;
top: 0;
right: 10px;
left: -10px;
width: 100%;
.list-row-indicator {
top: 0;
}
}
}
}
@media(max-width: 991px) {
.form-intro-area {
padding: 15px 0px;
}
.grid-row-open {
top: 0;
}
.page-title h1 {
margin-top: 10px;
}
body[data-route^="Form"] {
.page-title h1 {
margin-top: 10px;
}
.page-title .indicator {
display: block;
margin-top: -5px;
margin-bottom: 3px;
}
.page-title .indicator {
display: block;
margin-top: -5px;
margin-bottom: 3px;
}
.page-head .sub-heading {
display: block;
position: absolute;
bottom: -30px;
right: 8px;
}
.page-actions {
padding-top: 10px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
.page-actions {
padding-top: 10px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
.page-head {
min-height: 1px;
.page-head .sub-heading {
display: block;
position: absolute;
bottom: -30px;
right: 8px;
}
}
// navbar & breadcrumbs
@ -77,13 +118,22 @@
float: right;
}
.navbar-brand .octicon-home {
margin-top: 4px;
}
// show home in module page
body[data-route^="Module"] .navbar .navbar-home& {
display: inline-block !important;
padding-left: 0px;
margin-left: 0px;
.navbar .breadcrumb-divider {
margin-top: 12px !important;
margin-right: 3px;
&:before {
.breadcrumb-divider();
.breadcrumb-divider-left();
}
&:hover:before,
&:focus:before,
&:active:before {
color: @text-color;
}
}
#navbar-breadcrumbs {
@ -91,17 +141,18 @@
display: inline-block;
}
#navbar-breadcrumbs > li {
#navbar-breadcrumbs > li,
#navbar-breadcrumbs > li > a {
display: inline-block;
vertical-align: middle;
}
#navbar-breadcrumbs > li > a {
padding: 10px 0px 0px;
#navbar-breadcrumbs > li > a:before {
.breadcrumb-divider-left();
}
// select all except last 2
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
display: none;
}
@ -113,16 +164,15 @@
.offcanvas {
transition: 0.25s;
}
// .offcanvas,
// .page-head,
// .sidebar-right,
// .sidebar-left,
// .navbar-fixed-top,
// .desk-main-section-overlay {
// transition: 0.25s;
// }
.offcanvas {
.desk-main-section-overlay {
bottom: 0;
position: fixed;
}
.desk-container,
.offcanvas,
.desk-main-section {
position: absolute;
left: 0;
right: 0;
@ -130,8 +180,8 @@
bottom: 0;
}
.desk-main-section-overlay {
bottom: 0;
.offcanvas.active-left,
.offcanvas.active-right {
position: fixed;
}
@ -232,7 +282,10 @@
.navbar-center {
display: block !important;
position: absolute;
top: 10px;
top: 11px;
left: 25%;
right: 25%;
text-align: center;
}
}
}

4
frappe/public/less/module.less
View file

@ -1,9 +1,5 @@
@import "variables.less";
.module-section {
margin-bottom: 15px;
}
.module-item {
margin: 0px;
padding: 7px;

31
frappe/public/less/navbar.less
View file

@ -1,4 +1,5 @@
@import "variables.less";
@import "mixins.less";
.navbar .dropdown-toggle {
padding-top: 8px;
@ -15,13 +16,13 @@
font-weight: bold;
}
.navbar .breadcrumb-divider {
margin-top: 10px;
}
// .navbar .breadcrumb-divider {
// margin-top: 10px;
// }
.navbar .breadcrumb-divider i {
color: #C0C9D2;
}
// .navbar .breadcrumb-divider i {
// color: #C0C9D2;
// }
.navbar-icon-home {
vertical-align: middle;
@ -84,3 +85,21 @@
font-weight: bold;
color: @navbar-default-color;
}
#navbar-breadcrumbs > li > a:before {
.breadcrumb-divider();
.breadcrumb-divider-right();
}
#navbar-breadcrumbs > li > a& {
&:hover:before,
&:focus:before,
&:active:before {
color: @text-color;
}
}
#navbar-breadcrumbs > li > a {
padding: 10px 15px 10px 0px;
}

10
frappe/public/less/sidebar.less
View file

@ -50,6 +50,10 @@ body[data-route^="Module"] .main-menu {
background-color: @navbar-default-border;
width: 100%;
}
.badge {
right: 15px !important;
}
}
.offcanvas .sidebar .sidebar-menu > li > a& {
@ -63,6 +67,8 @@ body[data-route^="Module"] .main-menu {
.layout-side-section {
font-size: @text-medium;
padding-right: 0px;
.divider {
display: none !important;
}
@ -88,8 +94,8 @@ body[data-route^="Module"] .main-menu {
.sidebar-menu {
.badge {
position: absolute;
right: 15px;
font-weight: normal;
right: 0px;
}
.octicon {
@ -127,7 +133,7 @@ body[data-route^="Module"] .main-menu {
a.close {
position: absolute;
right: 15px;
right: 5px;
}
.attachment-row a.close {

23
frappe/templates/pages/desk.html
View file

@ -18,17 +18,18 @@
</head>
<body>
<div class="splash">{% include "public/images/frappe.svg" %}</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 class="desk-container">
<div class="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>
</div>