From 8550d9be447f317de1827f5086eedf6784cf769b Mon Sep 17 00:00:00 2001
From: Anand Doshi <anand@erpnext.com>
Date: Wed, 4 Feb 2015 09:53:52 +0530
Subject: [PATCH] [design] In mobile view, remove input borders and show modals
 in full screen

---
 frappe/build.py                               |   6 +-
 .../page/desktop/desktop_module_icon.html     |   5 +-
 .../page/applications/application_row.html    |   2 +-
 .../desk/page/applications/applications.css   |  10 +-
 frappe/public/build.json                      |   4 +-
 frappe/public/css/desktop.css                 |   3 +-
 frappe/public/css/form.css                    |   5 +-
 frappe/public/css/form_grid.css               |   2 +-
 frappe/public/css/mobile.css                  |  93 ++++++++++++--
 frappe/public/css/navbar.css                  |   2 +-
 frappe/public/js/frappe/dom.js                |   6 +-
 frappe/public/js/frappe/form/control.js       |  18 ++-
 .../js/frappe/form/footer/timeline.html       |  16 ++-
 .../public/js/frappe/form/footer/timeline.js  |  21 +++-
 .../js/frappe/form/footer/timeline_item.html  |   8 +-
 frappe/public/js/frappe/form/grid_form.html   |  16 ++-
 frappe/public/js/frappe/form/layout.js        |   2 +-
 frappe/public/js/frappe/ui/modal.html         |   4 +-
 frappe/public/less/desktop.less               |   3 +-
 frappe/public/less/form.less                  |   6 +-
 frappe/public/less/form_grid.less             |   2 +-
 frappe/public/less/mixins.less                |   7 +-
 frappe/public/less/mobile.less                | 116 +++++++++++++++++-
 23 files changed, 285 insertions(+), 72 deletions(-)

diff --git a/frappe/build.py b/frappe/build.py
index 2619495d6b..c2e2a8470d 100644
--- a/frappe/build.py
+++ b/frappe/build.py
@@ -180,6 +180,8 @@ def compile_less():
 						continue
 
 					timestamps[fpath] = mtime
+
 					print "compiling {0}".format(fpath)
-					os.system("lessc {0} > {1}".format(fpath,
-						os.path.join(path, "public", "css", fname.rsplit(".", 1)[0] + ".css")))
+
+					css_path = os.path.join(path, "public", "css", fname.rsplit(".", 1)[0] + ".css")
+					os.system("lessc {0} > {1}".format(fpath, css_path))
diff --git a/frappe/core/page/desktop/desktop_module_icon.html b/frappe/core/page/desktop/desktop_module_icon.html
index 2d4b318658..4a02d9845f 100644
--- a/frappe/core/page/desktop/desktop_module_icon.html
+++ b/frappe/core/page/desktop/desktop_module_icon.html
@@ -5,8 +5,7 @@
 		<div class="circle" id="module-count-{%= _id %}" style="display: none;">
 			<span class="circle-text"></span>
 		</div>
-		<!-- <span id="module-count-{%= _id %}" class="octicon octicon-primitive-dot circle" style="display: None"> -->
-		</span>
-		{%= _label %}
+		<!-- <span id="module-count-{%= _id %}" class="octicon octicon-primitive-dot circle" style="display: None"></span> -->
+		<span class="case-label-text">{%= _label %}</span>
 	</div>
 </div>
diff --git a/frappe/desk/page/applications/application_row.html b/frappe/desk/page/applications/application_row.html
index 91fc7494f0..6561ea2034 100644
--- a/frappe/desk/page/applications/application_row.html
+++ b/frappe/desk/page/applications/application_row.html
@@ -1,6 +1,6 @@
 <div class="app-listing padding" data-title="{%= app.app_title %}">
 	<div class="media">
-		<div class="pull-right">
+		<div class="pull-right app-buttons">
 			{% if (app.installed) { %}
 			<button class="btn btn-default" disabled=disabled>{%= __("Installed") %}</button>
 			{% } else { %}
diff --git a/frappe/desk/page/applications/applications.css b/frappe/desk/page/applications/applications.css
index 50490fb6b6..8621aaaffd 100644
--- a/frappe/desk/page/applications/applications.css
+++ b/frappe/desk/page/applications/applications.css
@@ -6,11 +6,15 @@
 	margin-top: 3px;
 }
 
-#page-applications .app-icon {
-	width: 70px;
-	height: 70px;
+#page-applications .app-icon-wrapper {
+	padding-right: 15px;
 }
 
 #page-applications .form-group {
 	margin-bottom: 0px;
 }
+
+#page-applications .app-buttons .btn {
+	width: 84px;
+	text-align: center;
+}
diff --git a/frappe/public/build.json b/frappe/public/build.json
index 8d06868d2b..d45b773520 100644
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -32,7 +32,6 @@
 		"public/css/font-awesome.css",
 		"public/css/octicons/octicons.css",
 		"public/css/desk.css",
-		"public/css/mobile.css",
 		"public/css/indicator.css",
 		"public/css/avatar.css",
 		"public/css/navbar.css",
@@ -47,7 +46,8 @@
 		"public/css/tree_grid.css",
 		"public/css/tree.css",
 		"public/css/nprogress.css",
-		"public/css/desktop.css"
+		"public/css/desktop.css",
+		"public/css/mobile.css"
 	],
 	"js/frappe.min.js": [
 		"public/js/lib/jquery/jquery-ui.min.js",
diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css
index 756596d97f..178e315b75 100644
--- a/frappe/public/css/desktop.css
+++ b/frappe/public/css/desktop.css
@@ -28,7 +28,7 @@ body[data-route="desktop"] .navbar-default {
   margin-top: 10px;
   transition: 0.2s;
   -webkit-transition: 0.2s;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 5px rgba(0, 0, 0, 0.3);
 }
 .app-icon {
   padding: 20px;
@@ -51,7 +51,6 @@ body[data-route="desktop"] .navbar-default {
 .app-icon img {
   height: 32px;
   width: 32px;
-  margin-top: -3px;
 }
 .app-icon path {
   fill: #fafbfc;
diff --git a/frappe/public/css/form.css b/frappe/public/css/form.css
index 3ef848e480..0f4dd58a28 100644
--- a/frappe/public/css/form.css
+++ b/frappe/public/css/form.css
@@ -67,6 +67,9 @@
   margin-top: 0px;
   padding: 15px 30px;
 }
+.timeline-item .icon-fixed-width {
+  text-align: center;
+}
 .timeline-item .reply {
   margin-top: 5px;
 }
@@ -76,7 +79,7 @@
 }
 .timeline-head {
   background-color: #fafbfc;
-  padding: 30px 30px 15px 30px;
+  padding: 15px 30px;
   border-bottom: 1px solid #d1d8dd;
 }
 .form-footer h5 {
diff --git a/frappe/public/css/form_grid.css b/frappe/public/css/form_grid.css
index bde7170c9a..da3cb73297 100644
--- a/frappe/public/css/form_grid.css
+++ b/frappe/public/css/form_grid.css
@@ -75,7 +75,7 @@
   -webkit-transition: all 0.2s ease;
 }
 .grid-row-open .form-in-grid {
-  max-height: 1200px;
+  max-height: 10000px;
   transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
   -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
 }
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index abff2bd382..7e28d6c437 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -1,4 +1,26 @@
 @media (max-width: 767px) {
+  .modal .modal-dialog {
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    overflow-y: auto;
+    background-color: #fff;
+  }
+  .modal .modal-content {
+    border-radius: 0px;
+    border: none;
+    box-shadow: none;
+    height: 100%;
+  }
+  .modal .modal-body .form-layout {
+    margin: -15px;
+  }
   .layout-main-section-wrapper {
     padding: 0px;
   }
@@ -17,6 +39,50 @@
     border-right: none !important;
     border-radius: none;
   }
+  .form-page .form-section {
+    padding: 0px 15px;
+  }
+  .form-page .frappe-control {
+    padding: 7px 15px;
+    border-bottom: 1px solid #d1d8dd;
+    margin: 0px -15px;
+  }
+  .form-page .frappe-control .link-btn {
+    top: -2px;
+  }
+  .form-page .frappe-control .like-disabled-input {
+    min-height: none !important;
+  }
+  .form-page .form-section:last-child .form-column:last-child .frappe-control:last-child {
+    border-bottom: none;
+  }
+  .form-page .form-control {
+    border: none;
+    box-shadow: none;
+    background-color: inherit;
+    height: auto;
+    padding: 0px;
+    margin-bottom: 7px;
+    border-radius: 0px;
+    text-align: left !important;
+  }
+  .form-page .form-control:focus {
+    box-shadow: none;
+  }
+  .timeline {
+    border-left: none !important;
+    border-right: none !important;
+  }
+  .timeline .timeline-head {
+    padding: 7px 15px;
+  }
+  .timeline .timeline-item {
+    padding: 15px;
+    border-bottom: 1px dashed #d1d8dd;
+  }
+  .timeline .timeline-item:last-child {
+    border-bottom: none;
+  }
   .doclist-row {
     position: relative;
     padding-right: 10px;
@@ -26,7 +92,7 @@
     text-align: left;
     margin-top: 3px;
   }
-  .doclist-row .doclist-row.has-checkbox .list-row-id {
+  .doclist-row.has-checkbox .list-row-id {
     left: 40px;
   }
   .doclist-row .list-row-indicator {
@@ -95,6 +161,7 @@
     display: inline-block !important;
     padding-left: 0px;
     margin-left: 0px;
+    padding-top: 6px;
   }
   body[data-route^="Module"] .navbar .navbar-home:before {
     font-family: FontAwesome;
@@ -105,18 +172,27 @@
     *margin-right: .3em;
     display: inline-block;
     speak: none;
-    color: #c0c9d2;
     font-size: 24px;
     transition: 0.2s;
     position: relative;
     top: 3px;
-    content: "\f104" !important;
-    margin-right: 5px !important;
+    content: "\f104";
+    margin-right: 5px;
+    color: #6c7680;
   }
   body[data-route^="Module"] .navbar .navbar-home:hover:before,
   body[data-route^="Module"] .navbar .navbar-home:focus:before,
   body[data-route^="Module"] .navbar .navbar-home:active:before {
-    color: #36414c;
+    color: #36414c !important;
+  }
+  body[data-route^="Module"] .page-title {
+    width: 100%;
+  }
+  body[data-route^="Module"] .page-actions {
+    display: none !important;
+  }
+  .module-item {
+    padding: 7px 0px !important;
   }
   #navbar-breadcrumbs {
     margin: 0px;
@@ -128,8 +204,9 @@
     vertical-align: middle;
   }
   #navbar-breadcrumbs > li > a:before {
-    content: "\f104" !important;
-    margin-right: 5px !important;
+    content: "\f104";
+    margin-right: 5px;
+    color: #6c7680;
   }
   #navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
     display: none;
@@ -204,7 +281,7 @@
     font-size: inherit;
     position: relative;
     right: 7px;
-    top: -21px;
+    top: -20px;
     height: 0;
   }
   .sidebar form {
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index 465c723d27..d007cd77f4 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -72,13 +72,13 @@
   *margin-right: .3em;
   display: inline-block;
   speak: none;
-  color: #c0c9d2;
   font-size: 24px;
   transition: 0.2s;
   position: relative;
   top: 3px;
   content: "\f105";
   margin-right: 15px;
+  color: #c0c9d2;
 }
 #navbar-breadcrumbs > li > a:hover:before,
 #navbar-breadcrumbs > li > a:focus:before,
diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index e904968817..673d5b5199 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -62,7 +62,7 @@ frappe.dom = {
 	freeze: function() {
 		// blur
 		if(!$('#freeze').length) {
-			$("<div id='freeze' class='modal-backdrop'>")
+			$("<div id='freeze' class='modal-backdrop' style='display: none;'>")
 				.on("click", function() {
 					if (cur_frm && cur_frm.cur_grid) {
 						cur_frm.cur_grid.toggle_view();
@@ -71,14 +71,14 @@ frappe.dom = {
 				})
 				.appendTo("#body_div");
 		}
-		$('#freeze').toggle(true);
+		$('#freeze').fadeIn();
 		frappe.dom.freeze_count++;
 	},
 	unfreeze: function() {
 		if(!frappe.dom.freeze_count)return; // anything open?
 		frappe.dom.freeze_count--;
 		if(!frappe.dom.freeze_count) {
-			$('#freeze').toggle(false);
+			$('#freeze').fadeOut();
 		}
 	},
 	save_selection: function() {
diff --git a/frappe/public/js/frappe/form/control.js b/frappe/public/js/frappe/form/control.js
index 23cdacdd2f..3dbe909dfc 100644
--- a/frappe/public/js/frappe/form/control.js
+++ b/frappe/public/js/frappe/form/control.js
@@ -40,8 +40,16 @@ frappe.ui.form.Control = Class.extend({
 	get_status: function(explain) {
 		if(!this.doctype)
 			return "Write";
-		return frappe.perm.get_field_display_status(this.df,
+
+		var status = frappe.perm.get_field_display_status(this.df,
 			locals[this.doctype][this.docname], this.perm || this.frm.perm, explain);
+
+		// hide if no value
+		if (status==="Read" && is_null(frappe.model.get_value(this.doctype, this.docname, this.df.fieldname))) {
+			status = "None";
+		}
+
+		return status;
 	},
 	refresh: function() {
 		this.disp_status = this.get_status();
@@ -134,7 +142,7 @@ frappe.ui.form.ControlImage = frappe.ui.form.Control.extend({
 });
 
 frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
-	horizontal: true,
+	// horizontal: true,
 	make: function() {
 		// parent element
 		this._super();
@@ -151,10 +159,10 @@ frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
 			this.$wrapper = $('<div class="frappe-control">\
 				<div class="form-group" style="margin: 0px">\
 					<label class="control-label" style="padding-right: 0px;"></label>\
-					<div>\
+					<div class="control-input-wrapper">\
 						<div class="control-input"></div>\
 						<div class="control-value like-disabled-input" style="display: none;"></div>\
-						<p class="help-box small text-muted"></p>\
+						<p class="help-box small text-muted hidden-xs"></p>\
 					</div>\
 				</div>\
 			</div>').appendTo(this.parent);
@@ -380,7 +388,7 @@ frappe.ui.form.ControlInt = frappe.ui.form.ControlData.extend({
 		var me = this;
 		this._super();
 		this.$input
-			.css({"text-align": "right"})
+			.addClass("text-right")
 			.on("focus", function() {
 				setTimeout(function() {
 					if(!document.activeElement) return;
diff --git a/frappe/public/js/frappe/form/footer/timeline.html b/frappe/public/js/frappe/form/footer/timeline.html
index 688ad556b7..187b9bcb90 100644
--- a/frappe/public/js/frappe/form/footer/timeline.html
+++ b/frappe/public/js/frappe/form/footer/timeline.html
@@ -1,6 +1,6 @@
 <div class="timeline">
     <div class="timeline-head">
-        <h6 style="margin-top: -10px;">{%= __("Add a comment") %}</h6>
+        <h6 class="text-muted">{%= __("Add a comment") %}</h6>
         <div>
     		<textarea style="height: 80px" style="margin-top: 10px;"
     			class="form-control"></textarea>
@@ -11,19 +11,17 @@
         	</span>
         	<div class="media-body">
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-xs-4">
                         <h6>{%= __("You") %}</h6>
                     </div>
-                    <div class="col-md-6 text-right">
-                		<button class="btn btn-primary btn-go btn-xs pull-right"
-                            style="margin-right: 10px;">
-                			{%= __("Submit") %}
+                    <div class="col-xs-8 text-right" style="margin-top: 2px;">
+                		<button class="btn btn-primary btn-go btn-xs pull-right">
+                			{%= __("Comment") %}
                 		</button>
                         <div class="checkbox text-muted small pull-right"
-                            style="margin-top: 3px; margin-right: 30px;">
+                            style="margin-top: 3px; margin-right: 15px;">
             			    <label>
-                				<input type="checkbox" class="is-email"
-                					style="margin-top: 1px;">
+                				<input type="checkbox" class="is-email" style="margin-top: 1px;">
                 				{%= __("Email") %}
                 			</label>
                         </div>
diff --git a/frappe/public/js/frappe/form/footer/timeline.js b/frappe/public/js/frappe/form/footer/timeline.js
index c422ce9e4d..14916d171d 100644
--- a/frappe/public/js/frappe/form/footer/timeline.js
+++ b/frappe/public/js/frappe/form/footer/timeline.js
@@ -11,11 +11,11 @@ frappe.ui.form.Comments = Class.extend({
 		this.wrapper = $(frappe.render_template("timeline",
 			{ image: frappe.user_info(user).image, fullname: user_fullname })).appendTo(this.parent);
 
-			this.list = this.wrapper.find(".timeline-items");
-
+		this.list = this.wrapper.find(".timeline-items");
 		this.input = this.wrapper.find(".form-control");
+
 		this.button = this.wrapper.find(".btn-go")
-			.click(function() {
+			.on("click", function() {
 				if(me.wrapper.find(".is-email").prop("checked")) {
 					new frappe.views.CommunicationComposer({
 						doc: me.frm.doc,
@@ -26,6 +26,15 @@ frappe.ui.form.Comments = Class.extend({
 					me.add_comment(this);
 				}
 			});
+
+		this.email_check = this.wrapper.find(".timeline-head input[type='checkbox']")
+			.on("click", function() {
+				if ($(this).prop("checked")) {
+					me.button.html(__("Compose"));
+				} else {
+					me.button.html(__("Comment"));
+				}
+			});
 	},
 	refresh: function(scroll_to_end) {
 		var me = this;
@@ -130,13 +139,13 @@ frappe.ui.form.Comments = Class.extend({
 			"Created": "octicon octicon-plus",
 			"Submitted": "octicon octicon-lock",
 			"Cancelled": "octicon octicon-x",
-			"Assigned": "octicon octicon-tag",
+			"Assigned": "octicon octicon-person",
 			"Assignment Completed": "octicon octicon-check",
 			"Comment": "octicon octicon-comment-discussion",
 			"Workflow": "octicon octicon-git-branch",
 			"Label": "octicon octicon-tag",
-			"Attachment": "octicon octicon-upload",
-			"Attachment Removed": "octicon octicon-x"
+			"Attachment": "octicon octicon-cloud-upload",
+			"Attachment Removed": "octicon octicon-trashcan"
 		}[c.comment_type]
 
 		c.color = {
diff --git a/frappe/public/js/frappe/form/footer/timeline_item.html b/frappe/public/js/frappe/form/footer/timeline_item.html
index 1786379752..477ef806f7 100644
--- a/frappe/public/js/frappe/form/footer/timeline_item.html
+++ b/frappe/public/js/frappe/form/footer/timeline_item.html
@@ -14,8 +14,8 @@
                     <i class="{%= data.icon %} icon-fixed-width"></i>
                     {%= data.fullname %}
                     <span class="text-muted" style="font-weight: normal;">
-                        &dash; {%= data.comment_on %}</span>
-                    {% if(data.doctype=="Communication") { %} &dash;
+                        &ndash; {%= data.comment_on %}</span>
+                    {% if(data.doctype=="Communication") { %} &ndash;
                     <a href="#Form/{%= data.doctype %}/{%= data.name %}"
                         class="text-muted">{%= __("Details") %}</a>
                     {% } %}
@@ -30,14 +30,14 @@
                     <i class="{%= data.icon %} icon-fixed-width"></i>
                         {%= data.comment %}
                         <span class="text-muted" style="font-weight: normal;">
-                        &dash; {%= data.comment_on %}</span>
+                        &ndash; {%= data.comment_on %}</span>
                 </h6>
             {% } else { %}
                 <h6>
                     <i class="{%= data.icon %} icon-fixed-width"></i>
                     {%= data.fullname %} {%= data.comment %}
                         <span class="text-muted" style="font-weight: normal;">
-                        &dash; {%= data.comment_on %}</span>
+                        &ndash; {%= data.comment_on %}</span>
                 </h6>
             {% } %}
 			{% if(data.attachments && data.attachments.length) { %}
diff --git a/frappe/public/js/frappe/form/grid_form.html b/frappe/public/js/frappe/form/grid_form.html
index 795cfb3c2d..0b7ce326c5 100644
--- a/frappe/public/js/frappe/form/grid_form.html
+++ b/frappe/public/js/frappe/form/grid_form.html
@@ -2,20 +2,24 @@
 	<div class="toolbar">
 		<span class="panel-title">
             {%= __("Editing Row") %} #<span class="grid-form-row-index"></span></span>
-		<button class="btn btn-success btn-xs pull-right"style="margin-left: 7px;">
-			{%= __("Done") %}</button>
+		<button class="btn btn-success btn-xs pull-right" style="margin-left: 7px;">
+			<i class="octicon octicon-check visible-xs" style="padding-bottom: 2px;"></i>
+			<span class="hidden-xs">{%= __("Done") %}</span></button>
 		<button class="btn btn-default btn-xs pull-right grid-insert-row"
 			style="margin-left: 7px;">
 			{%= __("Insert Above") %}</button>
 		<button class="btn btn-danger btn-xs pull-right grid-delete-row">
-			{%= __("Remove") %}</button>
+			<i class="octicon octicon-trashcan visible-xs"
+				style="padding-bottom: 2px; margin-top: 1px;"></i>
+			<span class="hidden-xs">{%= __("Remove") %}</span></button>
 	</div>
 </div>
 <div class="grid-form-body">
 	<div class="form-area"></div>
-	<div class="grid-footer-toolbar">
-		<span class="text-muted">
-            <kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
+	<div class="grid-footer-toolbar clearfix">
+		<span class="text-muted hidden-xs">
+            <i class="octicon octicon-keyboard"></i> &ndash;
+			<kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
         </span>
 		<button class="btn btn-default btn-xs pull-right grid-append-row"
 			style="margin-left: 7px;">
diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js
index 29d6661e80..dc99bb31bc 100644
--- a/frappe/public/js/frappe/form/layout.js
+++ b/frappe/public/js/frappe/form/layout.js
@@ -168,7 +168,7 @@ frappe.ui.form.Layout = Class.extend({
 			}
 			if(df.label || df.description) {
 				// spacer
-				$('<div class="col-sm-12"></div>')
+				$('<div class="col-sm-12 hidden-xs"></div>')
 					.appendTo(this.section)
 					.css({"height": "10px"});
 			}
diff --git a/frappe/public/js/frappe/ui/modal.html b/frappe/public/js/frappe/ui/modal.html
index 177bc4eeae..5b74003208 100644
--- a/frappe/public/js/frappe/ui/modal.html
+++ b/frappe/public/js/frappe/ui/modal.html
@@ -9,7 +9,9 @@
                     <div class="col-xs-5">
                         <div class="text-right buttons">
             				<button type="button" class="btn btn-default btn-sm"
-                                data-dismiss="modal">{%= __("Close") %}</button>
+                                data-dismiss="modal">
+								<i class="octicon octicon-x visible-xs" style="padding: 1px 0px;"></i>
+								<span class="hidden-xs">{%= __("Close") %}</span></button>
             				<button type="button" class="btn btn-primary btn-sm hide">
                                 {%= __("Confirm") %}</button>
                         </div>
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index a0a829594f..ae9065e4d3 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -35,7 +35,7 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	margin-top: 10px;
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
-	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 5px rgba(0, 0, 0, 0.3);
 }
 
 .app-icon {
@@ -60,7 +60,6 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 .app-icon svg, .app-icon img {
 	height: 32px;
 	width: 32px;
-	margin-top: -3px;
 }
 
 .app-icon path {
diff --git a/frappe/public/less/form.less b/frappe/public/less/form.less
index a85c464b91..b675b20bff 100644
--- a/frappe/public/less/form.less
+++ b/frappe/public/less/form.less
@@ -82,6 +82,10 @@
 .timeline-item {
 	margin-top: 0px;
 	padding: 15px 30px;
+
+	.icon-fixed-width {
+		text-align: center;
+	}
 }
 
 .timeline-item .reply {
@@ -96,7 +100,7 @@
 
 .timeline-head {
 	background-color: @light-bg;
-	padding: 30px 30px 15px 30px;
+	padding: 15px 30px;
 	border-bottom: 1px solid @border-color;
 }
 
diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less
index 866e9b254d..53bfafb5a7 100644
--- a/frappe/public/less/form_grid.less
+++ b/frappe/public/less/form_grid.less
@@ -94,7 +94,7 @@
 }
 
 .grid-row-open .form-in-grid {
-	max-height: 1200px;
+	max-height: 10000px;
 
 	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
 	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
diff --git a/frappe/public/less/mixins.less b/frappe/public/less/mixins.less
index 80ca166a83..e6b2d5e737 100644
--- a/frappe/public/less/mixins.less
+++ b/frappe/public/less/mixins.less
@@ -20,7 +20,6 @@
 	*margin-right: .3em;
 	display: inline-block;
 	speak: none;
-	color: @breadcrumb-divider-color;
 	font-size: 24px;
 	transition: 0.2s;
 	position: relative;
@@ -28,11 +27,13 @@
 }
 
 .breadcrumb-divider-left() {
-	content: "\f104" !important;
-	margin-right: 5px !important;
+	content: "\f104";
+	margin-right: 5px;
+	color: @navbar-default-color;
 }
 
 .breadcrumb-divider-right() {
 	content: "\f105";
 	margin-right: 15px;
+	color: @breadcrumb-divider-color;
 }
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index d8e71ae059..ce3ec259b1 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -2,6 +2,34 @@
 @import "mixins.less";
 
 @media(max-width: 767px) {
+	.modal {
+		.modal-dialog {
+			margin: 0px;
+			padding: 0px;
+			width: 100%;
+			height: 100%;
+
+			position: fixed;
+			top: 0px;
+			bottom: 0px;
+			left: 0px;
+			right: 0px;
+			overflow-y: auto;
+			background-color: #fff;
+		}
+
+		.modal-content {
+			border-radius: 0px;
+			border: none;
+			box-shadow: none;
+			height: 100%;
+		}
+
+		.modal-body .form-layout {
+			margin: -15px;
+		}
+	}
+
 	.layout-main-section-wrapper {
 		padding: 0px;
 	}
@@ -24,8 +52,71 @@
 		border-radius: none;
 	}
 
+	// forms
+
+	.form-page {
+		.form-section {
+			padding: 0px 15px;
+		}
+
+		.frappe-control {
+			padding: 7px 15px;
+			border-bottom: 1px solid @border-color;
+			margin: 0px -15px;
+
+			.link-btn {
+				top: -2px;
+			}
+
+			.like-disabled-input {
+				min-height: none !important;
+			}
+		}
+
+		.form-section:last-child .form-column:last-child .frappe-control:last-child {
+			border-bottom: none;
+		}
+
+		.form-control {
+			border: none;
+			box-shadow: none;
+			background-color: inherit;
+			height: auto;
+			padding: 0px;
+			margin-bottom: 7px;
+			border-radius: 0px;
+
+			// make all fields left-aligned!
+			text-align: left !important;
+		}
+
+		.form-control:focus {
+			box-shadow: none;
+		}
+	}
+
+	// timeline
+
+	.timeline {
+		border-left: none !important;
+		border-right: none !important;
+
+		.timeline-head {
+			padding: 7px 15px;
+		}
+
+		.timeline-item {
+			padding: 15px;
+			border-bottom: 1px dashed @border-color;
+		}
+
+		.timeline-item:last-child {
+			border-bottom: none;
+		}
+	}
+
 	// listviews
-	.doclist-row {
+	.doclist-row& {
 		position: relative;
 		padding-right: 10px;
 
@@ -33,10 +124,9 @@
 			left: 18px;
 			text-align: left;
 			margin-top: 3px;
-			// left: 83.33333333%;
 		}
 
-		.doclist-row.has-checkbox .list-row-id {
+		&.has-checkbox .list-row-id {
 			left: 40px;
 		}
 
@@ -67,7 +157,6 @@
 			}
 		}
 	}
-
 }
 
 @media(max-width: 991px) {
@@ -127,6 +216,7 @@
 		display: inline-block !important;
 		padding-left: 0px;
 		margin-left: 0px;
+		padding-top: 6px;
 
 		&:before {
 			.breadcrumb-divider();
@@ -136,10 +226,24 @@
 		&:hover:before,
 		&:focus:before,
 		&:active:before {
-			color: @text-color;
+			color: @text-color !important;
 		}
 	}
 
+	body[data-route^="Module"] {
+		.page-title {
+			width: 100%;
+		}
+
+		.page-actions {
+			display: none !important;
+		}
+	}
+
+	.module-item {
+		padding: 7px 0px !important;
+	}
+
 	#navbar-breadcrumbs {
 		margin: 0px;
 		display: inline-block;
@@ -245,7 +349,7 @@
 		font-size: inherit;
 		position: relative;
 		right: 7px;
-		top: -21px;
+		top: -20px;
 		height: 0;
 	}