From aa63302acd7ff6f11ddf048c06401d69684396bb Mon Sep 17 00:00:00 2001
From: Anand Doshi <anand@erpnext.com>
Date: Wed, 11 Feb 2015 10:01:20 +0530
Subject: [PATCH] [design] better touchscreen scroll behavior for input fields
 on defocus, fixed ios safari checkbox rendering in lists

---
 frappe/core/page/desktop/desktop.js          |  2 +-
 frappe/desk/page/messages/messages.js        |  8 ++++++++
 frappe/desk/page/messages/messages_main.html |  2 +-
 frappe/public/css/list.css                   |  2 +-
 frappe/public/css/mobile.css                 | 16 +++++++++++-----
 frappe/public/js/frappe/dom.js               |  3 +++
 frappe/public/js/frappe/form/control.js      | 13 +++++++++++++
 frappe/public/js/frappe/form/sidebar.js      |  4 +---
 frappe/public/js/frappe/ui/page.js           |  6 ++++++
 frappe/public/less/list.less                 |  2 +-
 frappe/public/less/mobile.less               | 19 ++++++++++++++-----
 11 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/frappe/core/page/desktop/desktop.js b/frappe/core/page/desktop/desktop.js
index f2491b7da0..4a349cada5 100644
--- a/frappe/core/page/desktop/desktop.js
+++ b/frappe/core/page/desktop/desktop.js
@@ -116,7 +116,7 @@ $.extend(frappe.desktop, {
 	},
 
 	make_sortable: function() {
-		if ('ontouchstart' in window) {
+		if (frappe.dom.is_touchscreen()) {
 			return;
 		}
 
diff --git a/frappe/desk/page/messages/messages.js b/frappe/desk/page/messages/messages.js
index 4b505c362a..5f9fd4bd46 100644
--- a/frappe/desk/page/messages/messages.js
+++ b/frappe/desk/page/messages/messages.js
@@ -75,6 +75,14 @@ frappe.desk.pages.messages = Class.extend({
 
 		this.page.main.html($(frappe.render_template("messages_main", { "contact": contact })));
 
+		this.page.main.find(".messages-textarea").on("focusout", function() {
+			// on touchscreen devices, scroll to top
+			// so that static navbar and page head don't overlap the textarea
+			if (frappe.dom.is_touchscreen()) {
+				frappe.ui.scroll($(this).parents(".message-box"));
+			}
+		});
+
 		this.page.main.find(".btn-post").on("click", function() {
 			var btn = $(this);
 			var message_box = btn.parents(".message-box");
diff --git a/frappe/desk/page/messages/messages_main.html b/frappe/desk/page/messages/messages_main.html
index b401b009ad..33b95cb8c0 100644
--- a/frappe/desk/page/messages/messages_main.html
+++ b/frappe/desk/page/messages/messages_main.html
@@ -5,7 +5,7 @@
     	</span>
     	<div class="media-body">
     		<textarea style="height: 120px" style="margin-top: 10px;"
-    			class="form-control"></textarea>
+    			class="form-control messages-textarea"></textarea>
     	</div>
 		<div style="padding-top: 15px;">
     		<button class="pull-right btn btn-default btn-sm btn-post" data-contact="{%= contact %}">
diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css
index 64d5adee77..f6b0ceb485 100644
--- a/frappe/public/css/list.css
+++ b/frappe/public/css/list.css
@@ -144,7 +144,7 @@
   font-weight: bold;
 }
 .list-col {
-  height: 18px;
+  height: 20px;
 }
 .list-value {
   vertical-align: middle;
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 1907088178..f55dd23d34 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -113,8 +113,7 @@
   .doclist-row .list-row-indicator {
     position: absolute;
     right: 0px;
-    margin-top: 2px;
-    top: -19px;
+    top: -20px;
   }
   .doclist-row .list-row-modified {
     margin-right: -10px;
@@ -144,15 +143,19 @@
     text-align: center;
   }
   #page-messages .layout-side-section {
-    float: left;
-    padding-left: 0px;
+    position: relative;
+    left: 0px;
     border-right: 1px solid #d1d8dd;
+    padding-left: 0px;
+    float: left;
+    width: 76px;
   }
   #page-messages .layout-main-section-wrapper {
     position: absolute;
-    left: 74px;
+    left: 75px;
     right: 0px;
     border-left: 1px solid #d1d8dd;
+    float: left;
   }
   #page-messages .module-sidebar-item {
     margin: 0px;
@@ -179,6 +182,9 @@
   .grid-row-open {
     top: 0;
   }
+  .layout-main {
+    position: relative;
+  }
   body[data-route^="Form"] .page-title h1 {
     margin-top: 14px;
   }
diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index 1a571d8ed6..1559dd65eb 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -112,6 +112,9 @@ frappe.dom = {
 				savedSel.select();
 			}
 		}
+	},
+	is_touchscreen: function() {
+		return ('ontouchstart' in window)
 	}
 }
 
diff --git a/frappe/public/js/frappe/form/control.js b/frappe/public/js/frappe/form/control.js
index ed0f98f9bc..a9cbfe58de 100644
--- a/frappe/public/js/frappe/form/control.js
+++ b/frappe/public/js/frappe/form/control.js
@@ -264,6 +264,18 @@ frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
 			}
 		});
 	},
+	bind_focusout: function() {
+		// on touchscreen devices, scroll to top
+		// so that static navbar and page head don't overlap the input
+		if (frappe.dom.is_touchscreen()) {
+			var me = this;
+			this.$input && this.$input.on("focusout", function() {
+				if (frappe.dom.is_touchscreen()) {
+					frappe.ui.scroll(me.$wrapper);
+				}
+			});
+		}
+	},
 	set_label: function(label) {
 		if(label) this.df.label = label;
 
@@ -312,6 +324,7 @@ frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
 		this.input = this.$input.get(0);
 		this.has_input = true;
 		this.bind_change_event();
+		this.bind_focusout();
 	},
 	set_input_attributes: function() {
 		this.$input
diff --git a/frappe/public/js/frappe/form/sidebar.js b/frappe/public/js/frappe/form/sidebar.js
index 68a650fc20..a66a9c2171 100644
--- a/frappe/public/js/frappe/form/sidebar.js
+++ b/frappe/public/js/frappe/form/sidebar.js
@@ -32,9 +32,7 @@ frappe.ui.form.Sidebar = Class.extend({
 		// scroll to comments
 		this.comments.on("click", function() {
 			$(".offcanvas").removeClass("active-left active-right");
-
-			$(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top
-				- $(".navbar").height() - $(".page-head").height());
+			frappe.ui.scroll(me.frm.footer.wrapper.find(".form-comments"));
 		});
 	},
 
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index e8d3d3664a..8e2275ba10 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -337,3 +337,9 @@ frappe.ui.Page = Class.extend({
 		this.views[name].toggle(true);
 	}
 });
+
+frappe.ui.scroll = function(element) {
+	var header_offset = $(".navbar").height() + $(".page-head").height();
+	console.log($(element).offset().top - header_offset);
+	$(window).scrollTop($(element).offset().top - header_offset);
+};
diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less
index b96758939c..9587813c2a 100644
--- a/frappe/public/less/list.less
+++ b/frappe/public/less/list.less
@@ -185,7 +185,7 @@
 }
 
 .list-col {
-	height: 18px;
+	height: 20px;
 }
 
 .list-value {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 6c29795886..54dcf43e7a 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -154,8 +154,7 @@
 		.list-row-indicator {
 			position: absolute;
 			right: 0px;
-			margin-top: 2px;
-			top: -19px;
+			top: -20px;
 		}
 
 		.list-row-modified {
@@ -190,16 +189,22 @@
 
 	#page-messages {
 		.layout-side-section {
-			float: left;
-			padding-left: 0px;
+			position: relative;
+			left: 0px;
 			border-right: 1px solid @border-color;
+			padding-left: 0px;
+			float: left;
+
+			// hack! to prevent overlap of borders
+			width: 76px;
 		}
 
 		.layout-main-section-wrapper {
 			position: absolute;
-			left: 74px;
+			left: 75px;
 			right: 0px;
 			border-left: 1px solid @border-color;
+			float: left;
 		}
 
 		.module-sidebar-item {
@@ -235,6 +240,10 @@
 		top: 0;
 	}
 
+	.layout-main {
+		position: relative;
+	}
+
 	body[data-route^="Form"] {
 		.page-title h1 {
 			margin-top: 14px;