Skip to content
Snippets Groups Projects
Unverified Commit 59323763 authored by Jan C. Borchardt's avatar Jan C. Borchardt Committed by Julius Härtl
Browse files

Dashboard: fix HTML structure of background picker 


Signed-off-by: default avatarJan C. Borchardt <hey@jancborchardt.net>
parent 135ceb4a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/dashboard/src/components/BackgroundSettings.vue
+ 11
− 24
View file @ 59323763
...@@ -27,9 +27,7 @@ ...@@ -27,9 +27,7 @@
@click="pickFile" @click="pickFile"
@keyup.enter="pickFile" @keyup.enter="pickFile"
@keyup.space="pickFile"> @keyup.space="pickFile">
<div class="background--preview"> {{ t('dashboard', 'Pick from files') }}
{{ t('dashboard', 'Pick from files') }}
</div>
</a> </a>
<a class="background default" <a class="background default"
tabindex="0" tabindex="0"
...@@ -37,18 +35,14 @@ ...@@ -37,18 +35,14 @@
@click="setDefault" @click="setDefault"
@keyup.enter="setDefault" @keyup.enter="setDefault"
@keyup.space="setDefault"> @keyup.space="setDefault">
<div class="background--preview"> {{ t('dashboard', 'Default images') }}
{{ t('dashboard', 'Default images') }}
</div>
</a> </a>
<a class="background color" <a class="background color"
tabindex="0" tabindex="0"
@click="pickColor" @click="pickColor"
@keyup.enter="pickColor" @keyup.enter="pickColor"
@keyup.space="pickColor"> @keyup.space="pickColor">
<div class="background--preview"> {{ t('dashboard', 'Plain background') }}
{{ t('dashboard', 'Plain background') }}
</div>
</a> </a>
<a v-for="background in shippedBackgrounds" <a v-for="background in shippedBackgrounds"
:key="background.name" :key="background.name"
...@@ -56,11 +50,10 @@ ...@@ -56,11 +50,10 @@
tabindex="0" tabindex="0"
class="background" class="background"
:class="{ 'icon-loading': loading === background.name }" :class="{ 'icon-loading': loading === background.name }"
:style="{ 'background-image': 'url(' + background.url + ')' }"
@click="setShipped(background.name)" @click="setShipped(background.name)"
@keyup.enter="setShipped(background.name)" @keyup.enter="setShipped(background.name)"
@keyup.space="setShipped(background.name)"> @keyup.space="setShipped(background.name)" />
<div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
</a>
</div> </div>
</template> </template>
...@@ -148,7 +141,10 @@ export default { ...@@ -148,7 +141,10 @@ export default {
.background { .background {
width: 176px; width: 176px;
height: 96px;
margin: 8px; margin: 8px;
background-size: cover;
background-position: center center;
text-align: center; text-align: center;
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
...@@ -159,21 +155,12 @@ export default { ...@@ -159,21 +155,12 @@ export default {
background-image: var(--color-background-dark); background-image: var(--color-background-dark);
} }
&--preview {
width: 100%;
height: 96px;
background-size: cover;
background-position: center center;
}
&.filepicker, &.default, &.color { &.filepicker, &.default, &.color {
border: 2px solid var(--color-border); border-color: var(--color-border);
.background--preview { line-height: 96px;
line-height: 100px;
}
} }
&.color .background--preview { &.color {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-primary-text); color: var(--color-primary-text);
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment