Merge pull request #1216 from sg00dwin/default-filter-width

Merged by openshift-bot

Author: OpenShift Bot

app/styles/_data-toolbar.less

@@ -1,6 +1,13 @@
 /* Data toolbar
    - Includes customizations for label filter input and active filter
 ---------------------------------------------------------------------------- */
+// @screen-md-min - (sidebar-left + left + right margin); 992 - (145 + 30 + 30) = 787
+@data-toolbar-filter-max-width:   (@screen-md-min - (@sidebar-left-width-md + @middle-content-container-padding-lg + @middle-content-container-padding-lg));
+@label-filter-input-width-lg: 730px; // max width available for input at > 992
+@label-filter-input-width-md: 540px; // max width available for input at > 768
+@label-filter-input-width-sm: 400px; // max width available for input at > 480
+@label-filter-input-width-xs: 240px; // 320 - (40 + 40); container - ((left + right margin) + button)
+
 
 .data-toolbar {
   padding: 5px 0;
@@ -26,13 +33,20 @@
       .flex(@columns: 1 1 0%);
     }
     @media (min-width: @screen-md-min) {
-      max-width: 600px;
+      max-width: @data-toolbar-filter-max-width;
     }
     .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input {
       &, & input {
         font-size: @font-size-base;
       }
     }
+    .label-filter-key .selectize-input.not-full {
+      // Increase default input click target
+      width: @label-filter-input-width-xs;
+      @media (min-width: @screen-xs-min) { width: @label-filter-input-width-sm;}
+      @media (min-width: @screen-sm-min) { width: @label-filter-input-width-md;}
+      @media (min-width: @screen-md-min) { width: @label-filter-input-width-lg;}
+    }
     .form-group {
       margin-bottom: 0;
     }

dist/styles/main.css

@@ -4137,9 +4137,16 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 .data-toolbar{padding:5px 0}
 .data-toolbar.other-resources-toolbar .data-toolbar-dropdown{min-width:210px}
 .data-toolbar .checkbox{margin-bottom:0;margin-top:10px}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:240px}
+@media (min-width:480px){.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:400px}
+}
 @media (min-width:768px){.data-toolbar{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
 .data-toolbar .checkbox{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;margin-left:20px;margin-top:3px;text-align:right}
 .data-toolbar .data-toolbar-filter{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:540px}
+}
+@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:787px}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:730px}
 }
 .data-toolbar .data-toolbar-filter .form-group{margin-bottom:0}
 .data-toolbar .data-toolbar-views{-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;text-align:right}
@@ -4193,8 +4200,7 @@ h2+.list-view-pf{margin-top:20px}
 .list-view-pf-additional-info-item{display:inline-block;text-align:left}
 .list-view-pf-description{-ms-flex:1 0 55%;flex:1 0 55%}
 .list-view-pf-main-info{padding-bottom:10px;padding-top:10px}
-@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:600px}
-.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
+@media (min-width:992px){.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
 .list-view-pf-additional-info{width:40%}
 .list-view-pf-description{width:60%}
 }