UI: Mobile styles for faceted search

ui/app/breakpoints.js

@@ -0,0 +1,9 @@
+// Breakpoints are meant to match Bulma's breakpoints and any additional custom breakpoints
+// https://github.com/jgthms/bulma/blob/6ad2e3df0589e5d6ff7a9c03ee1c78a546bedeaf/sass/utilities/initial-variables.sass#L48-L59
+// https://github.com/jgthms/bulma/blob/6ad2e3df0589e5d6ff7a9c03ee1c78a546bedeaf/sass/utilities/mixins.sass#L71-L130
+export default {
+  mobile: '(max-width: 768px)',
+  tablet: '(min-width: 769px)',
+  desktop: '(min-width: 1088px)',
+  gutterless: '(max-width: 960px)',
+};

ui/app/components/search-box.js

@@ -22,6 +22,11 @@ export default Component.extend({
       this.set('_searchTerm', e.target.value);
       run.debounce(this, updateSearch, this.get('debounce'));
     },
+
+    clear() {
+      this.set('_searchTerm', '');
+      run.debounce(this, updateSearch, this.get('debounce'));
+    },
   },
 });
 

ui/app/controllers/jobs/index.js

@@ -9,6 +9,7 @@ import Searchable from 'nomad-ui/mixins/searchable';
 import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 
 export default Controller.extend(Sortable, Searchable, {
+  media: service(),
   system: service(),
   jobsController: controller('jobs'),
 

ui/app/styles/components.scss

@@ -17,6 +17,7 @@
 @import './components/nomad-logo';
 @import './components/page-layout';
 @import './components/primary-metric';
+@import './components/search-box';
 @import './components/simple-list';
 @import './components/status-text';
 @import './components/timeline';

ui/app/styles/components/dropdown.scss

@@ -125,6 +125,7 @@
     label {
       display: block;
       padding: 3px 8px;
+      min-width: 100px;
       cursor: pointer;
     }
 

ui/app/styles/components/search-box.scss

@@ -0,0 +1,70 @@
+.search-box {
+  width: 100%;
+  max-width: 300px;
+
+  position: relative;
+
+  .prefix-icon,
+  .suffix-icon {
+    position: absolute;
+    z-index: $z-icon-decorators;
+
+    path {
+      fill: $grey;
+    }
+  }
+
+  .prefix-icon {
+    left: 0.75em;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 15px;
+    height: 15px;
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .suffix-icon {
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 1.75em;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+
+    svg {
+      position: absolute;
+      display: block;
+      height: 10px;
+      width: 10px;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+
+    &:hover path {
+      fill: $grey-light;
+    }
+
+    &:focus {
+      outline: none;
+      path {
+        fill: $grey-light;
+      }
+    }
+  }
+
+  .control {
+    width: 100%;
+  }
+
+  input {
+    width: 100%;
+    padding: 0.4em 1.75em 0.4em 2.25em;
+  }
+}

ui/app/styles/core/columns.scss

@@ -1,5 +1,9 @@
 .columns {
   .column {
+    &.is-vcentered {
+      align-self: center;
+    }
+
     &.is-centered {
       align-self: center;
       justify-self: center;
@@ -9,5 +13,9 @@
     &.is-minimum {
       flex-grow: 0;
     }
+
+    &.is-right-aligned {
+      text-align: right;
+    }
   }
 }

ui/app/styles/core/forms.scss

@@ -23,7 +23,7 @@
 .textarea {
   @include input;
   box-shadow: none;
-  padding: 0.75em 1.5em;
+  padding: 0.4em 0.75em;
   height: auto;
 
   &::placeholder {

ui/app/styles/utils/z-indices.scss

@@ -4,3 +4,4 @@ $z-gutter: 220;
 $z-gutter-backdrop: 219;
 $z-subnav: 200;
 $z-base: 100;
+$z-icon-decorators: 50;

ui/app/templates/clients/index.hbs

@@ -11,8 +11,8 @@
             placeholder="Search clients..."}}
         </div>
       {{/if}}
-      <div class="column is-centered">
-        <div class="button-bar is-pulled-right">
+      <div class="column is-vcentered {{if (media "isMobile") "is-associative" "is-right-aligned"}}">
+        <div class="button-bar">
           {{multi-select-dropdown
             data-test-class-facet
             label="Class"

ui/app/templates/components/search-box.hbs

@@ -1,3 +1,5 @@
 <div class="control">
+  <span class="prefix-icon">{{x-icon "search"}}</span>
   <input class="input {{inputClass}}" type="text" placeholder={{placeholder}} value={{_searchTerm}} oninput={{action "setSearchTerm"}}>
+  <button class="suffix-icon" onclick={{action "clear"}}>{{x-icon "cancel"}}</button>
 </div>

ui/app/templates/jobs/index.hbs

@@ -5,15 +5,24 @@
     <div class="columns">
       {{#if filteredJobs.length}}
         <div class="column is-one-third">
-          {{search-box
-            data-test-jobs-search
-            searchTerm=(mut searchTerm)
-            onChange=(action resetPagination)
-            placeholder="Search jobs..."}}
+          <div class="field is-grouped">
+            <p class="control is-expanded">
+              {{search-box
+                data-test-jobs-search
+                searchTerm=(mut searchTerm)
+                onChange=(action resetPagination)
+                placeholder="Search jobs..."}}
+            </p>
+            {{#if (media "isMobile")}}
+              <p class="control">
+                {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
+              </p>
+            {{/if}}
+          </div>
         </div>
       {{/if}}
-      <div class="column is-centered">
-        <div class="button-bar is-pulled-right">
+      <div class="column is-vcentered {{if (media "isMobile") "is-associative" "is-right-aligned"}}">
+        <div class="button-bar">
           {{multi-select-dropdown
             data-test-type-facet
             label="Type"
@@ -40,9 +49,11 @@
             onSelect=(action setFacetQueryParam "qpPrefix")}}
         </div>
       </div>
-      <div class="column is-minimum is-centered">
-        {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
-      </div>
+      {{#if (not (media "isMobile"))}}
+        <div class="column is-minimum is-centered">
+          {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
+        </div>
+      {{/if}}
     </div>
     {{#list-pagination
       source=sortedJobs

ui/package.json

@@ -68,6 +68,7 @@
     "ember-native-dom-helpers": "^0.5.4",
     "ember-power-select": "^1.10.4",
     "ember-resolver": "^4.5.0",
+    "ember-responsive": "^3.0.0",
     "ember-sinon": "^1.0.1",
     "ember-source": "~2.18.2",
     "ember-test-selectors": "^0.3.8",

ui/yarn.lock

@@ -3641,6 +3641,13 @@ ember-resolver@^4.5.0:
     ember-cli-version-checker "^2.0.0"
     resolve "^1.3.3"
 
+ember-responsive@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ember-responsive/-/ember-responsive-3.0.0.tgz#03791da324299a8c8cb461e541a5e1aeca887881"
+  integrity sha512-5JQ+REBu37M7NNDJOnTjzp5eQzg4cX7VtPcD19V3nBcntRuDwf7N6TndLxmw4Kt3JXuzQL4PkDE2SgVKuNTdWQ==
+  dependencies:
+    ember-cli-babel "^6.6.0"
+
 ember-rfc176-data@^0.2.0:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.2.7.tgz#bd355bc9b473e08096b518784170a23388bc973b"