refactor(front): labels for select input fields
This commit is contained in:
parent
5e986e9fec
commit
08ef2e0137
|
@ -126,11 +126,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
stack
|
||||
:class="['ui', { 'loading': isLoading }, 'form']"
|
||||
>
|
||||
<Spacer :size="16" />
|
||||
<Layout flex style="justify-content: flex-end;">
|
||||
<Layout stack noGap label for="favorites-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.favorites.List.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="favorites-ordering"
|
||||
v-model="ordering"
|
||||
:label="t('components.favorites.List.ordering.label')"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
|
@ -141,9 +145,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="favorites-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('components.favorites.List.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="favorites-ordering-direction"
|
||||
:label="t('components.favorites.List.ordering.direction.label')"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -154,10 +162,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
{{ t('components.favorites.List.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="favorites-results">
|
||||
<span class="label">
|
||||
{{ t('components.favorites.List.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
id="favorites-results"
|
||||
v-model="paginateBy"
|
||||
:label="t('components.favorites.List.pagination.results')"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
|
@ -169,6 +181,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<TrackTable
|
||||
v-if="results"
|
||||
:search="true"
|
||||
|
|
|
@ -150,9 +150,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:label="t('components.library.Albums.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<Layout stack noGap label for="album-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Albums.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="album-ordering"
|
||||
:label="t('components.library.Albums.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -164,8 +167,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="album-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('components.library.Albums.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Albums.ordering.direction.label')"
|
||||
id="album-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
|
@ -177,8 +184,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ t('components.library.Albums.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="album-results">
|
||||
<span class="label">
|
||||
{{ t('components.library.Albums.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Albums.pagination.results')"
|
||||
id="album-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
|
@ -192,6 +203,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Loader v-if="isLoading"/>
|
||||
<Pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
|
|
|
@ -149,9 +149,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:label="t('components.library.Artists.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<Layout stack noGap label for="artist-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Artists.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
:label="t('components.library.Artists.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -163,8 +166,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="artist-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('components.library.Artists.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Artists.ordering.direction.label')"
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
|
@ -176,8 +183,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ t('components.library.Artists.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="artist-results">
|
||||
<span class="label">
|
||||
{{ t('components.library.Artists.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Artists.pagination.results')"
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
|
@ -190,6 +201,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Toggle
|
||||
:label="t('components.library.Artists.label.excludeCompilation')"
|
||||
id="exclude-compilation"
|
||||
|
@ -245,3 +257,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
margin-top: -18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -165,9 +165,12 @@ const isOpen = computed({
|
|||
:label="t('components.library.Podcasts.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<Layout stack noGap label for="artist-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Podcasts.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
:label="t('components.library.Podcasts.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -179,8 +182,12 @@ const isOpen = computed({
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="artist-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('components.library.Podcasts.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Podcasts.ordering.direction.label')"
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
|
@ -192,8 +199,12 @@ const isOpen = computed({
|
|||
{{ t('components.library.Podcasts.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="artist-results">
|
||||
<span class="label">
|
||||
{{ t('components.library.Podcasts.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('components.library.Podcasts.pagination.results')"
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
|
@ -207,6 +218,7 @@ const isOpen = computed({
|
|||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
|
|
|
@ -158,9 +158,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
:label="t('components.library.Radios.label.search')"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
/>
|
||||
<Layout stack noGap label for="radios-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Radios.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="radios-ordering"
|
||||
:label="t('components.library.Radios.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -172,9 +175,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="radios-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('components.library.Radios.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="radios-ordering-direction"
|
||||
:label="t('components.library.Radios.ordering.direction.label')"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -185,9 +192,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
{{ t('components.library.Radios.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="radios-results">
|
||||
<span class="label">
|
||||
{{ t('components.library.Radios.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
id="radios-results"
|
||||
:label="t('components.library.Radios.pagination.results')"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -200,6 +211,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Alert
|
||||
blue
|
||||
style="align-items: center;"
|
||||
|
|
|
@ -26,6 +26,12 @@ input + .help {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.form span.label {
|
||||
margin-top: -18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ui.icon.input > .icon {
|
||||
color: var(--input-color);
|
||||
}
|
||||
|
|
|
@ -134,9 +134,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</Input>
|
||||
<Layout stack noGap label for="playlists-ordering">
|
||||
<span class="label">
|
||||
{{ t('views.playlists.List.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="playlists-ordering"
|
||||
:label="t('views.playlists.List.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
|
@ -148,8 +151,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="playlists-ordering-direction">
|
||||
<span class="label">
|
||||
{{ t('views.playlists.List.ordering.direction.label') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('views.playlists.List.ordering.direction.label')"
|
||||
id="playlists-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
|
@ -161,8 +168,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
{{ t('views.playlists.List.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Layout stack noGap label for="playlist-results">
|
||||
<span class="label">
|
||||
{{ t('views.playlists.List.pagination.results') }}
|
||||
</span>
|
||||
<select
|
||||
:label="t('views.playlists.List.pagination.results')"
|
||||
id="playlist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
|
@ -176,6 +187,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<template
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
|
|
Loading…
Reference in New Issue