Dashboard: fix HTML structure of background picker

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 65f70614d7bc065f32fe9d9fca504d1e434219e1..50a055a126773164241921f37252440968ca14c0 100644 (file)
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -27,9 +27,7 @@
                        @click="pickFile"
                        @keyup.enter="pickFile"
                        @keyup.space="pickFile">
-                       <div class="background--preview">
-                               {{ t('dashboard', 'Pick from files') }}
-                       </div>
+                       {{ t('dashboard', 'Pick from files') }}
                </a>
                <a class="background default"
                        tabindex="0"
@@ -37,18 +35,14 @@
                        @click="setDefault"
                        @keyup.enter="setDefault"
                        @keyup.space="setDefault">
-                       <div class="background--preview">
-                               {{ t('dashboard', 'Default images') }}
-                       </div>
+                       {{ t('dashboard', 'Default images') }}
                </a>
                <a class="background color"
                        tabindex="0"
                        @click="pickColor"
                        @keyup.enter="pickColor"
                        @keyup.space="pickColor">
-                       <div class="background--preview">
-                               {{ t('dashboard', 'Plain background') }}
-                       </div>
+                       {{ t('dashboard', 'Plain background') }}
                </a>
                <a v-for="background in shippedBackgrounds"
                        :key="background.name"
@@ -56,11 +50,10 @@
                        tabindex="0"
                        class="background"
                        :class="{ 'icon-loading': loading === background.name }"
+                       :style="{ 'background-image': 'url(' + background.url + ')' }"
                        @click="setShipped(background.name)"
                        @keyup.enter="setShipped(background.name)"
-                       @keyup.space="setShipped(background.name)">
-                       <div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
-               </a>
+                       @keyup.space="setShipped(background.name)" />
        </div>
 </template>
 
@@ -148,7 +141,10 @@ export default {
 
                .background {
                        width: 176px;
+            height: 96px;
             margin: 8px;
+            background-size: cover;
+            background-position: center center;
                        text-align: center;
             border-radius: var(--border-radius-large);
                        border-radius: var(--border-radius-large);
@@ -159,21 +155,12 @@ export default {
                                background-image: var(--color-background-dark);
                        }
 
-                       &--preview {
-                               width: 100%;
-                               height: 96px;
-                               background-size: cover;
-                               background-position: center center;
-                       }
-
                        &.filepicker, &.default, &.color {
-                               border: 2px solid var(--color-border);
-                               .background--preview {
-                                       line-height: 100px;
-                               }
+                               border-color: var(--color-border);
+                               line-height: 96px;
                        }
 
-                       &.color .background--preview {
+                       &.color {
                                background-color: var(--color-primary);
                                color: var(--color-primary-text);
                        }