refactor(front): labels for select input fields
This commit is contained in:
ArneBo
parent
5e986e9fec
commit
08ef2e0137
|
|
@ -126,48 +126,61 @@ 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;">
|
||||
<select
|
||||
id="favorites-ordering"
|
||||
v-model="ordering"
|
||||
:label="t('components.favorites.List.ordering.label')"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="option in orderingOptions"
|
||||
:key="option[0]"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="favorites-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.favorites.List.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="favorites-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
id="favorites-ordering-direction"
|
||||
:label="t('components.favorites.List.ordering.direction.label')"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('components.favorites.List.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('components.favorites.List.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
id="favorites-results"
|
||||
v-model="paginateBy"
|
||||
:label="t('components.favorites.List.pagination.results')"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="option in orderingOptions"
|
||||
:key="option[0]"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('components.favorites.List.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option 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"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<TrackTable
|
||||
v-if="results"
|
||||
|
|
|
|||
|
|
@ -150,47 +150,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:label="t('components.library.Albums.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<select
|
||||
id="album-ordering"
|
||||
:label="t('components.library.Albums.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="album-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Albums.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="album-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Albums.ordering.direction.label')"
|
||||
id="album-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('components.library.Albums.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('components.library.Albums.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Albums.pagination.results')"
|
||||
id="album-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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
|
||||
id="album-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('components.library.Albums.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option 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
|
||||
id="album-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Loader v-if="isLoading"/>
|
||||
<Pagination
|
||||
|
|
|
|||
|
|
@ -149,47 +149,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:label="t('components.library.Artists.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
:label="t('components.library.Artists.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="artist-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Artists.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Artists.ordering.direction.label')"
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('components.library.Artists.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('components.library.Artists.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Artists.pagination.results')"
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('components.library.Artists.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option 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
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ 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,47 +165,59 @@ const isOpen = computed({
|
|||
:label="t('components.library.Podcasts.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
:label="t('components.library.Podcasts.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="artist-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Podcasts.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Podcasts.ordering.direction.label')"
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('components.library.Podcasts.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('components.library.Podcasts.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('components.library.Podcasts.pagination.results')"
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('components.library.Podcasts.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ 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
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
|
|
|
|||
|
|
@ -158,47 +158,59 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
:label="t('components.library.Radios.label.search')"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
/>
|
||||
<select
|
||||
id="radios-ordering"
|
||||
:label="t('components.library.Radios.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="radios-ordering">
|
||||
<span class="label">
|
||||
{{ t('components.library.Radios.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="radios-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
id="radios-ordering-direction"
|
||||
:label="t('components.library.Radios.ordering.direction.label')"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('components.library.Radios.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('components.library.Radios.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
id="radios-results"
|
||||
:label="t('components.library.Radios.pagination.results')"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('components.library.Radios.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option 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"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Alert
|
||||
blue
|
||||
|
|
|
|||
|
|
@ -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,47 +134,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</Input>
|
||||
<select
|
||||
id="playlists-ordering"
|
||||
:label="t('views.playlists.List.ordering.label')"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
<Layout stack noGap label for="playlists-ordering">
|
||||
<span class="label">
|
||||
{{ t('views.playlists.List.ordering.label') }}
|
||||
</span>
|
||||
<select
|
||||
id="playlists-ordering"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('views.playlists.List.ordering.direction.label')"
|
||||
id="playlists-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ t('views.playlists.List.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ t('views.playlists.List.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:label="t('views.playlists.List.pagination.results')"
|
||||
id="playlist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ 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
|
||||
id="playlists-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<option value="+">
|
||||
{{ t('views.playlists.List.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option 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
|
||||
id="playlist-results"
|
||||
v-model="paginateBy"
|
||||
class="dropdown"
|
||||
>
|
||||
<option
|
||||
v-for="opt in paginateOptions"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<template
|
||||
v-if="result && result.results.length > 0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue