From 2cbab3e6daead094a50aecb60640856effabc094 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Thu, 27 Oct 2016 12:31:15 +0530 Subject: [PATCH 1/4] [ui] fix datepicker z-index --- frappe/public/less/desk.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index c170b2abdf..652853d8bb 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -148,6 +148,10 @@ textarea.form-control { z-index: 100 !important; } +.ui-datepicker { + z-index: 100 !important; +} + .ui-datepicker .ui-datepicker-header { border-radius: 0px !important; } From 49b677a77cd3143a1d052e18683cc4ca71a82ed4 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Fri, 28 Oct 2016 18:21:37 +0530 Subject: [PATCH 2/4] [ui] z-index fix, added compiled css --- frappe/public/css/desk.css | 19 +++++++++++-------- frappe/public/css/docs.css | 8 -------- frappe/public/css/form_grid.css | 8 -------- frappe/public/css/mobile.css | 8 -------- frappe/public/css/navbar.css | 8 -------- frappe/public/css/page.css | 8 -------- frappe/public/css/sidebar.css | 8 -------- frappe/public/css/website.css | 16 +++++++--------- frappe/public/less/desk.less | 1 + 9 files changed, 19 insertions(+), 65 deletions(-) diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 87d4d9ae86..52f7b24406 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } @@ -238,6 +230,13 @@ a.no-decoration:active { letter-spacing: 0.4px; color: #8D99A6; } +.ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + vertical-align: middle; +} .nav-pills a, .nav-pills a:hover { border-bottom: none; @@ -357,6 +356,9 @@ fieldset[disabled] .form-control { .ui-datepicker { z-index: 100 !important; } +.ui-datepicker { + z-index: 100 !important; +} .ui-datepicker .ui-datepicker-header { border-radius: 0px !important; } @@ -386,6 +388,7 @@ fieldset[disabled] .form-control { overflow-y: auto; overflow-x: hidden; z-index: 1041; + position: initial; } .ui-autocomplete a { transition: none; diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css index 6d961f4934..b143e3af85 100644 --- a/frappe/public/css/docs.css +++ b/frappe/public/css/docs.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} .navbar .dropdown-toggle { padding-top: 8px; padding-bottom: 8px; diff --git a/frappe/public/css/form_grid.css b/frappe/public/css/form_grid.css index 28d5d0db54..4abc8c515a 100644 --- a/frappe/public/css/form_grid.css +++ b/frappe/public/css/form_grid.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} .form-grid { border: 1px solid #d1d8dd; border-radius: 3px; diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css index 4a7f586550..d247cadca0 100644 --- a/frappe/public/css/mobile.css +++ b/frappe/public/css/mobile.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} html { min-height: 100%; } diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css index ffc5546f60..e7675b912e 100644 --- a/frappe/public/css/navbar.css +++ b/frappe/public/css/navbar.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} .navbar .dropdown-toggle { padding-top: 8px; padding-bottom: 8px; diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css index 8db8738c14..c8c0b02483 100644 --- a/frappe/public/css/page.css +++ b/frappe/public/css/page.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} .page-container { margin-top: 40px; } diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css index 6a6225f0d1..1541244de3 100644 --- a/frappe/public/css/sidebar.css +++ b/frappe/public/css/sidebar.css @@ -1,12 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} html { min-height: 100%; } diff --git a/frappe/public/css/website.css b/frappe/public/css/website.css index a2f4d8f0e5..e1b9b35f1e 100644 --- a/frappe/public/css/website.css +++ b/frappe/public/css/website.css @@ -1,13 +1,4 @@ /* the element that this class is applied to, should have a max width for this to work*/ -.text-ellipsis, -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - vertical-align: middle; -} - body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } @@ -239,6 +230,13 @@ a.no-decoration:active { letter-spacing: 0.4px; color: #8D99A6; } +.ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + vertical-align: middle; +} .avatar { display: inline-block; vertical-align: middle; diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index 652853d8bb..ca0d0ef579 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -185,6 +185,7 @@ textarea.form-control { overflow-y: auto; overflow-x: hidden; z-index: 1041; + position: initial; } .ui-autocomplete a { From 67a376cd70e1c1a5e355b9124fc639c2d45065fd Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 29 Oct 2016 20:48:25 +0530 Subject: [PATCH 3/4] [ui] fix z-index problem --- frappe/public/css/desk.css | 4 +++- frappe/public/css/list.css | 3 +++ frappe/public/less/desk.less | 5 ++++- frappe/public/less/list.less | 4 ++++ 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 52f7b24406..627dfb29ea 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -388,7 +388,6 @@ fieldset[disabled] .form-control { overflow-y: auto; overflow-x: hidden; z-index: 1041; - position: initial; } .ui-autocomplete a { transition: none; @@ -474,6 +473,9 @@ fieldset[disabled] .form-control { .modal .hasDatepicker { z-index: 1140; } +.link-field.ui-front { + z-index: inherit; +} .modal .link-field .ui-autocomplete { z-index: 1141; } diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css index c4eaff5d7a..fdc9f4a7e7 100644 --- a/frappe/public/css/list.css +++ b/frappe/public/css/list.css @@ -52,6 +52,9 @@ padding-right: 15px; width: calc(64%); } +.filter-box .filter_field .frappe-control { + position: relative; +} .ui-autocomplete .filter-field-select { cursor: pointer; } diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index ca0d0ef579..e92d781322 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -185,7 +185,6 @@ textarea.form-control { overflow-y: auto; overflow-x: hidden; z-index: 1041; - position: initial; } .ui-autocomplete a { @@ -296,6 +295,10 @@ textarea.form-control { z-index: 1140; } +.link-field.ui-front { + z-index: inherit; +} + .modal .link-field .ui-autocomplete { // so that it appears over the datepicker field z-index: 1141; diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less index ed396f2355..c154424963 100644 --- a/frappe/public/less/list.less +++ b/frappe/public/less/list.less @@ -65,6 +65,10 @@ .filter_field { padding-right: 15px; width: calc(100% - 36px); + + .frappe-control { + position: relative; + } } } From 8a5f2149633236ba4285093ab50d2b5855375559 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 29 Oct 2016 22:00:08 +0530 Subject: [PATCH 4/4] [ui] cleanup filter dashboard css --- frappe/public/css/filter_dashboard.css | 29 +++++++++-------- frappe/public/css/form_grid.css | 1 + frappe/public/css/list.css | 1 - .../frappe/ui/filters/filter_dashboard.html | 4 +-- .../ui/filters/filter_dashboard_head.html | 4 +-- .../ui/filters/filter_dashboard_value.html | 4 +-- frappe/public/js/frappe/ui/filters/filters.js | 4 --- frappe/public/less/filter_dashboard.less | 31 +++++++++++-------- frappe/public/less/form_grid.less | 1 + frappe/public/less/list.less | 2 +- 10 files changed, 43 insertions(+), 38 deletions(-) diff --git a/frappe/public/css/filter_dashboard.css b/frappe/public/css/filter_dashboard.css index eaa206de54..d7a5f38bdf 100644 --- a/frappe/public/css/filter_dashboard.css +++ b/frappe/public/css/filter_dashboard.css @@ -2,22 +2,22 @@ .date-range-picker { font-size: 85%; } +.filter_area { + margin: 0 -15px; +} .filter-dashboard-wrapper { display: none; padding-bottom: 0px; } .list-filter-dashboard { - height: 202px; - margin-top: -10px; - margin-left: -15px; - margin-right: -14px; + border-top: 1px solid #d1d8dd; overflow-x: scroll; overflow-y: hidden; } .filter-header { border-bottom: 1px solid #d1d8dd; background-color: #F7FAFC; - padding: 3px 0px; + padding: 8px 15px; } .filter-header .search-dropdown { margin-top: -23px; @@ -26,33 +26,36 @@ font-size: 14px; } .filter-header .sort-dropdown { - margin-top: -20px; + margin-top: -16px; } .filter-header .dropdown-menu { min-width: 150px !important; } .filter-label { margin: 0px; - padding: 5px; color: #8D99A6; } .filter-dashboard-items { height: 187px; margin-right: -2px; + display: flex; } .filter-dash-item { - width: 180px; + flex-grow: 1; + min-width: 180px; float: left; height: 187px; border-right: 1px solid #d1d8dd; } .filter-input { - padding: 5px; - padding-top: 10px; + padding: 10px 15px; +} +.filter-input input { + height: 25px; } -.fitler-item-value, +.filter-item-value, .stat-no-records { - padding: 0px 5px; + padding: 0px 15px; } .filter-dash-item:after { /*top:-10px;*/ @@ -84,7 +87,7 @@ .filter-stat-link > .badge { position: absolute; float: right; - margin-right: 5px; + margin-right: 10px; margin-top: 2px; font-size: 11px; } diff --git a/frappe/public/css/form_grid.css b/frappe/public/css/form_grid.css index 4abc8c515a..b0614d1205 100644 --- a/frappe/public/css/form_grid.css +++ b/frappe/public/css/form_grid.css @@ -148,6 +148,7 @@ } .grid-row .frappe-control { margin-bottom: 0px; + position: relative; } .grid-row .col-sm-6 .editor-toolbar-text-group, .grid-row .col-sm-6 .editor-toolbar-align-group { diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css index fdc9f4a7e7..e620175d67 100644 --- a/frappe/public/css/list.css +++ b/frappe/public/css/list.css @@ -41,7 +41,6 @@ } .filter-box { border-top: 1px solid #d1d8dd; - margin: 0px -15px; padding: 10px 15px 3px; } .filter-box .remove-filter { diff --git a/frappe/public/js/frappe/ui/filters/filter_dashboard.html b/frappe/public/js/frappe/ui/filters/filter_dashboard.html index 10f3325691..284d30520c 100644 --- a/frappe/public/js/frappe/ui/filters/filter_dashboard.html +++ b/frappe/public/js/frappe/ui/filters/filter_dashboard.html @@ -1,6 +1,6 @@
-
-
+
+
diff --git a/frappe/public/js/frappe/ui/filters/filter_dashboard_head.html b/frappe/public/js/frappe/ui/filters/filter_dashboard_head.html index 4322661461..b50096b601 100644 --- a/frappe/public/js/frappe/ui/filters/filter_dashboard_head.html +++ b/frappe/public/js/frappe/ui/filters/filter_dashboard_head.html @@ -1,4 +1,4 @@ -
+
{{ label }}
{% if (type!=="Date" && type!=="Datetime") { %} @@ -12,7 +12,7 @@
-
+
+
  • {% if(!stat.length) { %}
  • {%= __("No records.") %}
    • {% } else { @@ -6,7 +6,7 @@ var stat_label = stat[i][0]; var stat_count = stat[i][1]; %} -
  • +
  • {%= __(labels.length>0? labels[i] : stat_label) %} {%= stat_count %} diff --git a/frappe/public/js/frappe/ui/filters/filters.js b/frappe/public/js/frappe/ui/filters/filters.js index 2cb872150c..fc1e5ff919 100644 --- a/frappe/public/js/frappe/ui/filters/filters.js +++ b/frappe/public/js/frappe/ui/filters/filters.js @@ -65,10 +65,6 @@ frappe.ui.FilterList = Class.extend({ }; var sidebar_stat = $(frappe.render_template("filter_dashboard_head", context)) .appendTo(this.wrapper.find(".filter-dashboard-items")); - - //adjust width for horizontal scrolling - var width = (me.stats.length)*180; - this.wrapper.find(".filter-dashboard-items").css("width",width); }, reload_stats: function(){ if(this.fresh) { diff --git a/frappe/public/less/filter_dashboard.less b/frappe/public/less/filter_dashboard.less index 819fea98f8..99b0eab5dd 100644 --- a/frappe/public/less/filter_dashboard.less +++ b/frappe/public/less/filter_dashboard.less @@ -5,16 +5,17 @@ font-size:85%; } +.filter_area { + margin: 0 -15px; +} + .filter-dashboard-wrapper { display: none; padding-bottom: 0px; } .list-filter-dashboard { - height: 202px; - margin-top: -10px; - margin-left: -15px; - margin-right: -14px; + border-top: 1px solid @border-color; overflow-x: scroll; overflow-y: hidden; } @@ -22,7 +23,7 @@ .filter-header { border-bottom: 1px solid @border-color; background-color: @panel-bg; - padding: 3px 0px; + padding: 8px 15px; .search-dropdown { margin-top: -23px; @@ -33,7 +34,7 @@ } .sort-dropdown { - margin-top: -20px; + margin-top: -16px; } .dropdown-menu { @@ -43,29 +44,33 @@ .filter-label { margin: 0px; - padding: 5px; color: @text-muted; } .filter-dashboard-items { height: 187px; margin-right: -2px; + display: flex; } .filter-dash-item { - width: 180px; + flex-grow: 1; + min-width: 180px; float: left; height: 187px; border-right:1px solid @border-color; } .filter-input { - padding: 5px; - padding-top: 10px; + padding: 10px 15px; + + input { + height: 25px; + } } -.fitler-item-value, .stat-no-records { - padding: 0px 5px; +.filter-item-value, .stat-no-records { + padding: 0px 15px; } .filter-dash-item:after { @@ -107,7 +112,7 @@ .filter-stat-link > .badge { position: absolute; float: right; - margin-right: 5px; + margin-right: 10px; margin-top: 2px; font-size: 11px; } diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less index 654a0a39d7..b1a55dd948 100644 --- a/frappe/public/less/form_grid.less +++ b/frappe/public/less/form_grid.less @@ -197,6 +197,7 @@ .frappe-control { margin-bottom: 0px; + position: relative; } .col-sm-6 { diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less index c154424963..8edcfe981f 100644 --- a/frappe/public/less/list.less +++ b/frappe/public/less/list.less @@ -54,7 +54,7 @@ .filter-box { border-top: 1px solid @border-color; - margin: 0px -15px; + // margin: 0px -15px; padding: 10px 15px 3px; .remove-filter {