From 0bc00cf646136e751d8e75748cefee279d7b7c62 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 29 Apr 2021 22:42:51 -0700
Subject: [PATCH] wallpapers page clean up

---
 src/pages/WallpapersPage.vue | 73 +++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 39 deletions(-)

diff --git a/src/pages/WallpapersPage.vue b/src/pages/WallpapersPage.vue
index 044396ba..78f3ba65 100644
--- a/src/pages/WallpapersPage.vue
+++ b/src/pages/WallpapersPage.vue
@@ -10,55 +10,44 @@
     />
 
     <template v-else>
-      <portal to="dock">
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="space-used d-none d-sm-inline ml-auto mr-3">
-            <small
-              class="d-block text-center"
-              :class="{ 'text-danger': outOfSpace }"
-              v-text="usedSpaceText"
-            />
+      <page-title
+        title="Wallpapers"
+      >
+        <div class="space-used ml-auto mr-3">
+          <small
+            class="d-block text-center"
+            :class="{ 'text-danger': outOfSpace }"
+            v-text="usedSpaceText"
+          />
 
-            <b-progress
-              :value="spaceUsed"
-              :max="maxSpace"
-              :variant="outOfSpace ? 'danger' : 'success'"
-            />
-          </div>
-
-          <b-button
-            variant="primary"
-            :disabled="outOfSpace"
-            @click="triggerFileUpload"
-          >
-            <b-spinner small v-if="saving" />
-
-            <template v-else>
-              <i class="fas fa-upload fa-fw" aria-hidden />
-              <span>Upload</span>
-            </template>
-          </b-button>
-
-          <!-- <b-button
-            variant="warning"
-            class="ml-2"
-          >
-            Toggle View
-          </b-button> -->
+          <b-progress
+            :value="spaceUsed"
+            :max="maxSpace"
+            :variant="outOfSpace ? 'danger' : 'success'"
+          />
         </div>
-      </portal>
+
+        <b-button
+          :disabled="outOfSpace"
+          @click="triggerFileUpload"
+        >
+          <b-spinner small v-if="saving" />
+
+          <template v-else>
+            <i class="fas fa-upload fa-fw" aria-hidden />
+            <span class="d-none d-sm-inline">Upload</span>
+          </template>
+        </b-button>
+      </page-title>
 
       <b-alert
         v-if="isDuplicate && !saving && file && file.name"
         show
-        dismissible
         variant="warning"
       >
         {{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
       </b-alert>
 
-      <h1 class="d-none d-sm-block">Wallpapers</h1>
-
       <wallpapers-list v-if="wallpapers.length" />
 
       <b-alert show v-else>You don't have any wallpapers.</b-alert>
@@ -126,7 +115,13 @@ export default {
     },
 
     spaceUsed() {
-      return this.wallpapers.reduce((total, file) => total + file.metadata.size || 0, 0);
+      return this.wallpapers.reduce((total, { metadata }) => {
+        const size = metadata && metadata.size
+          ? metadata.size
+          : 0;
+
+        return total + size;
+      }, 0);
     },
 
     outOfSpace() {