[design] sidebar fixes and grid open animation

frappe/core/page/desktop/desktop.js

@@ -28,17 +28,23 @@ frappe.pages['desktop'].refresh = function(wrapper) {
 frappe.desktop.refresh = function() {
 	frappe.desktop.render();
 
-	if (!('ontouchstart' in window)) {
-		new Sortable($("#icon-grid").get(0), {
-			onUpdate: function(event) {
-				new_order = [];
-				$("#icon-grid .case-wrapper").each(function(i, e) {
-					new_order.push($(this).attr("data-name"));
-				});
-				frappe.defaults.set_default("_desktop_items", new_order);
-			}
-		});
+	frappe.desktop.make_sortable();
+}
+
+frappe.desktop.make_sortable = function() {
+	if ('ontouchstart' in window) {
+		return;
 	}
+
+	new Sortable($("#icon-grid").get(0), {
+		onUpdate: function(event) {
+			new_order = [];
+			$("#icon-grid .case-wrapper").each(function(i, e) {
+				new_order.push($(this).attr("data-name"));
+			});
+			frappe.defaults.set_default("_desktop_items", new_order);
+		}
+	});
 }
 
 frappe.desktop.render = function() {

frappe/public/css/desk.css

@@ -9,7 +9,6 @@
 }
 html {
   min-height: 100%;
-  position: relative;
 }
 body {
   height: 100%;
@@ -23,6 +22,10 @@ body {
 }
 .desk-main-section {
   width: 100%;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  overflow-y: auto;
 }
 .desk-main-section-overlay {
   display: none;

frappe/public/css/form_grid.css

@@ -9,7 +9,6 @@
   font-weight: bold;
 }
 .grid-row {
-  padding: 10px 15px;
   border-bottom: 1px solid #d1d8dd;
   transition: 0.2s;
   -webkit-transition: 0.2s;
@@ -28,6 +27,9 @@
 .grid-body {
   background-color: #fff;
 }
+.form-grid .data-row {
+  padding: 10px 15px;
+}
 .grid-body .data-row {
   font-size: 12px;
 }
@@ -60,10 +62,22 @@
   margin-bottom: 5px;
 }
 .form-in-grid {
-  margin: -10px -15px;
+  background-color: white;
   z-index: 1021;
   position: relative;
-  background-color: white;
+  overflow: hidden;
+  max-height: 0;
+  transform: scale3d(0.9, 0, 1) translate3d(0, -30px, 0);
+  -webkit-transform: scale3d(0.9, 0, 1) translate3d(0, -30px, 0);
+  transform-origin: top;
+  -webkit-transform-origin: top;
+  transition: all 0.2s ease;
+  -webkit-transition: all 0.2s ease;
+}
+.grid-row-open .form-in-grid {
+  max-height: 1200px;
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
 }
 .grid-form-heading {
   padding: 10px 15px;

frappe/public/css/page.css

@@ -7,6 +7,7 @@
   position: fixed;
   left: 0;
   right: 0;
+  top: 41px;
   margin: auto;
   background-color: #fff;
   z-index: 2;

frappe/public/js/frappe/form/grid.js

@@ -127,6 +127,10 @@ frappe.ui.form.Grid = Class.extend({
 	},
 	make_sortable: function($rows) {
 		var me =this;
+		if ('ontouchstart' in window) {
+			return;
+		}
+
 		new Sortable($rows.get(0), {
 			handle: ".sortable-handle",
 			onUpdate: function(event, ui) {
@@ -405,8 +409,6 @@ frappe.ui.form.GridRow = Class.extend({
 			}
 		}
 
-		this.wrapper.toggleClass("grid-row-open", show);
-
 		if(show) {
 			this.show_form();
 		} else {
@@ -418,12 +420,12 @@ frappe.ui.form.GridRow = Class.extend({
 	},
 	show_form: function() {
 		if(!this.form_panel) {
-			this.form_panel = $('<div class="form-in-grid" style="display: none;"></div>')
+			this.form_panel = $('<div class="form-in-grid"></div>')
 				.appendTo(this.wrapper);
 		}
 		this.render_form();
 		this.row.toggle(false);
-		this.form_panel.toggle(true);
+		// this.form_panel.toggle(true);
 		frappe.dom.freeze();
 		if(this.frm.doc.docstatus===0) {
 			var first = this.form_area.find(":input:first");
@@ -436,14 +438,16 @@ frappe.ui.form.GridRow = Class.extend({
 			}
 		}
 		cur_frm.cur_grid = this;
+		this.wrapper.addClass("grid-row-open");
 	},
 	hide_form: function() {
-		if(this.form_panel)
-			this.form_panel.toggle(false);
+		// if(this.form_panel)
+		// 	this.form_panel.toggle(false);
 		frappe.dom.unfreeze();
 		this.row.toggle(true);
 		this.make_static_display();
 		cur_frm.cur_grid = null;
+		this.wrapper.removeClass("grid-row-open");
 	},
 	open_prev: function() {
 		if(this.grid.grid_rows[this.doc.idx-2]) {

frappe/public/less/desk.less

@@ -3,7 +3,6 @@
 
 html {
 	min-height: 100%;
-	position: relative;
 }
 
 body {
@@ -19,6 +18,10 @@ body {
 
 .desk-main-section {
 	width: 100%;
+	position: fixed;
+	top: 0px;
+	bottom: 0px;
+	overflow-y: auto;
 }
 
 .desk-main-section-overlay {

frappe/public/less/form_grid.less

@@ -13,7 +13,6 @@
 }
 
 .grid-row {
-	padding: 10px 15px;
 	border-bottom: 1px solid @border-color;
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
@@ -35,6 +34,10 @@
 	background-color: #fff;
 }
 
+.form-grid .data-row {
+	padding: 10px 15px;
+}
+
 .grid-body .data-row {
 	font-size: 12px;
 }
@@ -74,10 +77,27 @@
 }
 
 .form-in-grid {
-	margin: -10px -15px;
+	background-color: white;
 	z-index: 1021;
 	position: relative;
-	background-color: white;
+	overflow: hidden;
+	max-height: 0;
+
+	transform: scale3d(0.9, 0, 1) translate3d(0, -30px, 0);
+	-webkit-transform: scale3d(0.9, 0, 1) translate3d(0, -30px, 0);
+
+	transform-origin: top;
+	-webkit-transform-origin: top;
+
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+}
+
+.grid-row-open .form-in-grid {
+	max-height: 1200px;
+
+	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
 }
 
 .grid-form-heading {

frappe/public/less/page.less

@@ -10,6 +10,7 @@
 	position: fixed;
 	left: 0;
 	right: 0;
+	top: 41px;
 	margin: auto;
 	background-color: #fff;
 	z-index: 2;