Merge pull request #2231 from netchampfaris/ui-fixes

[ui] z-index fix and filter-dashboard css cleanup
This commit is contained in:
Nabin Hait 2016-10-31 15:02:35 +05:30 committed by GitHub
commit e5b47eab16
18 changed files with 78 additions and 103 deletions

View file

@ -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;
}

View file

@ -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;

View file

@ -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;
}

View file

@ -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 {

View file

@ -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;
}

View file

@ -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%;
}

View file

@ -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;

View file

@ -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;
}

View file

@ -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%;
}

View file

@ -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;

View file

@ -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>

View file

@ -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"

View file

@ -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>

View file

@ -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) {

View file

@ -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;

View file

@ -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;
}

View file

@ -197,6 +197,7 @@
.frappe-control {
margin-bottom: 0px;
position: relative;
}
.col-sm-6 {

View file

@ -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;
}
}
}