[design] mobile list views

frappe/public/css/desk.css

@@ -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;

frappe/public/css/list.css

@@ -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;

frappe/public/css/mixins.css

@@ -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;
-}

frappe/public/css/mobile.css

@@ -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;
+  }
+  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;
   }
-  .navbar .breadcrumb-divider {
-    margin-top: 12px !important;
-    margin-right: 3px;
+  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;
   }
 }

frappe/public/css/module.css

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

frappe/public/css/navbar.css

@@ -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;
+}

frappe/public/css/sidebar.css

@@ -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;

frappe/public/js/frappe/form/sidebar.js

@@ -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());
 		});

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

@@ -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() {

frappe/public/js/frappe/list/list_item_main_head.html

@@ -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>

frappe/public/js/frappe/list/list_item_row.html

@@ -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>

frappe/public/js/frappe/list/list_item_row_head.html

@@ -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>

frappe/public/js/frappe/list/listview.js

@@ -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) {

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

@@ -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") %}">

frappe/public/js/frappe/views/container.js

@@ -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);
 		}
 	}
 });

frappe/public/less/desk.less

@@ -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;

frappe/public/less/list.less

@@ -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;

frappe/public/less/mixins.less

@@ -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;
+}

frappe/public/less/mobile.less

@@ -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;
 	}
 
-	.grid-row-open {
-		top: 0;
-	}
+	// listviews
+	.doclist-row {
+		position: relative;
+		padding-right: 10px;
 
-	.page-title h1 {
-		margin-top: 10px;
-	}
+		.list-row-id {
+			left: 40px;
+			text-align: left;
+			margin-top: 3px;
+			// left: 83.33333333%;
+		}
 
-	.page-title .indicator {
-		display: block;
-		margin-top: -5px;
-		margin-bottom: 3px;
+		.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;
+			}
+		}
 	}
 
-	.page-head .sub-heading {
-		display: block;
-		position: absolute;
-		bottom: -30px;
-		right: 8px;
+}
+
+@media(max-width: 991px) {
+	.form-intro-area {
+		padding: 15px 0px;
 	}
 
-	.page-actions {
-		padding-top: 10px !important;
-		padding-bottom: 0px !important;
-		padding-left: 0px !important;
+	.grid-row-open {
+		top: 0;
 	}
 
-	.page-head {
-		min-height: 1px;
+	body[data-route^="Form"] {
+		.page-title h1 {
+			margin-top: 10px;
+		}
+
+		.page-title .indicator {
+			display: block;
+			margin-top: -5px;
+			margin-bottom: 3px;
+		}
+
+		.page-actions {
+			padding-top: 10px !important;
+			padding-bottom: 0px !important;
+			padding-left: 0px !important;
+		}
+
+		.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;
 		}
 	}
 }

frappe/public/less/module.less

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

frappe/public/less/navbar.less

@@ -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;
+}
+

frappe/public/less/sidebar.less

@@ -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 {

frappe/templates/pages/desk.html

@@ -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>