[design] navbar height, started offcanvas sidebar

frappe/public/css/desk.css

@@ -6,9 +6,26 @@ body {
   height: 100%;
   margin: 0px;
 }
+html,
+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%;
+}
 a,
 .badge,
-.btn {
+.btn,
+.ui-menu .ui-menu-item {
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
@@ -63,7 +80,7 @@ a.form-link {
 }
 .link-btn {
   position: absolute;
-  top: 4px;
+  top: 2px;
   right: 4px;
   background-color: #f5f7fa;
   border-radius: 2px;
@@ -159,6 +176,32 @@ ul.linked-with-list li {
 .ui-autocomplete a {
   transition: none;
 }
+.ui-autocomplete .ui-menu-item a:hover,
+.ui-autocomplete .ui-menu-item a:focus,
+.ui-autocomplete .ui-menu-item a:active {
+  color: inherit;
+}
+.ui-widget-content {
+  border-radius: 0px 0px 4px 4px;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
+  border-color: #d1d8dd;
+  padding: 0px;
+}
+.ui-widget-content .ui-state-focus,
+.ui-widget-content .ui-state-hover {
+  background-color: #f0f4f7 !important;
+  color: #36414c !important;
+  text-shadow: none !important;
+}
+.ui-widget-content .ui-state-active {
+  background-color: #5e64ff !important;
+  color: #fff !important;
+  text-shadow: none !important;
+}
+.ui-menu .ui-menu-item {
+  padding: 7px;
+  font-size: 12px;
+}
 /* z-index hack */
 .ui-datepicker {
   z-index: 9999999 !important;

frappe/public/css/desktop.css

@@ -1,10 +1,11 @@
 #page-desktop {
-  position: absolute;
   min-width: 100%;
-  padding-top: 30px;
-  padding-bottom: 50px;
-  margin-bottom: -50px;
+  padding-top: 40px;
   border: 0px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
 }
 .case-wrapper {
   position: relative;

frappe/public/css/mobile.css

@@ -1,4 +1,4 @@
-@media (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .layout-main > div[class^="col-sm-"],
   .form-section {
     padding-left: 0px;
@@ -46,24 +46,95 @@
   .page-head {
     min-height: 1px;
   }
+  .nav > li > a {
+    padding: 10px 0px;
+  }
+  .toggle-navbar-new-comments {
+    padding: 8px 0px !important;
+  }
+  .navbar > .container > .navbar-header,
+  .navbar > .container > .navbar-left {
+    float: left;
+  }
+  .navbar > .container > .navbar-right {
+    float: right;
+  }
   .navbar-brand .octicon-home {
     margin-top: 4px;
   }
   .navbar .breadcrumb-divider {
-    margin-top: 14px;
+    margin-top: 3px !important;
+    margin-right: 3px;
   }
   #navbar-breadcrumbs {
     margin: 0px;
+    display: inline-block;
   }
   #navbar-breadcrumbs > li {
-    float: left;
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
   }
   #navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
     display: none;
   }
+  .navbar-nav {
+    margin: 0px;
+  }
   .mobile-module-icon {
     padding: 17px 15px 0px;
     margin-bottom: -15px;
   }
+  .offcanvas,
+  .page-head,
+  .sidebar-offcanvas-right,
+  .sidebar-offcanvas-left,
+  .navbar-fixed-top {
+    -webkit-transition: 0.25s;
+    -o-transition: 0.25s;
+    transition: 0.25s;
+  }
+  .offcanvas {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+  .offcanvas.active-left,
+  .offcanvas.active-left .page-head,
+  .offcanvas.active-left .navbar-fixed-top {
+    left: 75%;
+    /* 9 columns */
+    right: -25%;
+  }
+  .offcanvas.active-right,
+  .offcanvas.active-right .page-head,
+  .offcanvas.active-right .navbar-fixed-top {
+    right: 75%;
+    /* 9 columns */
+    left: -25%;
+  }
+  .offcanvas .sidebar-offcanvas {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 75%;
+    /* 9 columns */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .offcanvas .sidebar-offcanvas-right {
+    right: -75%;
+    /* 9 columns */
+  }
+  .offcanvas .sidebar-offcanvas-left {
+    left: -75%;
+    /* 9 columns */
+  }
+  .offcanvas.active-left .sidebar-offcanvas-left {
+    left: 0;
+  }
+  .offcanvas.active-right .sidebar-offcanvas-right {
+    right: 0;
+  }
 }

frappe/public/css/navbar.css

@@ -1,17 +1,20 @@
 .navbar .dropdown-toggle {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  line-height: 24px !important;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.navbar-fixed-top {
+  left: 0px;
+  right: 0px;
 }
 .navbar a {
   font-size: 12px;
   font-weight: bold;
 }
 .navbar .breadcrumb-divider {
-  margin-top: 15px;
+  margin-top: 10px;
 }
 .navbar .breadcrumb-divider i {
-  color: #c0c9d2;
+  color: #9d9d9d;
 }
 .navbar-icon-home {
   vertical-align: middle;
@@ -27,7 +30,6 @@
 .navbar-user-image {
   width: 24px;
   height: 24px;
-  margin-top: -2px;
   margin-right: 3px;
   border-radius: 4px;
 }
@@ -39,10 +41,9 @@
   background-color: #ff5858;
   color: #fff;
   text-align: center;
-  padding: 0px 5px;
+  padding: 1px 5px;
 }
 #navbar-search {
-  margin-top: 1px;
   width: 300px;
 }
 .navbar .navbar-search-icon {
@@ -60,9 +61,6 @@
 #navbar-notification > li > a:active .badge {
   background-color: #D8DFE5;
 }
-.navbar-form {
-  margin: 8px -15px;
-}
 #navbar-search-results {
   left: auto;
   right: inherit;

frappe/public/css/page.css

@@ -1,5 +1,5 @@
 .page-container {
-  margin-top: 48px;
+  margin-top: 40px;
 }
 .page-head {
   border-bottom: 1px solid #d1d8dd;

frappe/public/js/frappe/list/doclistview.js

@@ -89,7 +89,6 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	init_headers: function() {
-		console.log(this.listview.columns);
 		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"));
@@ -126,9 +125,10 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 			added && me.run();
 		});
 		this.$page.on("click", ".doclist-row", function(e) {
-			var checkbox = $(this).find("input[type='checkbox']");
-			var star = $(this).find(".icon-star");
-			if ((checkbox.length && e.target === checkbox.get(0)) || (star.length && e.target===star.get(0))) {
+			// don't open in case of checkbox, star, filterable
+			if ((e.target.class || "").indexOf("filterable")!==-1
+				|| (e.target.class || "").indexOf("icon-star")!==-1
+				|| e.target.type==="checkbox") {
 				return;
 			}
 
@@ -354,6 +354,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 		var me = this;
 		this.$page.on("click", ".star-action", function() {
 			frappe.ui.toggle_star($(this), me.doctype, $(this).attr("data-name"));
+			return false;
 		});
 	},
 

frappe/public/js/frappe/ui/toolbar/awesome_bar.js

@@ -54,9 +54,9 @@ frappe.search = {
 				return false;
 			}
 		}).data('ui-autocomplete')._renderItem = function(ul, d) {
-			var html = "<span class='small'>" + __(d.value) + "</span>";
+			var html = "<span>" + __(d.value) + "</span>";
 			if(d.description && d.value!==d.description) {
-				html += '<br><span class="small text-muted">' + __(d.description) + '</span>';
+				html += '<br><span class="text-muted">' + __(d.description) + '</span>';
 			}
 			return $('<li></li>')
 				.data('item.autocomplete', d)

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -1,63 +1,61 @@
 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 	<div class="container">
 		<div class="navbar-header">
-			<button type="button" class="navbar-toggle" data-toggle="collapse"
-				data-target=".navbar-responsive-collapse">
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-			</button>
-			<a class="navbar-brand" href="#">
-				<i class="octicon octicon-home visible-xs"></i>
-				<span class="hidden-xs">Home</span>
+			<a class="navbar-brand toggle-sidebar visible-xs">
+				<i class="octicon octicon-three-bars"></i>
 			</a>
+			<a class="navbar-brand navbar-home hidden-xs" href="#">Home</a>
 			<ul class="nav navbar-nav navbar-left" id="navbar-breadcrumbs">
 			</ul>
 		</div>
-		<div class="collapse navbar-collapse navbar-responsive-collapse">
+		<ul class="nav navbar-nav navbar-right visible-xs">
+			<li>
+				<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">
+					<span class="navbar-new-comments">0</span></a>
+			</li>
+		</ul>
+		<div class="hidden-xs">
 			<ul class="nav navbar-nav navbar-right">
 				<li class="dropdown">
 					<a class="dropdown-toggle" data-toggle="dropdown" href="#"
 						onclick="return false;">
-                    <img src="{%= frappe.user_info().image %}" class="navbar-user-image">
-                    <span>{%= frappe.user.full_name() %}</span>
-                    <b class="caret"></b></a>
-					<ul class="dropdown-menu" id="toolbar-user">
-                        <li><a href="#Form/User/{%= encodeURIComponent(user) %}">
-                            {%= __("My Settings") %}</a></li>
-        				<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
-                            {%= __("Reload") %}</a></li>
-            			<li><a href="/index" target="_blank">
-                            {%= __("View Website") %}</a></li>
-                        <li class="divider"></li>
-        				<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
-        					{%= __("About") %}</a></li>
-        				<li><a href="https://frappe.io" target="_blank" data-link="docs">
-        					{%= __("Documentation") %}</a></li>
-        				<li><a href="https://discuss.frappe.io" target="_blank">
-        					{%= __("Forums") %}</a></li>
-        				<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
-        					{%= __("Report an Issue") %}</a></li>
-                        <li class="divider"></li>
-            			<li><a href="#" onclick="return frappe.app.logout();">
-                            {%= __("Logout") %}</a></li>
-                    </ul>
+	                <img src="{%= frappe.user_info().image %}" class="navbar-user-image">
+	                <span>{%= frappe.user.full_name() %}</span>
+	                <b class="caret"></b></a>
+					<ul class="dropdown-menu" id="toolbar-user" role="menu">
+	                    <li><a href="#Form/User/{%= encodeURIComponent(user) %}">
+	                        {%= __("My Settings") %}</a></li>
+	    				<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
+	                        {%= __("Reload") %}</a></li>
+	        			<li><a href="/index" target="_blank">
+	                        {%= __("View Website") %}</a></li>
+	                    <li class="divider"></li>
+	    				<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
+	    					{%= __("About") %}</a></li>
+	    				<li><a href="https://frappe.io" target="_blank" data-link="docs">
+	    					{%= __("Documentation") %}</a></li>
+	    				<li><a href="https://discuss.frappe.io" target="_blank">
+	    					{%= __("Forums") %}</a></li>
+	    				<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
+	    					{%= __("Report an Issue") %}</a></li>
+	                    <li class="divider"></li>
+	        			<li><a href="#" onclick="return frappe.app.logout();">
+	                        {%= __("Logout") %}</a></li>
+	                </ul>
 				</li>
-                <li class="dropdown">
-        			<a class="dropdown-toggle" href="#" data-toggle="dropdown"
-        				title="{%= __("Unread Messages") %}"
-        				onclick="return false;"><span class="navbar-new-comments">0</span></a>
-        			<ul class="dropdown-menu" id="navbar-notification">
-        			</ul>
+	            <li class="dropdown">
+	    			<a class="dropdown-toggle" href="#" data-toggle="dropdown"
+	    				title="{%= __("Unread Messages") %}"
+	    				onclick="return false;"><span class="navbar-new-comments">0</span></a>
+	    			<ul class="dropdown-menu" id="navbar-notification" role="menu">
+	    			</ul>
 	            </li>
-            </ul>
+	        </ul>
 	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
 	          <div class="form-group form-group-sm">
 	            <input id="navbar-search" type="text" class="form-control"
 					placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
 				<span class="octicon octicon-search navbar-search-icon"></span>
-    			<ul class="dropdown-menu" id="navbar-search-results" role="menu"
-					aria-expanded="false" aria-labelledby="NavbarSearchResults"></ul>
 	          </div>
 	        </form>
 		</div>

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -4,7 +4,17 @@
 
 frappe.ui.toolbar.Toolbar = Class.extend({
 	init: function() {
-		$('header').append(frappe.render_template("navbar", {}));
+		var header = $('header').append(frappe.render_template("navbar", {}));
+
+		header.find(".toggle-sidebar").on("click", function() {
+			$(".offcanvas").toggleClass("active-left").removeClass("active-right");
+			return false;
+		});
+
+		header.find(".toggle-navbar-new-comments").on("click", function() {
+			$(".offcanvas").toggleClass("active-right").removeClass("active-left");
+			return false;
+		});
 
 		$(document).on("notification-update", function() {
 			frappe.ui.toolbar.update_notifications();

frappe/public/less/desk.less

@@ -10,10 +10,29 @@ body {
 	margin: 0px;
 }
 
+html,
+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%;
+}
+
 // transition
 a,
 .badge,
-.btn {
+.btn,
+.ui-menu .ui-menu-item {
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
 }
@@ -68,7 +87,7 @@ a.form-link {
 
 .link-btn {
 	position: absolute;
-	top: 4px;
+	top: 2px;
 	right: 4px;
 	background-color: @navbar-bg;
 	border-radius: 2px;
@@ -187,6 +206,40 @@ ul.linked-with-list li {
 	transition: none;
 }
 
+.ui-autocomplete .ui-menu-item a& {
+	&:hover,
+	&:focus,
+	&:active {
+		color: inherit;
+	}
+}
+
+.ui-widget-content {
+	// only rounded bottoms
+	border-radius: 0px 0px 4px 4px;
+	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
+	border-color: @border-color;
+	padding: 0px;
+}
+
+.ui-widget-content .ui-state-focus,
+.ui-widget-content .ui-state-hover {
+	background-color: @btn-bg !important;
+	color: @text-color !important;
+	text-shadow: none !important;
+}
+
+.ui-widget-content .ui-state-active {
+	background-color: @brand-primary !important;
+	color: #fff !important;
+	text-shadow: none !important;
+}
+
+.ui-menu .ui-menu-item {
+	padding: 7px;
+	font-size: @font-size-medium;
+}
+
 /* z-index hack */
 .ui-datepicker { z-index: 9999999 !important; }
 .ui-autocomplete {
@@ -237,7 +290,7 @@ ul.linked-with-list li {
 	left: 2px;
     display:inline-block;
     background:#ff5858;
-    font-size:12px;
+    font-size: @font-size-medium;
     line-height:20px;
     padding:0 8px;
     color:#fff;
@@ -316,7 +369,7 @@ kbd {
 .dropdown-menu {
 	min-width: 200px;
 	padding: 0px;
-	font-size: 12px;
+	font-size: @font-size-medium;
 
 	// only rounded bottoms
 	border-radius: 0px 0px 4px 4px;
@@ -325,5 +378,3 @@ kbd {
 .dropdown-menu .divider {
 	margin: 0px;
 }
-
-// autocomplete

frappe/public/less/desktop.less

@@ -4,12 +4,13 @@
 @icon-hover: #fff;
 
 #page-desktop {
-	position: absolute;
 	min-width: 100%;
-	padding-top: 30px;
-	padding-bottom: 50px;
-	margin-bottom: -50px;
+	padding-top: 40px;
 	border: 0px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	overflow: auto;
 }
 
 .case-wrapper {

frappe/public/less/mobile.less

@@ -1,4 +1,4 @@
-@media (max-width: 767px) {
+@media screen and (max-width: 767px) {
 	.layout-main > div[class^="col-sm-"],
 	.form-section {
 		padding-left: 0px;
@@ -59,21 +59,40 @@
 	}
 
 	// navbar & breadcrumbs
+	.nav > li > a {
+		padding: 10px 0px;
+	}
+
+	.toggle-navbar-new-comments {
+		padding: 8px 0px !important;
+	}
+
+	.navbar > .container > .navbar-header,
+	.navbar > .container > .navbar-left {
+		float: left;
+	}
+
+	.navbar > .container > .navbar-right {
+		float: right;
+	}
+
 	.navbar-brand .octicon-home {
 		margin-top: 4px;
 	}
 
 	.navbar .breadcrumb-divider {
-		margin-top: 14px;
+		margin-top: 3px !important;
+		margin-right: 3px;
 	}
 
 	#navbar-breadcrumbs {
 		margin: 0px;
+		display: inline-block;
 	}
 
 	#navbar-breadcrumbs > li {
-		float: left;
-		display: block;
+		display: inline-block;
+		vertical-align: middle;
 	}
 
 	// select all except last 2
@@ -81,8 +100,70 @@
 		display: none;
 	}
 
+	.navbar-nav {
+		margin: 0px;
+	}
+
 	.mobile-module-icon {
 		padding: 17px 15px 0px;
 		margin-bottom: -15px;
 	}
+
+	// Off Canvas
+	.offcanvas,
+	.page-head,
+	.sidebar-offcanvas-right,
+	.sidebar-offcanvas-left,
+	.navbar-fixed-top {
+		-webkit-transition: 0.25s;
+		-o-transition: 0.25s;
+		transition: 0.25s;
+	}
+
+	.offcanvas {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+
+	.offcanvas.active-left,
+	.offcanvas.active-left .page-head,
+	.offcanvas.active-left .navbar-fixed-top {
+		left: 75%; /* 9 columns */
+		right: -25%;
+	}
+
+	.offcanvas.active-right,
+	.offcanvas.active-right .page-head,
+	.offcanvas.active-right .navbar-fixed-top {
+		right: 75%; /* 9 columns */
+		left: -25%;
+	}
+
+	.offcanvas .sidebar-offcanvas {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		width: 75%; /* 9 columns */
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.offcanvas .sidebar-offcanvas-right {
+		right: -75%; /* 9 columns */
+	}
+
+	.offcanvas .sidebar-offcanvas-left {
+		left: -75%; /* 9 columns */
+	}
+
+	.offcanvas.active-left .sidebar-offcanvas-left {
+		left: 0;
+	}
+
+	.offcanvas.active-right .sidebar-offcanvas-right {
+		right: 0;
+	}
 }

frappe/public/less/navbar.less

@@ -1,9 +1,13 @@
 @import "variables.less";
 
 .navbar .dropdown-toggle {
-	padding-top: 12px;
-	padding-bottom: 12px;
-	line-height: 24px !important;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.navbar-fixed-top {
+	left: 0px;
+	right: 0px;
 }
 
 .navbar a {
@@ -12,11 +16,11 @@
 }
 
 .navbar .breadcrumb-divider {
-	margin-top: 15px;
+	margin-top: 10px;
 }
 
 .navbar .breadcrumb-divider i {
-	color: @breadcrumb-divider-color;
+	color: @navbar-inverse-color;
 }
 
 .navbar-icon-home {
@@ -34,7 +38,6 @@
 .navbar-user-image {
 	width: 24px;
 	height: 24px;
-	margin-top: -2px;
 	margin-right: 3px;
 	border-radius: 4px;
 }
@@ -47,11 +50,10 @@
 	background-color: @indicator-red;
 	color: #fff;
 	text-align: center;
-	padding: 0px 5px;
+	padding: 1px 5px;
 }
 
 #navbar-search {
-	margin-top: 1px;
 	width: 300px;
 }
 
@@ -75,10 +77,6 @@
 	}
 }
 
-.navbar-form {
-	margin: 8px -15px;
-}
-
 #navbar-search-results {
 	left: auto;
 	right: inherit;

frappe/public/less/page.less

@@ -1,7 +1,7 @@
 @import "variables.less";
 
 .page-container {
-	margin-top: 48px;
+	margin-top: 40px;
 }
 
 .page-head {

frappe/public/less/variables.less

@@ -8,6 +8,7 @@
 @navbar-bg:           #f5f7fa;
 @light-bg:            #fafbfc;
 @text-extra-muted:    @border-color;
+@font-size-medium:    12px;
 
 @indicator-blue:      #5e64ff;
 @indicator-red:       #ff5858;
@@ -17,5 +18,4 @@
 @indicator-darkgrey:  #b8c2cc;
 
 @navbar-default-color:     #6C7680;
-@breadcrumb-divider-color: #C0C9D2;
-
+@navbar-inverse-color:     #9D9D9D;

frappe/templates/includes/navbar.html

@@ -37,7 +37,7 @@
 								style="min-width: 20px; max-height: 20px; border-radius: 4px"/>
 								<b class="full-name"></b><b class="caret"></b>
 						</a>
-				        <ul class="dropdown-menu">
+				        <ul class="dropdown-menu" role="menu">
 							{%- for child in post_login -%}
 							<li {% if child.label %}data-label="{{ child.label }}" {% endif %}
 								{% if child.class %} class="{{ child.class }}" {% endif %}>

frappe/templates/includes/navbar_link.html

@@ -4,7 +4,7 @@
 	{%- if page.child_items -%}
 		<span class="caret"></span>
 	</a>
-		<ul class="dropdown-menu">
+		<ul class="dropdown-menu" role="menu">
 		{%- for child in page.child_items -%}
 			<li data-label='{{ child.label }}'>
 				<a {% if child.indent %} style="padding-left: {{((child.indent|int)+1)*15 }}px"{% endif %}

frappe/templates/pages/desk.html

@@ -14,10 +14,19 @@
 </head>
 <body>
 	<div class="splash">{% include "public/images/frappe.svg" %}</div>
-	<header></header>
-	<div id="body_div">
+
+	<div class="desk-container">
+		<div class="offcanvas">
+			<div class="sidebar-offcanvas sidebar-offcanvas-left visible-xs">something</div>
+			<div class="sidebar-offcanvas sidebar-offcanvas-right visible-xs">something</div>
+			<div class="desk-main-section">
+				<header></header>
+				<div id="body_div"></div>
+				<footer></footer>
+			</div>
+		</div>
 	</div>
-	<footer></footer>
+
 	<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
 	<script type="text/javascript">
 	window._version_number = "{{ build_version }}";