From bee09ca75944853b31c93d829acc861e5846e6b0 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 6 Mar 2019 21:00:30 -0800
Subject: [PATCH] Replace the columns pattern with the new toolbar pattern on
 the jobs page

---
 ui/app/templates/jobs/index.hbs | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
index 50ab81bf2..5d2222d04 100644
--- a/ui/app/templates/jobs/index.hbs
+++ b/ui/app/templates/jobs/index.hbs
@@ -2,9 +2,9 @@
   {{#if isForbidden}}
     {{partial "partials/forbidden-message"}}
   {{else}}
-    <div class="columns">
-      {{#if filteredJobs.length}}
-        <div class="column is-one-third">
+    <div class="toolbar">
+      {{#if visibleJobs.length}}
+        <div class="toolbar-item">
           {{search-box
             data-test-jobs-search
             searchTerm=(mut searchTerm)
@@ -12,8 +12,13 @@
             placeholder="Search jobs..."}}
         </div>
       {{/if}}
-      <div class="column is-centered">
-        <div class="button-bar is-pulled-right">
+      {{#if (media "isMobile")}}
+        <div class="toolbar-item is-right-aligned">
+          {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
+        </div>
+      {{/if}}
+      <div class="toolbar-item is-right-aligned is-mobile-full-width">
+        <div class="button-bar">
           {{multi-select-dropdown
             data-test-type-facet
             label="Type"
@@ -40,9 +45,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="toolbar-item is-right-aligned">
+          {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
+        </div>
+      {{/if}}
     </div>
     {{#list-pagination
       source=sortedJobs