From 9ac20f20ff18c5a9974f6dc747fc0df0bfc980ee Mon Sep 17 00:00:00 2001
From: Anand Doshi <anand@erpnext.com>
Date: Wed, 28 Jan 2015 13:21:04 +0530
Subject: [PATCH] [design] module sidebar

---
 frappe/public/css/mobile.css                  | 12 +++---
 frappe/public/css/module.css                  |  3 --
 frappe/public/css/navbar.css                  |  5 +++
 frappe/public/css/sidebar.css                 | 23 ++++++++---
 .../public/js/frappe/ui/toolbar/navbar.html   |  1 +
 .../ui/toolbar/offcanvas_left_sidebar.html    |  3 ++
 .../frappe/views/module/module_sidebar.html   |  5 ++-
 .../js/frappe/views/module/moduleview.js      | 41 +++++++++----------
 frappe/public/less/mobile.less                | 17 ++++----
 frappe/public/less/module.less                |  4 --
 frappe/public/less/navbar.less                |  5 +++
 frappe/public/less/sidebar.less               | 30 ++++++++++----
 12 files changed, 91 insertions(+), 58 deletions(-)

diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index b9e3113312..b0db744360 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -3,9 +3,6 @@
     padding-left: 0px;
     padding-right: 0px;
   }
-  .module-sidebar-nav {
-    margin-right: 0px;
-  }
   .layout-main-section {
     border-left: none;
     border-right: none;
@@ -78,10 +75,6 @@
   .navbar-nav {
     margin: 0px;
   }
-  .mobile-module-icon {
-    padding: 17px 15px 0px;
-    margin-bottom: -15px;
-  }
   .offcanvas,
   .page-head,
   .sidebar-right,
@@ -193,4 +186,9 @@
   .sidebar .user-menu img {
     margin-top: -1px;
   }
+  body[data-route^="Module"] .navbar-center {
+    display: block !important;
+    position: absolute;
+    top: 10px;
+  }
 }
diff --git a/frappe/public/css/module.css b/frappe/public/css/module.css
index 779f41f60a..28b336e9ac 100644
--- a/frappe/public/css/module.css
+++ b/frappe/public/css/module.css
@@ -30,9 +30,6 @@
   margin-top: 2px;
   display: block !important;
 }
-.module-sidebar-nav {
-  margin-right: -15px;
-}
 .module-item-progress {
   margin-bottom: 10px;
   height: 17px;
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index a3c9d430e9..067ef294f1 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -65,3 +65,8 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+.navbar-center {
+  float: left;
+  font-weight: bold;
+  color: #6c7680;
+}
diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index b24aa31623..4918e066af 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -7,6 +7,9 @@
   border-bottom: 1px solid #212a33;
   color: #212a33;
 }
+.hide-form-sidebar .form-sidebar {
+  display: none !important;
+}
 body[data-route=""] .main-menu .desk-sidebar,
 body[data-route="desk"] .main-menu .desk-sidebar {
   display: block !important;
@@ -21,24 +24,30 @@ body[data-route^="List"] .main-menu .list-sidebar {
 body[data-route^="List"] .main-menu .form-sidebar {
   display: none !important;
 }
+body[data-route^="Module"] .main-menu .module-sidebar {
+  display: block !important;
+}
+body[data-route^="Module"] .main-menu .form-sidebar {
+  display: none !important;
+}
 .sidebar-padding {
   padding: 12px 14px;
 }
-.sidebar-left .sidebar-menu > li > a {
+.offcanvas .sidebar .sidebar-menu > li > a {
   padding: 12px 14px;
   display: block;
   whitespace: nowrap;
   transition: 0.2s;
 }
-.sidebar-left .divider {
+.offcanvas .sidebar .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 {
+.offcanvas .sidebar .sidebar-menu > li > a:hover,
+.offcanvas .sidebar .sidebar-menu > li > a:focus,
+.offcanvas .sidebar .sidebar-menu > li > a:active {
   background-color: #f0f4f7;
 }
 .layout-side-section {
@@ -65,6 +74,7 @@ body[data-route^="List"] .main-menu .form-sidebar {
 .sidebar-menu .badge {
   position: absolute;
   right: 15px;
+  font-weight: normal;
 }
 .sidebar-menu .octicon {
   font-size: 12px;
@@ -144,3 +154,6 @@ a.close:active,
 a.close:focus {
   border-color: transparent !important;
 }
+.layout-side-section .module-sidebar-nav {
+  margin-top: 15px;
+}
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 288f3ef811..06821da520 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -8,6 +8,7 @@
 			<ul class="nav navbar-nav text-ellipsis" id="navbar-breadcrumbs">
 			</ul>
 		</div>
+		<div class="navbar-center" style="display: none; left: calc(50% - 42px);"></div>
 		<ul class="nav navbar-nav navbar-right visible-xs visible-sm">
 			<li>
 				<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">
diff --git a/frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html b/frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html
index f39433700b..7443625150 100644
--- a/frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html
+++ b/frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html
@@ -15,6 +15,9 @@
 	</div>
 	<div class="list-sidebar" style="display: none">
 
+	</div>
+	<div class="module-sidebar" style="display: none">
+
 	</div>
 	<ul class="desk-sidebar list-unstyled sidebar-menu" style="display: none">
 		<li class="divider"></li>
diff --git a/frappe/public/js/frappe/views/module/module_sidebar.html b/frappe/public/js/frappe/views/module/module_sidebar.html
index 58cd2c7c01..495b3bcd07 100644
--- a/frappe/public/js/frappe/views/module/module_sidebar.html
+++ b/frappe/public/js/frappe/views/module/module_sidebar.html
@@ -1,6 +1,7 @@
-<ul class="nav nav-pills nav-stacked module-sidebar-nav hidden-xs">
+<ul class="module-sidebar-nav">
+	<li class="divider"></li>
     {% for (var i=0, l= data.data.length; i < l; i++) { var item = data.data[i]; %}
-    <li data-label="{%= item.label %}" class="h6 module-sidebar-item">
+    <li data-label="{%= item.label %}" class="strong module-sidebar-item">
         <a class="module-link">
             <i class="icon icon-chevron-right pull-right" style="display: none;"></i>
             <span>{%= item.label %}</span></a>
diff --git a/frappe/public/js/frappe/views/module/moduleview.js b/frappe/public/js/frappe/views/module/moduleview.js
index d9f8dfa057..c767ff9479 100644
--- a/frappe/public/js/frappe/views/module/moduleview.js
+++ b/frappe/public/js/frappe/views/module/moduleview.js
@@ -57,10 +57,12 @@ frappe.get_module = function(m) {
 frappe.views.moduleview.ModuleView = Class.extend({
 	init: function(module) {
 		this.module = module;
-		this.module_info = frappe.get_module(module);
+		this.module_info = frappe.get_module(module) || {};
+		this.module_label = __(this.module_info.label || this.module);
 		this.sections = {};
 		this.current_section = null;
 		this.make();
+		$(".navbar-center").html(this.module_label);
 	},
 
 	make: function() {
@@ -76,8 +78,6 @@ frappe.views.moduleview.ModuleView = Class.extend({
 				frappe.views.moduleview[me.module] = me.parent;
 				me.page = me.parent.page;
 				me.parent.moduleview = me;
-				me.page.set_title(__(frappe.modules[me.module]
-					&& frappe.modules[me.module].label || me.module));
 				me.render();
 			}
 		});
@@ -95,22 +95,18 @@ frappe.views.moduleview.ModuleView = Class.extend({
 		this.activate(this.data.data[0].label);
 	},
 
-	make_title: function(name) {
-		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", {
-			title: this.page_title.find("h1").html(),
-			section_name: name,
-			data: this.data
-		})).insertAfter(this.page_title);
-	},
-
 	make_sidebar: function(name) {
 		var me = this;
-		$(frappe.render_template("module_sidebar", {data:this.data})).appendTo(this.page.sidebar);
+		var sidebar_content = frappe.render_template("module_sidebar", {data:this.data});
+		var module_sidebar = $(sidebar_content)
+			.addClass("nav nav-pills nav-stacked")
+			.appendTo(this.page.sidebar.addClass("hidden-xs hidden-sm"));
+		var offcanvas_module_sidebar = $(sidebar_content)
+			.addClass("list-unstyled sidebar-menu")
+			.appendTo($(".sidebar-left .module-sidebar"));
 
-		this.page.wrapper.on("click", ".module-link", function() {
+		this.sidebar = offcanvas_module_sidebar.add(module_sidebar);
+		this.sidebar.on("click", ".module-link", function() {
 			me.activate($(this).parent().attr("data-label"));
 		});
 	},
@@ -131,15 +127,18 @@ frappe.views.moduleview.ModuleView = Class.extend({
 				});
 			});
 		}
+
+		// set title
+		this.page.set_title(repl('<span class="hidden-xs hidden-sm">%(module)s</span>\
+			<span class="hidden-md hidden-lg">%(section)s</span>',
+			{module: this.module_label, section: name}));
+
 		this.current_section = this.sections[name];
 		this.current_section.removeClass("hide");
 
 		// active
-		this.page.sidebar.find("li.active").removeClass("active");
-		this.page.sidebar.find('[data-label="'+ name +'"]').addClass("active");
-
-		// make mobile title
-		this.make_title(name);
+		this.sidebar.find("li.active").removeClass("active");
+		this.sidebar.find('[data-label="'+ name +'"]').addClass("active");
 
 		frappe.app.update_notification_count_in_modules();
 	},
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index d764c101f8..1fe719b3e4 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -7,10 +7,6 @@
 		padding-right: 0px;
 	}
 
-	.module-sidebar-nav {
-		margin-right: 0px;
-	}
-
 	.layout-main-section {
 		border-left: none;
 		border-right: none;
@@ -105,11 +101,6 @@
 		margin: 0px;
 	}
 
-	.mobile-module-icon {
-		padding: 17px 15px 0px;
-		margin-bottom: -15px;
-	}
-
 	// Off Canvas
 	.offcanvas,
 	.page-head,
@@ -239,4 +230,12 @@
 		margin-top: -1px;
 	}
 
+	// module view
+	body[data-route^="Module"] {
+		.navbar-center {
+			display: block !important;
+			position: absolute;
+			top: 10px;
+		}
+	}
 }
diff --git a/frappe/public/less/module.less b/frappe/public/less/module.less
index d8b1812783..8a1f1e1abc 100644
--- a/frappe/public/less/module.less
+++ b/frappe/public/less/module.less
@@ -39,10 +39,6 @@
 	display: block !important;
 }
 
-.module-sidebar-nav {
-	margin-right: -15px;
-}
-
 .module-item-progress {
 	margin-bottom: 10px;
 	height: 17px;
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index 51c456abfa..bd7b68c946 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -79,3 +79,8 @@
 	overflow-x: hidden;
 }
 
+.navbar-center {
+	float: left;
+	font-weight: bold;
+	color: @navbar-default-color;
+}
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 19e81270f4..6666885ac9 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -1,15 +1,19 @@
 @import "variables.less";
 @import "mixins.less";
 
+.hide-form-sidebar {
+	.form-sidebar {
+		display: none !important;
+	}
+}
+
 body[data-route=""] .main-menu,
 body[data-route="desk"] .main-menu {
 	.desk-sidebar {
 		display: block !important;
 	}
 
-	.form-sidebar {
-		display: none !important;
-	}
+	.hide-form-sidebar;
 }
 
 body[data-route^="List"] .main-menu {
@@ -17,16 +21,22 @@ body[data-route^="List"] .main-menu {
 		display: block !important;
 	}
 
-	.form-sidebar {
-		display: none !important;
+	.hide-form-sidebar;
+}
+
+body[data-route^="Module"] .main-menu {
+	.module-sidebar {
+		display: block !important;
 	}
+
+	.hide-form-sidebar;
 }
 
 .sidebar-padding {
 	padding: 12px 14px;
 }
 
-.sidebar-left {
+.offcanvas .sidebar {
 	.sidebar-menu > li > a {
 		.sidebar-padding;
 		display: block;
@@ -42,7 +52,7 @@ body[data-route^="List"] .main-menu {
 	}
 }
 
-.sidebar-left .sidebar-menu > li > a& {
+.offcanvas .sidebar .sidebar-menu > li > a& {
 	&:hover,
 	&:focus,
 	&:active {
@@ -79,6 +89,7 @@ body[data-route^="List"] .main-menu {
 	.badge {
 		position: absolute;
 		right: 15px;
+		font-weight: normal;
 	}
 
 	.octicon {
@@ -188,3 +199,8 @@ a.close {
 		border-color: transparent !important;
 	}
 }
+
+// module sidebar
+.layout-side-section .module-sidebar-nav {
+	margin-top: 15px;
+}