[design] better touchscreen scroll behavior for input fields on defocus, fixed ios safari checkbox rendering in lists

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

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");

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 %}">

frappe/public/css/list.css

@@ -144,7 +144,7 @@
   font-weight: bold;
 }
 .list-col {
-  height: 18px;
+  height: 20px;
 }
 .list-value {
   vertical-align: middle;

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

frappe/public/js/frappe/dom.js

@@ -112,6 +112,9 @@ frappe.dom = {
 				savedSel.select();
 			}
 		}
+	},
+	is_touchscreen: function() {
+		return ('ontouchstart' in window)
 	}
 }
 

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

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

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

frappe/public/less/list.less

@@ -185,7 +185,7 @@
 }
 
 .list-col {
-	height: 18px;
+	height: 20px;
 }
 
 .list-value {

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;