Dashboard: fix HTML structure of background picker
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
135ceb4a9d
commit
5932376333
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue