From ccc2de5773c212005fa675f4ec34e136d7528655 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 6 Jul 2016 17:52:48 +0530
Subject: [PATCH 1/7] replace offcanvas with overlay list-sidebar

---
 frappe/public/css/sidebar.css                 | 53 +++++++++++++++++
 frappe/public/js/frappe/list/list_sidebar.js  | 13 ++++-
 frappe/public/js/frappe/ui/toolbar/toolbar.js |  8 ++-
 frappe/public/less/sidebar.less               | 57 +++++++++++++++++++
 4 files changed, 129 insertions(+), 2 deletions(-)

diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index d165ad7073..d551eb74a3 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -249,6 +249,59 @@ body[data-route^="Module"] .main-menu .form-sidebar {
 .layout-side-section .list-sidebar {
   margin-top: -15px;
 }
+@media (max-width: 991px) {
+  .layout-side-section .list-sidebar {
+    margin-top: 0;
+    position: fixed;
+    background: white;
+    top: 0;
+    left: 0;
+    transform: translateX(-110%);
+    z-index: 9999;
+    box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
+    height: 100%;
+    width: 40%;
+    padding: 25px;
+    display: block !important;
+    transition: transform 300ms ease-in-out;
+  }
+  .layout-side-section .list-sidebar i.octicon-x {
+    margin: -12px;
+    padding: 12px;
+  }
+  .layout-side-section .list-sidebar div.close-sidebar {
+    opacity: 0;
+    transition: opacity 300ms ease 200ms;
+  }
+  .layout-side-section .list-sidebar.opened {
+    transform: translateX(0);
+  }
+  .layout-side-section .list-sidebar.opened div.close-sidebar {
+    opacity: 0.5;
+    background: #000;
+    position: fixed;
+    top: 0;
+    right: -150%;
+    width: 150%;
+    height: 100%;
+    z-index: 9998;
+  }
+  .layout-side-section .list-sidebar .reports-dropdown {
+    margin: 10px 0;
+  }
+  .layout-side-section .list-sidebar .reports-dropdown li:not(.divider) {
+    padding: 10px 0;
+  }
+}
+@media (max-width: 767px) {
+  .layout-side-section .list-sidebar {
+    width: 70%;
+  }
+  .layout-side-section .list-sidebar.opened div.close-sidebar {
+    right: -42.857%;
+    width: 42.857%;
+  }
+}
 .sidebar-left .list-sidebar .stat-label,
 .sidebar-left .list-sidebar .stat-no-records {
   padding: 12px 14px;
diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js
index 0d137e7d6e..6a84925d33 100644
--- a/frappe/public/js/frappe/list/list_sidebar.js
+++ b/frappe/public/js/frappe/list/list_sidebar.js
@@ -20,9 +20,20 @@ frappe.views.ListSidebar = Class.extend({
 
 		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)
+			.html('<i class="octicon octicon-x close-sidebar visible-xs visible-sm pull-right"></i>')
+			.append('<div class="close-sidebar visible-xs visible-sm"></div>')
+			.append(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
+		this.page_sidebar.find(".close-sidebar").click(function() {
+			var list_sidebar = $('.layout-side-section .list-sidebar');
+			list_sidebar.removeClass('opened');
+			list_sidebar.find('.dropdown-toggle').removeClass('text-muted');
+			setTimeout(function() {
+				list_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
+			}, 300);
+		});
+
 		this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
 
 		this.setup_reports();
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 29cd587e55..899983adc3 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -10,7 +10,13 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 		}));
 		var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
 
-		header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		header.find(".toggle-sidebar").on("click", function () {
+			var list_sidebar = $('.layout-side-section .list-sidebar');
+			list_sidebar.addClass('opened');
+			list_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
+			list_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
 			$(".offcanvas").toggleClass("active-right").removeClass("active-left");
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 5b94d0bb45..86394588d6 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -255,6 +255,63 @@ body[data-route^="Module"] .main-menu {
 	margin-top: -15px;
 }
 
+.layout-side-section .list-sidebar {
+	@media (max-width: 991px) {
+		margin-top: 0;
+		position: fixed;
+		background: white;
+		top: 0;
+		left: 0;
+		transform: translateX(-110%);
+		z-index: 9999;
+		box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
+		height: 100%;
+		width: 40%;
+		padding: 25px;
+		display: block !important;
+		transition: transform 300ms ease-in-out;
+
+		i.octicon-x {
+			margin: -12px;
+			padding: 12px;
+		}
+
+		div.close-sidebar {
+			opacity: 0;
+			transition: opacity 300ms ease 200ms;
+		}
+
+		&.opened {
+			transform: translateX(0);
+			div.close-sidebar {
+				opacity: 0.5;
+				background: #000;
+				position: fixed;
+				top: 0;
+				right: -150%;
+				width: 150%;
+				height: 100%;
+				z-index: 9998;
+			}
+		}
+
+		.reports-dropdown {
+			margin: 10px 0;
+
+			li:not(.divider) {
+				padding: 10px 0;
+			}
+		}
+	}
+	@media (max-width: 767px) {
+		width: 70%;
+		&.opened div.close-sidebar {
+			right: -42.857%;
+			width: 42.857%;
+		}
+	}
+}
+
 .sidebar-left .list-sidebar {
 	.stat-label,
 	.stat-no-records {

From bd6001eb3830ef038823d3666d8a8738c0e31342 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 11 Jul 2016 16:21:20 +0530
Subject: [PATCH 2/7] added search in mobile navbar

---
 frappe/public/css/desk.css                    |  1 +
 frappe/public/css/docs.css                    | 30 ++++++++++++++++
 frappe/public/css/navbar.css                  | 30 ++++++++++++++++
 .../js/frappe/ui/toolbar/awesome_bar.js       |  2 +-
 .../public/js/frappe/ui/toolbar/navbar.html   | 27 ++++++++++++---
 frappe/public/less/desk.less                  |  1 +
 frappe/public/less/navbar.less                | 34 +++++++++++++++++++
 7 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css
index 837388cc1d..16bcfb4198 100644
--- a/frappe/public/css/desk.css
+++ b/frappe/public/css/desk.css
@@ -358,6 +358,7 @@ fieldset[disabled] .form-control {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
+  z-index: 1041;
 }
 .ui-autocomplete a {
   transition: none;
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index b354818a3e..478fe7c1f0 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -161,6 +161,36 @@ body {
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+    width: 50px;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+#searchModal .modal-dialog,
+#searchModal .modal-content {
+  background: transparent;
+}
+#searchModal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#searchModal .modal-header form,
+#searchModal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#searchModal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
   margin-left: 15px;
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index 388f22ea83..902ab0aee7 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -27,6 +27,36 @@
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+    width: 50px;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+#searchModal .modal-dialog,
+#searchModal .modal-content {
+  background: transparent;
+}
+#searchModal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#searchModal .modal-header form,
+#searchModal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#searchModal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
   margin-left: 15px;
diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
index 5e729ab504..875a64dfd1 100644
--- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
+++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
@@ -79,7 +79,7 @@ frappe.search = {
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;
 
-		$("#sidebar-search")
+		$("#modal-search")
 			.on("focus", open_recent)
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 12fc282e68..9bdc3417ca 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -1,6 +1,6 @@
 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
 	<div class="container">
-		<div class="navbar-header">
+		<div class="navbar-header navbar-desk">
 			<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
 				<i class="octicon octicon-three-bars"></i>
 			</a>
@@ -11,15 +11,34 @@
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
 
 		<ul class="nav navbar-nav navbar-right">
-			<div class="dropdown dropdown-navbar-new-comments">
+			<li class="visible-xs visible-sm">
+				<a href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+			</li>
+			<li class="dropdown dropdown-navbar-new-comments">
 				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-					<span class="navbar-new-comments">0</span></a>
+					<span class="navbar-new-comments">0</span>
 				</a>
 				<ul class="dropdown-menu" id="dropdown-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
 				</ul>
-			</div>
+			</li>
 		</ul>
 
+		<div id="searchModal" class="modal fade" role="dialog">
+			<div class="modal-dialog" style="height: 50px;">
+				<div class="modal-content">
+					<div class="modal-header">
+						<form role="search" onsubmit="return false;">
+							<div class="input-group" style="width: 100%">
+								<input id="modal-search" type="text" class="form-control"
+								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+							</div>
+						</form>
+						<button type="button" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<div class="hidden-xs hidden-sm">
 			<ul class="nav navbar-nav navbar-right">
 				<li class="dropdown">
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index a2debad4c6..82b39b38f1 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -167,6 +167,7 @@ textarea.form-control {
 	max-height: 200px;
 	overflow-y: auto;
 	overflow-x: hidden;
+	z-index: 1041;
 }
 
 .ui-autocomplete a {
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index f9e19659d0..917398b2c7 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -35,6 +35,40 @@
 	border-radius: 4px;
 }
 
+@media (max-width: 991px) {
+	.navbar-desk {
+		width: 60% !important;
+
+		& ~ ul > li {
+			float: left;
+			width: 50px;
+		}
+	}
+	.dropdown-navbar-new-comments > a {
+		padding: 8px 0 !important;
+		margin-left: 0 !important;
+	}
+}
+
+#searchModal {
+	.modal-dialog, .modal-content {
+		background: transparent;
+	}
+	.modal-header {
+		background: #fff;
+		display: table;
+		width: 100%;
+
+		form, button {
+			display: table-cell;
+			vertical-align: middle;
+		}
+		button {
+			height: 30px;
+		}
+	}
+}
+
 .dropdown-navbar-new-comments {
 	& > a {
 		border: 0;

From 629631c36c13bee0239e57ccf052abaef1477a85 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 13 Jul 2016 14:52:46 +0530
Subject: [PATCH 3/7] overlay sidebar for list and form view

---
 frappe/public/css/sidebar.css                 | 48 +++++-----
 frappe/public/js/frappe/form/sidebar.js       |  2 +-
 frappe/public/js/frappe/list/list_sidebar.js  | 15 +---
 frappe/public/js/frappe/ui/toolbar/toolbar.js | 25 +++++-
 frappe/public/less/sidebar.less               | 88 +++++++++----------
 5 files changed, 88 insertions(+), 90 deletions(-)

diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index d551eb74a3..2a35f0497b 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -250,8 +250,8 @@ body[data-route^="Module"] .main-menu .form-sidebar {
   margin-top: -15px;
 }
 @media (max-width: 991px) {
-  .layout-side-section .list-sidebar {
-    margin-top: 0;
+  .layout-side-section .overlay-sidebar {
+    margin-top: 0 !important;
     position: fixed;
     background: white;
     top: 0;
@@ -265,41 +265,35 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     display: block !important;
     transition: transform 300ms ease-in-out;
   }
-  .layout-side-section .list-sidebar i.octicon-x {
-    margin: -12px;
-    padding: 12px;
-  }
-  .layout-side-section .list-sidebar div.close-sidebar {
-    opacity: 0;
-    transition: opacity 300ms ease 200ms;
-  }
-  .layout-side-section .list-sidebar.opened {
+  .layout-side-section .overlay-sidebar.opened {
     transform: translateX(0);
+    overflow-y: auto;
   }
-  .layout-side-section .list-sidebar.opened div.close-sidebar {
-    opacity: 0.5;
-    background: #000;
-    position: fixed;
-    top: 0;
-    right: -150%;
-    width: 150%;
-    height: 100%;
-    z-index: 9998;
-  }
-  .layout-side-section .list-sidebar .reports-dropdown {
+  .layout-side-section .overlay-sidebar .reports-dropdown {
     margin: 10px 0;
   }
-  .layout-side-section .list-sidebar .reports-dropdown li:not(.divider) {
+  .layout-side-section .overlay-sidebar .reports-dropdown li:not(.divider) {
     padding: 10px 0;
   }
 }
 @media (max-width: 767px) {
-  .layout-side-section .list-sidebar {
+  .layout-side-section .overlay-sidebar {
     width: 70%;
   }
-  .layout-side-section .list-sidebar.opened div.close-sidebar {
-    right: -42.857%;
-    width: 42.857%;
+}
+.layout-side-section div.close-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  opacity: 0.3;
+  background: #000;
+  z-index: 1041;
+  height: 100%;
+  width: 100%;
+}
+@media (max-width: 991px) {
+  .layout-side-section .sidebar-menu {
+    margin: 0;
   }
 }
 .sidebar-left .list-sidebar .stat-label,
diff --git a/frappe/public/js/frappe/form/sidebar.js b/frappe/public/js/frappe/form/sidebar.js
index a3ccd8c74e..d0ad1c8f7d 100644
--- a/frappe/public/js/frappe/form/sidebar.js
+++ b/frappe/public/js/frappe/form/sidebar.js
@@ -8,7 +8,7 @@ frappe.ui.form.Sidebar = Class.extend({
 		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>')
+		this.page_sidebar = $('<div class="form-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js
index 6a84925d33..aa353fedef 100644
--- a/frappe/public/js/frappe/list/list_sidebar.js
+++ b/frappe/public/js/frappe/list/list_sidebar.js
@@ -19,21 +19,10 @@ frappe.views.ListSidebar = Class.extend({
 		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('<i class="octicon octicon-x close-sidebar visible-xs visible-sm pull-right"></i>')
-			.append('<div class="close-sidebar visible-xs visible-sm"></div>')
-			.append(sidebar_content)
+		this.page_sidebar = $('<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
+			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
-		this.page_sidebar.find(".close-sidebar").click(function() {
-			var list_sidebar = $('.layout-side-section .list-sidebar');
-			list_sidebar.removeClass('opened');
-			list_sidebar.find('.dropdown-toggle').removeClass('text-muted');
-			setTimeout(function() {
-				list_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
-			}, 300);
-		});
-
 		this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
 
 		this.setup_reports();
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 899983adc3..ee543aeb22 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -12,10 +12,27 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 
 		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
 		header.find(".toggle-sidebar").on("click", function () {
-			var list_sidebar = $('.layout-side-section .list-sidebar');
-			list_sidebar.addClass('opened');
-			list_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
-			list_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+			var layout_side_section = $('.layout-side-section');
+			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
+			overlay_sidebar.addClass('opened');
+			overlay_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
+			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+
+			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
+
+			var offcanvas_container = $('body').find('.offcanvas-container');
+			offcanvas_container.css("overflow", "hidden");
+
+			var close_sidebar = layout_side_section.find(".close-sidebar");
+			close_sidebar.click(function() {
+				overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
+				offcanvas_container.css("overflow", "auto");
+
+				close_sidebar.fadeOut(function() {
+					overlay_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
+					close_sidebar.remove();
+				});
+			});
 		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 86394588d6..65d25397a4 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -255,59 +255,57 @@ body[data-route^="Module"] .main-menu {
 	margin-top: -15px;
 }
 
-.layout-side-section .list-sidebar {
-	@media (max-width: 991px) {
-		margin-top: 0;
-		position: fixed;
-		background: white;
-		top: 0;
-		left: 0;
-		transform: translateX(-110%);
-		z-index: 9999;
-		box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
-		height: 100%;
-		width: 40%;
-		padding: 25px;
-		display: block !important;
-		transition: transform 300ms ease-in-out;
+.layout-side-section {
 
-		i.octicon-x {
-			margin: -12px;
-			padding: 12px;
-		}
+	.overlay-sidebar {
+		@media (max-width: 991px) {
+			margin-top: 0 !important;
+			position: fixed;
+			background: white;
+			top: 0;
+			left: 0;
+			transform: translateX(-110%);
+			z-index: 9999;
+			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
+			height: 100%;
+			width: 40%;
+			padding: 25px;
+			display: block !important;
+			transition: transform 300ms ease-in-out;
+
+			&.opened {
+				transform: translateX(0);
+				overflow-y: auto;
+			}
 
-		div.close-sidebar {
-			opacity: 0;
-			transition: opacity 300ms ease 200ms;
-		}
+			.reports-dropdown {
+				margin: 10px 0;
 
-		&.opened {
-			transform: translateX(0);
-			div.close-sidebar {
-				opacity: 0.5;
-				background: #000;
-				position: fixed;
-				top: 0;
-				right: -150%;
-				width: 150%;
-				height: 100%;
-				z-index: 9998;
+				li:not(.divider) {
+					padding: 10px 0;
+				}
 			}
 		}
 
-		.reports-dropdown {
-			margin: 10px 0;
-
-			li:not(.divider) {
-				padding: 10px 0;
-			}
+		@media (max-width: 767px) {
+			width: 70%;
 		}
 	}
-	@media (max-width: 767px) {
-		width: 70%;
-		&.opened div.close-sidebar {
-			right: -42.857%;
-			width: 42.857%;
+
+	div.close-sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		opacity: 0.3;
+		background: #000;
+		z-index: 1041;
+		height: 100%;
+		width: 100%;
+	}
+
+	.sidebar-menu {
+		@media (max-width: 991px) {
+			margin: 0;
 		}
 	}
 }

From 52dd274b1c0d4ad1dd6b86668fcd81b78b235013 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 13 Jul 2016 15:59:07 +0530
Subject: [PATCH 4/7] user dropdown in mobile navbar

---
 frappe/public/css/docs.css                    | 17 +++--
 frappe/public/css/navbar.css                  | 17 +++--
 .../public/js/frappe/ui/toolbar/navbar.html   | 68 +++++++++----------
 frappe/public/less/navbar.less                | 15 ++--
 4 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index 478fe7c1f0..ac6ad24a15 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -163,11 +163,17 @@ body {
 }
 @media (max-width: 991px) {
   .navbar-desk {
-    width: 60% !important;
+    width: 40% !important;
   }
   .navbar-desk ~ ul > li {
     float: left;
-    width: 50px;
+  }
+  .navbar-desk ~ ul > li a {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+  .navbar-desk ~ ul > li a .avatar {
+    margin-right: 0;
   }
   .dropdown-navbar-new-comments > a {
     padding: 8px 0 !important;
@@ -193,13 +199,13 @@ body {
 }
 .dropdown-navbar-new-comments > a {
   border: 0;
-  margin-left: 15px;
 }
 .dropdown-navbar-new-comments .dropdown-menu {
   margin-top: 0;
 }
 @media (max-width: 767px) {
-  .dropdown-navbar-new-comments.open .dropdown-menu {
+  .dropdown-navbar-new-comments.open .dropdown-menu,
+  .dropdown-navbar-user.open .dropdown-menu {
     position: absolute;
     border-top: 1px solid rgba(0, 0, 0, 0.14902);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -207,7 +213,8 @@ body {
     right: 0;
     left: auto;
   }
-  .dropdown-navbar-new-comments.open .dropdown-menu > li > a {
+  .dropdown-navbar-new-comments.open .dropdown-menu > li > a,
+  .dropdown-navbar-user.open .dropdown-menu > li > a {
     padding: 12px;
   }
 }
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index 902ab0aee7..a91403f1b9 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -29,11 +29,17 @@
 }
 @media (max-width: 991px) {
   .navbar-desk {
-    width: 60% !important;
+    width: 40% !important;
   }
   .navbar-desk ~ ul > li {
     float: left;
-    width: 50px;
+  }
+  .navbar-desk ~ ul > li a {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+  .navbar-desk ~ ul > li a .avatar {
+    margin-right: 0;
   }
   .dropdown-navbar-new-comments > a {
     padding: 8px 0 !important;
@@ -59,13 +65,13 @@
 }
 .dropdown-navbar-new-comments > a {
   border: 0;
-  margin-left: 15px;
 }
 .dropdown-navbar-new-comments .dropdown-menu {
   margin-top: 0;
 }
 @media (max-width: 767px) {
-  .dropdown-navbar-new-comments.open .dropdown-menu {
+  .dropdown-navbar-new-comments.open .dropdown-menu,
+  .dropdown-navbar-user.open .dropdown-menu {
     position: absolute;
     border-top: 1px solid rgba(0, 0, 0, 0.14902);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -73,7 +79,8 @@
     right: 0;
     left: auto;
   }
-  .dropdown-navbar-new-comments.open .dropdown-menu > li > a {
+  .dropdown-navbar-new-comments.open .dropdown-menu > li > a,
+  .dropdown-navbar-user.open .dropdown-menu > li > a {
     padding: 12px;
   }
 }
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 9bdc3417ca..57d166be28 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -11,8 +11,38 @@
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
 
 		<ul class="nav navbar-nav navbar-right">
-			<li class="visible-xs visible-sm">
-				<a href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+			<li class="visible-xs">
+				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+			</li>
+			<li class="dropdown dropdown-navbar-user">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
+					onclick="return false;">
+				{{ avatar }}
+                <span class="text-ellipsis toolbar-user-fullname hidden-xs hidden-sm">
+					{%= frappe.user.full_name() %}</span>
+                <b class="caret hidden-xs hidden-sm"></b></a>
+				<ul class="dropdown-menu" id="toolbar-user" role="menu">
+					<li class="navbar-set-desktop-icons"><a href="#modules_setup">
+					    {%= __("Set Desktop Icons") %}</a></li>
+					<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.erpnext.com" target="_blank">
+					{%= __("Forums") %}</a></li>
+					<li><a href="https://github.com/frappe/frappe/issues" target="_blank" data-link="issues">
+						{%= __("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 dropdown-navbar-new-comments">
 				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -39,39 +69,7 @@
 			</div>
 		</div>
 
-		<div class="hidden-xs hidden-sm">
-			<ul class="nav navbar-nav navbar-right">
-				<li class="dropdown">
-					<a class="dropdown-toggle" data-toggle="dropdown" href="#"
-						onclick="return false;">
-					{{ avatar }}
-	                <span class="text-ellipsis toolbar-user-fullname">
-						{%= frappe.user.full_name() %}</span>
-	                <b class="caret"></b></a>
-					<ul class="dropdown-menu" id="toolbar-user" role="menu">
-	                    <li class="navbar-set-desktop-icons"><a href="#modules_setup">
-	                        {%= __("Set Desktop Icons") %}</a></li>
-	                    <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.erpnext.com" target="_blank">
-	    					{%= __("Forums") %}</a></li>
-	    				<li><a href="https://github.com/frappe/frappe/issues" target="_blank" data-link="issues">
-	    					{%= __("Report an Issue") %}</a></li>
-	                    <li class="divider"></li>
-	        			<li><a href="#" onclick="return frappe.app.logout();">
-	                        {%= __("Logout") %}</a></li>
-	                </ul>
-				</li>
-	        </ul>
+		<div class="hidden-xs">
 	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
 	          <div class="form-group form-group-sm ui-front">
 	            <input id="navbar-search" type="text" class="form-control"
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index 917398b2c7..455c12dffe 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -37,11 +37,18 @@
 
 @media (max-width: 991px) {
 	.navbar-desk {
-		width: 60% !important;
+		width: 40% !important;
 
 		& ~ ul > li {
 			float: left;
-			width: 50px;
+			a {
+				padding-left: 10px !important;
+				padding-right: 10px !important;
+
+				.avatar {
+					margin-right: 0;
+				}
+			}
 		}
 	}
 	.dropdown-navbar-new-comments > a {
@@ -72,7 +79,6 @@
 .dropdown-navbar-new-comments {
 	& > a {
 		border: 0;
-		margin-left: 15px;
 	}
 	.dropdown-menu {
 		margin-top: 0;
@@ -80,7 +86,8 @@
 }
 
 @media (max-width: 767px) {
-	.dropdown-navbar-new-comments.open .dropdown-menu {
+	.dropdown-navbar-new-comments.open .dropdown-menu,
+	.dropdown-navbar-user.open .dropdown-menu {
 		position: absolute;
 		border-top: 1px solid rgba(0, 0, 0, 0.14902);
 		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

From 663100fe291ad5486be0ead6b5c8a49e64ebba97 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 13 Jul 2016 18:45:57 +0530
Subject: [PATCH 5/7] overlay sidebar in modules view

---
 frappe/desk/page/modules/modules.js           | 13 +++++++------
 frappe/desk/page/modules/modules_sidebar.html |  2 +-
 frappe/public/css/docs.css                    |  5 +++++
 frappe/public/css/list.css                    |  5 +++++
 frappe/public/css/mobile.css                  | 12 ++++++++++++
 frappe/public/css/module.css                  |  6 ++++++
 frappe/public/css/navbar.css                  |  5 +++++
 frappe/public/css/sidebar.css                 | 11 ++++++++++-
 frappe/public/js/frappe/ui/toolbar/toolbar.js | 18 ++++++++++--------
 frappe/public/less/list.less                  |  4 ++++
 frappe/public/less/mobile.less                | 11 +++++++++++
 frappe/public/less/module.less                |  7 +++++++
 frappe/public/less/navbar.less                |  6 ++++++
 frappe/public/less/sidebar.less               | 13 ++++++++++++-
 14 files changed, 101 insertions(+), 17 deletions(-)

diff --git a/frappe/desk/page/modules/modules.js b/frappe/desk/page/modules/modules.js
index 0adc8efd7d..46ffde84dc 100644
--- a/frappe/desk/page/modules/modules.js
+++ b/frappe/desk/page/modules/modules.js
@@ -34,6 +34,7 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.wrapper.find('.module-sidebar-item.active, .module-link.active').removeClass('active');
 		$(link).addClass('active').parent().addClass("active");
 		show_section($(link).attr('data-name'));
+		$('.module-sidebar-nav').trigger('close_sidebar');
 	}
 
 	var show_section = function(module_name) {
@@ -63,12 +64,12 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.set_title(__(m.label));
 		page.main.html(frappe.render_template('modules_section', m));
 
-		if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
-			// call this after a timeout, becuase a refresh will set the page to the top
-			setTimeout(function() {
-				$(document).scrollTop($('.module-body').offset().top - 100);
-			}, 100);
-		}
+		// if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
+		// 	// call this after a timeout, becuase a refresh will set the page to the top
+		// 	setTimeout(function() {
+		// 		$(document).scrollTop($('.module-body').offset().top - 150);
+		// 	}, 100);
+		// }
 
 		//setup_section_toggle();
 		frappe.app.update_notification_count_in_modules();
diff --git a/frappe/desk/page/modules/modules_sidebar.html b/frappe/desk/page/modules/modules_sidebar.html
index 0c16818cb8..04719f271a 100644
--- a/frappe/desk/page/modules/modules_sidebar.html
+++ b/frappe/desk/page/modules/modules_sidebar.html
@@ -1,4 +1,4 @@
-<ul class="module-sidebar-nav nav nav-pills nav-stacked">
+<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked">
     {% for (var i=0, l= modules.length; i < l; i++) { var item = modules[i];
 			if(item.type==="module" && !item.blocked) { %}
 			{{ frappe.render_template("modules_sidebar_item", {"item": item}) }}
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index ac6ad24a15..57a9c4bf73 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -180,6 +180,11 @@ body {
     margin-left: 0 !important;
   }
 }
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
 #searchModal .modal-dialog,
 #searchModal .modal-content {
   background: transparent;
diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css
index a99cccd6a8..26e8b312f2 100644
--- a/frappe/public/css/list.css
+++ b/frappe/public/css/list.css
@@ -23,6 +23,11 @@
   padding-bottom: 4px;
   padding-right: 120px;
 }
+@media (max-width: 767px) {
+  .set-filters {
+    padding-right: 80px;
+  }
+}
 .set-filters .btn {
   margin-bottom: 10px;
 }
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 22391378d7..294e04b158 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -279,6 +279,18 @@ body {
   }
   body[data-route=""] .navbar .navbar-home,
   body[data-route="desktop"] .navbar .navbar-home {
+    padding: 8px 10px;
+  }
+  body[data-route=""] .navbar .navbar-home:before,
+  body[data-route="desktop"] .navbar .navbar-home:before {
+    display: none;
+  }
+  body[data-route=""] .navbar .navbar-home img,
+  body[data-route="desktop"] .navbar .navbar-home img {
+    margin-top: 0;
+  }
+  body[data-route=""] .toggle-sidebar,
+  body[data-route="desktop"] .toggle-sidebar {
     display: none !important;
   }
   .linked-with-dialog {
diff --git a/frappe/public/css/module.css b/frappe/public/css/module.css
index 7e958c441a..9e937b0957 100644
--- a/frappe/public/css/module.css
+++ b/frappe/public/css/module.css
@@ -36,6 +36,12 @@
     border-top: 1px solid #d1d8dd;
   }
 }
+@media (max-width: 767px) {
+  .module-body {
+    margin-top: 0;
+    border-top: 1px solid transparent;
+  }
+}
 @media (max-width: 767px) {
   .module-section {
     border: none;
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index a91403f1b9..bbe20e52a3 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -46,6 +46,11 @@
     margin-left: 0 !important;
   }
 }
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
 #searchModal .modal-dialog,
 #searchModal .modal-content {
   background: transparent;
diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index 2a35f0497b..5c58f3fb02 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -263,7 +263,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     width: 40%;
     padding: 25px;
     display: block !important;
-    transition: transform 300ms ease-in-out;
+    transition: transform 200ms ease-in-out;
   }
   .layout-side-section .overlay-sidebar.opened {
     transform: translateX(0);
@@ -296,6 +296,15 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     margin: 0;
   }
 }
+@media (max-width: 991px) {
+  .layout-side-section .module-sidebar-nav {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .layout-side-section .module-sidebar-nav .module-link {
+    padding-left: 25px;
+  }
+}
 .sidebar-left .list-sidebar .stat-label,
 .sidebar-left .list-sidebar .stat-no-records {
   padding: 12px 14px;
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index ee543aeb22..1c7c07a1da 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -16,23 +16,25 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
 			overlay_sidebar.addClass('opened');
 			overlay_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
-			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs hidden-sm');
 
 			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
 
 			var offcanvas_container = $('body').find('.offcanvas-container');
-			offcanvas_container.css("overflow", "hidden");
+			offcanvas_container.css("overflow-y", "hidden");
 
-			var close_sidebar = layout_side_section.find(".close-sidebar");
-			close_sidebar.click(function() {
+			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
+
+			$('.module-sidebar-nav').on('close_sidebar', close_sidebar);
+
+			function close_sidebar() {
 				overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
-				offcanvas_container.css("overflow", "auto");
+				offcanvas_container.css("overflow-y", "visible");
 
-				close_sidebar.fadeOut(function() {
+				layout_side_section.find(".close-sidebar").fadeOut(function() {
 					overlay_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
-					close_sidebar.remove();
 				});
-			});
+			}
 		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less
index fa41bc68e8..676904231a 100644
--- a/frappe/public/less/list.less
+++ b/frappe/public/less/list.less
@@ -32,6 +32,10 @@
 .set-filters {
 	padding-bottom: 4px;
 	padding-right: 120px;
+
+	@media (max-width: @screen-xs) {
+		padding-right: 80px;
+	}
 }
 
 .set-filters .btn {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 61c561808c..7d0b983f91 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -193,6 +193,17 @@
 	body[data-route=""],
 	body[data-route="desktop"] {
 		.navbar .navbar-home {
+			// display: none !important;
+			padding: 8px 10px;
+			&:before {
+				display: none;
+			}
+			img {
+				margin-top: 0;
+			}
+		}
+
+		.toggle-sidebar {
 			display: none !important;
 		}
 	}
diff --git a/frappe/public/less/module.less b/frappe/public/less/module.less
index b016922bae..f924778864 100644
--- a/frappe/public/less/module.less
+++ b/frappe/public/less/module.less
@@ -49,6 +49,13 @@
 	}
 }
 
+@media(max-width: @screen-xs) {
+	.module-body {
+		margin-top: 0;
+		border-top: 1px solid transparent;
+	}
+}
+
 @media(max-width: @screen-xs) {
 	.module-section {
 		border: none;
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index 455c12dffe..2f25536e0e 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -57,6 +57,12 @@
 	}
 }
 
+@media (max-width: 767px) {
+	.navbar-desk {
+		width: 60% !important;
+	}
+}
+
 #searchModal {
 	.modal-dialog, .modal-content {
 		background: transparent;
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 65d25397a4..8f61b576a4 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -271,7 +271,7 @@ body[data-route^="Module"] .main-menu {
 			width: 40%;
 			padding: 25px;
 			display: block !important;
-			transition: transform 300ms ease-in-out;
+			transition: transform 200ms ease-in-out;
 
 			&.opened {
 				transform: translateX(0);
@@ -308,6 +308,17 @@ body[data-route^="Module"] .main-menu {
 			margin: 0;
 		}
 	}
+
+	.module-sidebar-nav {
+		@media (max-width: 991px) {
+			padding-left: 0;
+			padding-right: 0;
+
+			.module-link {
+				padding-left: 25px;
+			}
+		}
+	}
 }
 
 .sidebar-left .list-sidebar {

From db3a6101f6900b022f43dfd9e8e2d107542ba33c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 14 Jul 2016 15:47:10 +0530
Subject: [PATCH 6/7] [style] fixed autocomplete widget

---
 frappe/public/css/desk.css   | 11 ++++++++---
 frappe/public/less/desk.less | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css
index 16bcfb4198..789390e5fb 100644
--- a/frappe/public/css/desk.css
+++ b/frappe/public/css/desk.css
@@ -385,15 +385,20 @@ fieldset[disabled] .form-control {
 }
 .ui-datepicker .ui-state-active,
 .ui-autocomplete .ui-state-active {
-  background-color: #5E64FF !important;
-  color: #fff !important;
+  background-color: #F0F4F7 !important;
+  color: #36414C !important;
   text-shadow: none !important;
+  border: none;
+}
+.ui-datepicker .ui-state-active .small,
+.ui-autocomplete .ui-state-active .small {
+  color: #555 !important;
 }
 .ui-menu .ui-menu-item {
-  padding: 7px;
   font-size: 12px;
 }
 .ui-menu .ui-menu-item a {
+  padding: 9px 11.8px !important;
   text-decoration: none;
 }
 @media (min-width: 768px) {
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index 82b39b38f1..78daf63451 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -198,16 +198,21 @@ textarea.form-control {
 	}
 
 	.ui-state-active {
-		background-color: @brand-primary !important;
-		color: #fff !important;
+		background-color: @btn-bg !important;
+		color: @text-color !important;
 		text-shadow: none !important;
+		border: none;
+
+		.small {
+			color: #555 !important;
+		}
 	}
 }
 
 .ui-menu .ui-menu-item {
-	padding: 7px;
 	font-size: @text-medium;
 	a {
+		padding: 9px 11.8px !important;
 		text-decoration: none;
 	}
 }

From 86b65adf7e7d7e05d8b5b89135e74a15d01ebe3d Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 14 Jul 2016 17:49:29 +0530
Subject: [PATCH 7/7] hide toggle-sidebar on single_column

---
 frappe/desk/page/modules/modules.js            |  1 +
 frappe/public/css/docs.css                     | 12 ++++++------
 frappe/public/css/mobile.css                   |  7 +++++++
 frappe/public/css/navbar.css                   | 12 ++++++------
 frappe/public/js/frappe/ui/toolbar/navbar.html |  4 ++--
 frappe/public/less/mobile.less                 |  9 +++++++++
 frappe/public/less/navbar.less                 |  2 +-
 7 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/frappe/desk/page/modules/modules.js b/frappe/desk/page/modules/modules.js
index 46ffde84dc..0eb4e0f5f0 100644
--- a/frappe/desk/page/modules/modules.js
+++ b/frappe/desk/page/modules/modules.js
@@ -140,6 +140,7 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 
 frappe.pages['modules'].on_page_show = function(wrapper) {
 	var route = frappe.get_route();
+	$("body").attr("data-sidebar", 1);
 	if(route.length > 1) {
 		// activate section based on route
 		frappe.modules_page.activate_link(
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index 57a9c4bf73..8c47d38318 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -185,21 +185,21 @@ body {
     width: 60% !important;
   }
 }
-#searchModal .modal-dialog,
-#searchModal .modal-content {
+#search-modal .modal-dialog,
+#search-modal .modal-content {
   background: transparent;
 }
-#searchModal .modal-header {
+#search-modal .modal-header {
   background: #fff;
   display: table;
   width: 100%;
 }
-#searchModal .modal-header form,
-#searchModal .modal-header button {
+#search-modal .modal-header form,
+#search-modal .modal-header button {
   display: table-cell;
   vertical-align: middle;
 }
-#searchModal .modal-header button {
+#search-modal .modal-header button {
   height: 30px;
 }
 .dropdown-navbar-new-comments > a {
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 294e04b158..57e4e1a511 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -293,6 +293,13 @@ body {
   body[data-route="desktop"] .toggle-sidebar {
     display: none !important;
   }
+  body[data-sidebar="0"] .toggle-sidebar {
+    display: none !important;
+  }
+  body[data-sidebar="0"] #navbar-breadcrumbs,
+  body[data-sidebar="0"] .navbar-home {
+    margin-left: 15px !important;
+  }
   .linked-with-dialog {
     width: 100% !important;
   }
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index bbe20e52a3..a702a41207 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -51,21 +51,21 @@
     width: 60% !important;
   }
 }
-#searchModal .modal-dialog,
-#searchModal .modal-content {
+#search-modal .modal-dialog,
+#search-modal .modal-content {
   background: transparent;
 }
-#searchModal .modal-header {
+#search-modal .modal-header {
   background: #fff;
   display: table;
   width: 100%;
 }
-#searchModal .modal-header form,
-#searchModal .modal-header button {
+#search-modal .modal-header form,
+#search-modal .modal-header button {
   display: table-cell;
   vertical-align: middle;
 }
-#searchModal .modal-header button {
+#search-modal .modal-header button {
   height: 30px;
 }
 .dropdown-navbar-new-comments > a {
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 57d166be28..6aae9b6189 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -12,7 +12,7 @@
 
 		<ul class="nav navbar-nav navbar-right">
 			<li class="visible-xs">
-				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#search-modal"><i class="octicon octicon-search"></i></a>
 			</li>
 			<li class="dropdown dropdown-navbar-user">
 				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
@@ -53,7 +53,7 @@
 			</li>
 		</ul>
 
-		<div id="searchModal" class="modal fade" role="dialog">
+		<div id="search-modal" class="modal fade" role="dialog">
 			<div class="modal-dialog" style="height: 50px;">
 				<div class="modal-content">
 					<div class="modal-header">
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 7d0b983f91..4d9dbd806d 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -208,6 +208,15 @@
 		}
 	}
 
+	body[data-sidebar="0"] {
+		.toggle-sidebar {
+			display: none !important;
+		}
+		#navbar-breadcrumbs, .navbar-home {
+			margin-left: 15px !important;
+		}
+	}
+
 	.linked-with-dialog {
 		width: 100% !important;
 	}
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index 2f25536e0e..fbc96336cc 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -63,7 +63,7 @@
 	}
 }
 
-#searchModal {
+#search-modal {
 	.modal-dialog, .modal-content {
 		background: transparent;
 	}