Merge pull request #2231 from netchampfaris/ui-fixes

[ui] z-index fix and filter-dashboard css cleanup

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

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;

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

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

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

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

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;

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

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

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;

frappe/public/js/frappe/ui/filters/filter_dashboard.html

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

frappe/public/js/frappe/ui/filters/filter_dashboard_head.html

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

frappe/public/js/frappe/ui/filters/filter_dashboard_value.html

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

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

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

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

frappe/public/less/form_grid.less

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

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 {
@@ -65,6 +65,10 @@
 	.filter_field {
 		padding-right: 15px;
 		width: calc(100% - 36px);
+
+		.frappe-control {
+			position: relative;
+		}
 	}
 }