[5.x] A fresh coat of paint (#1242)

* A fresh coat of paint * Compile Assets * fix silenced viewbox Co-authored-by: jessarcher <jessarcher@users.noreply.github.com> Co-authored-by: Taylor Otwell <taylor@laravel.com>
laravel · Jan 27, 2023 · 29da5dc · 29da5dc
1 parent 80916ff
commit 29da5dc
Show file tree

Hide file tree

Showing 28 changed files with 603 additions and 360 deletions.
diff --git a/public/app-dark.css b/public/app-dark.css
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/app.js": "/app.js?id=d771ecef70ba42f5cd96a3e4e342bd06",
-    "/app-dark.css": "/app-dark.css?id=796af76ce8c445651baf66c67de3eea4",
-    "/app.css": "/app.css?id=a19518e2122467d2e842f411ca5b65e4",
+    "/app.js": "/app.js?id=766b568d1924aa83b2a1f279d2c5ab9e",
+    "/app-dark.css": "/app-dark.css?id=15c72df05e2b1147fa3e4b0670cfb435",
+    "/app.css": "/app.css?id=4d6a1a7fe095eedc2cb2a4ce822ea8a5",
     "/img/favicon.png": "/img/favicon.png?id=1542bfe8a0010dcbee710da13cce367f",
     "/img/horizon.svg": "/img/horizon.svg?id=904d5b5185fefb09035384e15bfca765",
     "/img/sprite.svg": "/img/sprite.svg?id=afc4952b74895bdef3ab4ebe9adb746f"

diff --git a/resources/js/components/Alert.vue b/resources/js/components/Alert.vue
@@ -74,27 +74,27 @@
     <div class="modal" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-body text-center">
-                    <p class="mt-3 mb-0">{{message}}</p>
+                <div class="modal-body">
+                    <p class="m-0 py-4">{{message}}</p>
                 </div>
 
 
-                <div class="modal-footer justify-content-center">
+                <div class="modal-footer justify-content-start flex-row-reverse">
 
-                    <button v-if="type == 'error'" class="btn btn-secondary btn-sm" @click="close">
-                        CLOSE
+                    <button v-if="type == 'error'" class="btn btn-primary" @click="close">
+                        Close
                     </button>
 
-                    <button v-if="type == 'success'" class="btn btn-secondary btn-sm" @click="close">
-                        OK
+                    <button v-if="type == 'success'" class="btn btn-primary" @click="close">
+                        Okay
                     </button>
 
 
-                    <button v-if="type == 'confirmation'" class="btn btn-danger btn-sm" @click="confirm">
-                        YES
+                    <button v-if="type == 'confirmation'" class="btn btn-danger" @click="confirm">
+                        Yes
                     </button>
-                    <button v-if="type == 'confirmation'" class="btn btn-secondary btn-sm" @click="cancel">
-                        NO, CANCEL
+                    <button v-if="type == 'confirmation'" class="btn" @click="cancel">
+                        Cancel
                     </button>
 
                 </div>

diff --git a/resources/js/components/Stacktrace.vue b/resources/js/components/Stacktrace.vue
@@ -27,7 +27,7 @@
         <table class="table mb-0">
             <tbody>
             <tr v-for="line in lines">
-                <td class="card-bg-secondary">{{line}}</td>
+                <td class="card-bg-secondary"><code>{{line}}</code></td>
             </tr>
 
             <tr v-if="! showAll">

diff --git a/resources/js/screens/batches/index.vue b/resources/js/screens/batches/index.vue
@@ -127,9 +127,9 @@
 
 <template>
     <div>
-        <div class="card">
+        <div class="card overflow-hidden">
             <div class="card-header d-flex align-items-center justify-content-between">
-                <h5>Batches</h5>
+                <h2 class="h6 m-0">Batches</h2>
             </div>
 
             <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
@@ -145,20 +145,20 @@
                 <span>There aren't any batches.</span>
             </div>
 
-            <table v-if="ready && batches.length > 0" class="table table-hover table-sm mb-0">
+            <table v-if="ready && batches.length > 0" class="table table-hover mb-0">
                 <thead>
                 <tr>
                     <th>Batch</th>
                     <th>Status</th>
-                    <th>Size</th>
-                    <th>Completion</th>
-                    <th class="text-right">Created At</th>
+                    <th class="text-right">Size</th>
+                    <th class="text-right">Completion</th>
+                    <th class="text-right">Created</th>
                 </tr>
                 </thead>
 
                 <tbody>
                 <tr v-if="hasNewEntries" key="newEntries" class="dontanimate">
-                    <td colspan="100" class="text-center card-bg-secondary py-1">
+                    <td colspan="100" class="text-center card-bg-secondary py-2">
                         <small><a href="#" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New Entries</a></small>
 
                         <small v-if="loadingNewEntries">Loading...</small>
@@ -182,19 +182,19 @@
                             Pending
                         </small>
                     </td>
-                    <td>{{batch.totalJobs}}</td>
-                    <td>{{batch.progress}}%</td>
+                    <td class="text-right text-muted">{{batch.totalJobs}}</td>
+                    <td class="text-right text-muted">{{batch.progress}}%</td>
 
-                    <td class="text-right table-fit">
+                    <td class="text-right text-muted table-fit">
                         {{ formatDateIso(batch.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
                     </td>
                 </tr>
                 </tbody>
             </table>
 
             <div v-if="ready && batches.length" class="p-3 d-flex justify-content-between border-top">
-                <button @click="previous" class="btn btn-secondary btn-md" :disabled="page==1">Previous</button>
-                <button @click="next" class="btn btn-secondary btn-md" :disabled="batches.length < 50">Next</button>
+                <button @click="previous" class="btn btn-secondary btn-sm" :disabled="page==1">Previous</button>
+                <button @click="next" class="btn btn-secondary btn-sm" :disabled="batches.length < 50">Next</button>
             </div>
         </div>
 

diff --git a/resources/js/screens/batches/preview.vue b/resources/js/screens/batches/preview.vue
@@ -77,14 +77,14 @@
 
 <template>
     <div>
-        <div class="card">
+        <div class="card overflow-hidden">
             <div class="card-header d-flex align-items-center justify-content-between">
-                <h5 v-if="!ready">Batch Preview</h5>
-                <h5 v-if="ready">{{batch.name || batch.id}}</h5>
+                <h2 class="h6 m-0" v-if="!ready">Batch Preview</h2>
+                <h2 class="h6 m-0" v-if="ready">{{batch.name || batch.id}}</h2>
 
-                <button class="btn btn-outline-primary" v-if="failedJobs.length > 0" v-on:click.prevent="retry(batch.id)">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon fill-primary" :class="{spin: retrying}">
-                        <path d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z"/>
+                <button class="btn btn-primary" v-if="failedJobs.length > 0" v-on:click.prevent="retry(batch.id)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor" :class="{spin: retrying}">
+                        <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
                     </svg>
 
                     Retry Failed Jobs
@@ -101,76 +101,76 @@
 
             <div class="card-body card-bg-secondary" v-if="ready">
                 <div class="row mb-2">
-                    <div class="col-md-2"><strong>ID</strong></div>
+                    <div class="col-md-2 text-muted">ID</div>
                     <div class="col">
                         {{batch.id}}
 
-                        <small class="badge badge-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
+                        <small class="ml-1 badge badge-danger badge-sm" v-if="batch.failedJobs > 0 && batch.totalJobs - batch.pendingJobs < batch.totalJobs">
                             Failures
                         </small>
-                        <small class="badge badge-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
+                        <small class="ml-1 badge badge-success badge-sm" v-if="batch.totalJobs - batch.pendingJobs == batch.totalJobs">
                             Finished
                         </small>
-                        <small class="badge badge-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
+                        <small class="ml-1 badge badge-secondary badge-sm" v-if="batch.pendingJobs > 0 && !batch.failedJobs">
                             Pending
                         </small>
                     </div>
                 </div>
                 <div class="row mb-2" v-if="batch.name">
-                    <div class="col-md-2"><strong>Name</strong></div>
+                    <div class="col-md-2 text-muted">Name</div>
                     <div class="col">{{batch.name}}</div>
                 </div>
                 <div class="row mb-2" v-if="batch.options.queue">
-                    <div class="col-md-2"><strong>Queue</strong></div>
+                    <div class="col-md-2 text-muted">Queue</div>
                     <div class="col">{{batch.options.queue}}</div>
                 </div>
                 <div class="row mb-2" v-if="batch.options.connection">
-                    <div class="col-md-2"><strong>Connection</strong></div>
+                    <div class="col-md-2 text-muted">Connection</div>
                     <div class="col">{{batch.options.connection}}</div>
                 </div>
                 <div class="row mb-2">
-                    <div class="col-md-2"><strong>Created At</strong></div>
+                    <div class="col-md-2 text-muted">Created</div>
                     <div class="col">{{ formatDateIso(batch.createdAt).format('YYYY-MM-DD HH:mm:ss') }}</div>
                 </div>
                 <div class="row mb-2" v-if="batch.finishedAt">
-                    <div class="col-md-2"><strong>Finished At</strong></div>
+                    <div class="col-md-2 text-muted">Finished</div>
                     <div class="col">{{ formatDateIso(batch.finishedAt).format('YYYY-MM-DD HH:mm:ss') }}</div>
                 </div>
                 <div class="row mb-2" v-if="batch.cancelledAt">
-                    <div class="col-md-2"><strong>Cancelled At</strong></div>
+                    <div class="col-md-2 text-muted">Cancelled</div>
                     <div class="col">{{ formatDateIso(batch.cancelledAt).format('YYYY-MM-DD HH:mm:ss') }}</div>
                 </div>
                 <div class="row mb-2">
-                    <div class="col-md-2"><strong>Total Jobs</strong></div>
+                    <div class="col-md-2 text-muted">Total Jobs</div>
                     <div class="col">{{batch.totalJobs}}</div>
                 </div>
                 <div class="row mb-2">
-                    <div class="col-md-2"><strong>Pending Jobs</strong></div>
+                    <div class="col-md-2 text-muted">Pending Jobs</div>
                     <div class="col">{{batch.pendingJobs}}</div>
                 </div>
                 <div class="row mb-2">
-                    <div class="col-md-2"><strong>Failed Jobs</strong></div>
+                    <div class="col-md-2 text-muted">Failed Jobs</div>
                     <div class="col">{{batch.failedJobs}}</div>
                 </div>
                 <div class="row">
-                    <div class="col-md-2"><strong>Completed Jobs (Including Failed)</strong></div>
+                    <div class="col-md-2 text-muted">Completed Jobs<br><small>(Including Failed)</small></div>
                     <div class="col">{{ (batch.totalJobs-batch.pendingJobs) }} ({{batch.progress}}%)</div>
                 </div>
             </div>
         </div>
 
 
-        <div class="card mt-4" v-if="ready && failedJobs.length">
+        <div class="card overflow-hidden mt-4" v-if="ready && failedJobs.length">
             <div class="card-header d-flex align-items-center justify-content-between">
-                <h5>Failed Jobs</h5>
+                <h2 class="h6 m-0">Failed Jobs</h2>
             </div>
 
-            <table class="table table-hover table-sm mb-0">
+            <table class="table table-hover mb-0">
                 <thead>
                 <tr>
                     <th>Job</th>
-                    <th>Runtime</th>
-                    <th class="text-right">Failed At</th>
+                    <th class="text-right">Runtime</th>
+                    <th class="text-right">Failed</th>
                 </tr>
                 </thead>
 
@@ -183,11 +183,11 @@
                         </router-link>
                     </td>
 
-                    <td class="table-fit">
+                    <td class="text-right text-muted table-fit">
                         <span>{{ failedJob.failed_at && failedJob.reserved_at ? String((failedJob.failed_at - failedJob.reserved_at).toFixed(2))+'s' : '-' }}</span>
                     </td>
 
-                    <td class="text-right table-fit">
+                    <td class="text-right text-muted table-fit">
                         {{ readableTimestamp(failedJob.failed_at) }}
                     </td>
                 </tr>