[fix] grid css for small, narrow grids

frappe/public/css/form_grid.css

@@ -8,6 +8,7 @@
   font-weight: bold;
 }
 .grid-row {
+  padding: 0px 15px;
   border-bottom: 1px solid #d1d8dd;
   -webkit-transition: 0.2s;
   -o-transition: 0.2s;
@@ -21,9 +22,6 @@
 .grid-form-heading {
   cursor: pointer;
 }
-.data-row.row {
-  margin: 0px;
-}
 .data-row textarea {
   height: 40px;
 }
@@ -57,21 +55,16 @@
 }
 .row-index {
   text-align: right;
-  width: 40px;
-  margin-left: -7px;
-  float: left;
 }
-.grid-row > .row {
-  margin-right: 15px !important;
+.grid-row > .row .col:last-child {
+  margin-right: -10px;
 }
 .grid-row > .row .col {
   padding-left: 10px;
   padding-right: 10px;
 }
 .grid-body .btn-open-row {
-  margin: -10px;
-  padding: 10px;
-  padding-top: 15px;
+  padding-top: 5px;
 }
 .grid-body .editable-row .grid-static-col {
   padding: 0px !important;
@@ -157,6 +150,7 @@
   opacity: 1;
   height: auto;
   overflow: visible;
+  margin: 0px -15px;
 }
 .grid-form-heading {
   padding: 10px 15px;

frappe/public/css/mobile.css

@@ -56,26 +56,6 @@ body {
   background-color: #F0F4F7;
 }
 @media (max-width: 991px) {
-  input[type='checkbox'] {
-    -webkit-appearance: none;
-    width: 12px;
-    height: 12px;
-    background: white;
-    border-radius: 6px;
-    border: 1px solid #d1d8dd;
-    display: inline-block;
-  }
-  input[type='checkbox']:checked {
-    background: #3b99fc;
-    border-color: #3b99fc;
-  }
-  input.list-select-all {
-    margin-top: 0px;
-  }
-  .input-area input[type='checkbox'] {
-    margin-top: 2px;
-    margin-left: -23px;
-  }
   .intro-area,
   .footnote-area {
     padding: 15px;

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

@@ -357,7 +357,7 @@ frappe.ui.form.Grid = Class.extend({
 					}
 
 					total_colsize += df.colsize
-					if(total_colsize > 12)
+					if(total_colsize > 11)
 						return false;
 					this.visible_columns.push([df, df.colsize]);
 				}
@@ -365,11 +365,11 @@ frappe.ui.form.Grid = Class.extend({
 
 		// redistribute if total-col size is less than 12
 		var passes = 0;
-		while(total_colsize < 12 && passes < 12) {
+		while(total_colsize < 11 && passes < 12) {
 			for(var i in this.visible_columns) {
 				var df = this.visible_columns[i][0];
 				var colsize = this.visible_columns[i][1];
-				if(colsize > 1 && colsize < 12
+				if(colsize > 1 && colsize < 11
 					&& !in_list(frappe.model.std_fields_list, df.fieldname)) {
 
 					if (passes < 3 && ["Int", "Currency", "Float", "Check", "Percent"].indexOf(df.fieldtype)!==-1) {
@@ -381,7 +381,7 @@ frappe.ui.form.Grid = Class.extend({
 					total_colsize++;
 				}
 
-				if(total_colsize >= 12)
+				if(total_colsize > 10)
 					break;
 			}
 			passes++;
@@ -613,7 +613,7 @@ frappe.ui.form.GridRow = Class.extend({
 
 		// index (1, 2, 3 etc)
 		if(!this.row_index) {
-			this.row_index = $('<div class="row-index">' + (this.doc ? this.doc.idx : "&nbsp;")+ '</div>')
+			this.row_index = $('<div class="row-index col col-xs-1">' + (this.doc ? this.doc.idx : "&nbsp;")+ '</div>')
 				.appendTo(this.row)
 				.on('click', function() { me.toggle_view(); });
 		} else {
@@ -637,13 +637,14 @@ frappe.ui.form.GridRow = Class.extend({
 		if(this.doc) {
 			// remove row
 			if(!this.open_form_button) {
-				this.open_form_button = $('<a class="close pull-right btn-open-row">\
+				this.open_form_button = $('<a class="close btn-open-row">\
 					<span class="octicon octicon-triangle-down"></span></a>')
-					.appendTo(this.row)
+					.appendTo($('<div class="col col-xs-1"></div>').appendTo(this.row))
 					.on('click', function() { me.toggle_view(); return false; });
 
 				if(this.row.width() < 400) {
-					this.open_form_button.css({'padding-right': '1px'});
+					// narrow
+					this.open_form_button.css({'margin-right': '-2px'});
 				}
 			}
 		}

frappe/public/less/form_grid.less

@@ -13,6 +13,7 @@
 }
 
 .grid-row {
+	padding: 0px 15px;
 	border-bottom: 1px solid @border-color;
 	.transition(.2s);
 }
@@ -25,10 +26,6 @@
 	cursor: pointer;
 }
 
-.data-row.row {
-	margin: 0px;
-}
-
 .data-row textarea {
 	height: 40px;
 }
@@ -74,13 +71,12 @@
 
 .row-index {
 	text-align: right;
-	width: 40px;
-	margin-left: -7px;
-	float: left;
 }
 
 .grid-row > .row {
-	margin-right: 15px !important;
+	.col:last-child {
+		margin-right: -10px;
+	}
 
 	.col {
 		padding-left: 10px;
@@ -90,9 +86,7 @@
 
 .grid-body {
 	.btn-open-row {
-		margin: -10px;
-		padding: 10px;
-		padding-top: 15px;
+		padding-top: 5px;
 	}
 
 	.editable-row {
@@ -204,6 +198,7 @@
 	opacity: 1;
 	height: auto;
 	overflow: visible;
+	margin: 0px -15px;
 }
 
 .grid-form-heading {

frappe/public/less/mobile.less

@@ -3,27 +3,6 @@
 @import "offcanvas.less";
 
 @media(max-width: 991px) {
-	input[type='checkbox'] {
-	    -webkit-appearance:none;
-	    width: 12px;
-	    height: 12px;
-	    background: white;
-	    border-radius: 6px;
-	    border: 1px solid @border-color;
-		display: inline-block;
-	}
-	input[type='checkbox']:checked {
-	    background: @checkbox-color;
-		border-color: @checkbox-color;
-	}
-	input.list-select-all {
-		margin-top: 0px;
-	}
-	.input-area input[type='checkbox'] {
-		margin-top: 2px;
-		margin-left: -23px;
-	}
-
 	.intro-area,
 	.footnote-area {
 		padding: 15px;