[design] offcanvas sidebar for lists and forms

frappe/public/build.json

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

frappe/public/css/desk.css

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

frappe/public/css/form.css

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

frappe/public/css/list.css

@@ -72,9 +72,6 @@
 .doclist-row .progress {
   margin-top: 12px;
 }
-.stat-label {
-  margin-bottom: 5px;
-}
 .filterable {
   cursor: pointer;
 }

frappe/public/css/mixins.css

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

frappe/public/css/mobile.css

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

frappe/public/css/navbar.css

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

frappe/public/css/page.css

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

frappe/public/css/sidebar.css

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

frappe/public/js/frappe/form/footer/assign_to.js

@@ -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">&times;</a>\
-					<span class="h6">%(fullname)s</span>\
-				</div>', info))
-					.appendTo(this.$list);
+				$(repl('<li class="assignment-row">\
+					<a class="close" data-owner="%(owner)s">&times;</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;

frappe/public/js/frappe/form/footer/attachments.js

@@ -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">&times;</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">&times;</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")

frappe/public/js/frappe/form/footer/footer.js

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

frappe/public/js/frappe/form/footer/timeline.js

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

frappe/public/js/frappe/form/form_sidebar.html

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

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

@@ -2,32 +2,93 @@ frappe.provide("frappe.ui.form");
 frappe.ui.form.Sidebar = Class.extend({
 	init: function(opts) {
 		$.extend(this, opts);
-		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);
-		});
+		this.make();
 	},
-	add_user_action: function(label, click) {
-		return $('<a>').html(label).appendTo($('<li>')
-			.appendTo(this.$user_actions.removeClass("hide"))).on("click", click);
+
+	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();
+
 	},
-	clear_user_actions: function() {
-		this.$user_actions.empty().addClass("hide");
+
+	bind_events: function() {
+		var me = this;
+
+		// 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.wrapper.toggle(false);
+			this.sidebar.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));
+			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 class="user-action-row">')
+			.appendTo(this.user_actions.removeClass("hide"))).on("click", click);
+	},
+	clear_user_actions: function() {
+		this.user_actions.addClass("hide")
+		this.user_actions.find(".user-action-row").remove();
+	},
+});

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

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

frappe/public/js/frappe/list/list_sidebar.html

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

frappe/public/js/frappe/list/list_sidebar.js

@@ -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'));
-		});
-
-		$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));
+		var context = {
+			field: field,
+			stat: stat,
+			sum: sum,
+			label: label==='_user_tags' ? (__("Tags") + show_tags) : __(label),
+		};
 
-		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;
-		});
-	},
 });

frappe/public/js/frappe/list/list_sidebar_stat.html

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

frappe/public/js/frappe/ui/page.html

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

frappe/public/js/frappe/ui/page.js

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

frappe/public/js/frappe/ui/tags.js

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

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

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

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

@@ -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="#"

frappe/public/js/frappe/ui/toolbar/left_sidebar.html → frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html

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

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

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

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

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

frappe/public/js/frappe/views/module/moduleview.js

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

frappe/public/js/legacy/form.js

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

frappe/public/less/desk.less

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

frappe/public/less/form.less

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

frappe/public/less/list.less

@@ -92,10 +92,6 @@
 	margin-top: 12px;
 }
 
-.stat-label {
-	margin-bottom: 5px;
-}
-
 .filterable {
 	cursor: pointer;
 }

frappe/public/less/mixins.less

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

frappe/public/less/mobile.less

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

frappe/public/less/navbar.less

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

frappe/public/less/page.less

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

frappe/public/less/sidebar.less

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

frappe/public/less/variables.less

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

frappe/templates/pages/desk.html

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