From 44c969fee6a4abf6a9dcb538e68cd6a1c5fbe652 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Mon, 18 Jul 2016 14:30:03 +0530 Subject: [PATCH] [fix] grid css for small, narrow grids --- frappe/public/css/form_grid.css | 16 +++++----------- frappe/public/css/mobile.css | 20 -------------------- frappe/public/js/frappe/form/grid.js | 17 +++++++++-------- frappe/public/less/form_grid.less | 17 ++++++----------- frappe/public/less/mobile.less | 21 --------------------- 5 files changed, 20 insertions(+), 71 deletions(-) diff --git a/frappe/public/css/form_grid.css b/frappe/public/css/form_grid.css index 065f40fe6f..2fe303160c 100644 --- a/frappe/public/css/form_grid.css +++ b/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; diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css index 57e4e1a511..6b5e5b8be6 100644 --- a/frappe/public/css/mobile.css +++ b/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; diff --git a/frappe/public/js/frappe/form/grid.js b/frappe/public/js/frappe/form/grid.js index 05728e9c2a..17960389ef 100644 --- a/frappe/public/js/frappe/form/grid.js +++ b/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 = $('
' + (this.doc ? this.doc.idx : " ")+ '
') + this.row_index = $('
' + (this.doc ? this.doc.idx : " ")+ '
') .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 = $('\ + this.open_form_button = $('\ ') - .appendTo(this.row) + .appendTo($('
').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'}); } } } diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less index 6c56f33631..2113cff8de 100644 --- a/frappe/public/less/form_grid.less +++ b/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 { diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less index 4d9dbd806d..6512957e6b 100644 --- a/frappe/public/less/mobile.less +++ b/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;