Merge pull request #2231 from netchampfaris/ui-fixes
[ui] z-index fix and filter-dashboard css cleanup
This commit is contained in:
commit
e5b47eab16
18 changed files with 78 additions and 103 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -471,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.fitler-item-value,
|
||||
.filter-input input {
|
||||
height: 25px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -156,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 {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
}
|
||||
.filter-box {
|
||||
border-top: 1px solid #d1d8dd;
|
||||
margin: 0px -15px;
|
||||
padding: 10px 15px 3px;
|
||||
}
|
||||
.filter-box .remove-filter {
|
||||
|
|
@ -52,6 +51,9 @@
|
|||
padding-right: 15px;
|
||||
width: calc(64%);
|
||||
}
|
||||
.filter-box .filter_field .frappe-control {
|
||||
position: relative;
|
||||
}
|
||||
.ui-autocomplete .filter-field-select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="filter_area">
|
||||
<div class="filter-box filter-dashboard-wrapper">
|
||||
<div class="list-filter-dashboard row">
|
||||
<div class="filter-dashboard-wrapper">
|
||||
<div class="list-filter-dashboard">
|
||||
<div class="filter-dashboard-items">
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="filter-dash-item" style="">
|
||||
<div class="filter-dash-item">
|
||||
<div class="filter-header">
|
||||
<h6 class="h6 filter-label" data-name="{{ label }}">{{ label }}</h6>
|
||||
{% if (type!=="Date" && type!=="Datetime") { %}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown sort-dropdown pull-right" style="margin-right: 5px;">
|
||||
<div class="dropdown sort-dropdown pull-right">
|
||||
<i class="pull-right dropdown-toggle
|
||||
filter-sort-active octicon octicon-gear text-muted"
|
||||
data-name="{{ label }}" data-sort-by="number" data-order="desc"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<li class="divider"></li>
|
||||
<li class="divider" style="margin-bottom: 10px"></li>
|
||||
{% if(!stat.length) { %}
|
||||
<li class="stat-no-records text-muted small">{%= __("No records.") %}</li>
|
||||
{% } else {
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
var stat_label = stat[i][0];
|
||||
var stat_count = stat[i][1];
|
||||
%}
|
||||
<li class="fitler-item-value">
|
||||
<li class="filter-item-value">
|
||||
<a class="filter-stat-link badge-hover small" data-label="{%= stat_label %}" data-field="{%= field %}" title="{%= stat_label %} ">
|
||||
<span class="stat">{%= __(labels.length>0? labels[i] : stat_label) %}</span>
|
||||
<span class="badge">{%= stat_count %}</span>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -291,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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@
|
|||
|
||||
.frappe-control {
|
||||
margin-bottom: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
.filter-box {
|
||||
border-top: 1px solid @border-color;
|
||||
margin: 0px -15px;
|
||||
// margin: 0px -15px;
|
||||
padding: 10px 15px 3px;
|
||||
|
||||
.remove-filter {
|
||||
|
|
@ -65,6 +65,10 @@
|
|||
.filter_field {
|
||||
padding-right: 15px;
|
||||
width: calc(100% - 36px);
|
||||
|
||||
.frappe-control {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue