Dashboard: fix HTML structure of background picker

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

1 files changed, 11 insertions, 24 deletions

diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 65f70614d7b..50a055a1267 100644
--- 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);
 			}