fix(front): small fixes
This commit is contained in:
ArneBo
parent
a84868e1df
commit
bd4093e6bc
|
|
@ -200,7 +200,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
|
||||
<Spacer />
|
||||
{{ t('components.favorites.List.empty.noFavorites') }}
|
||||
<Spacer size="40"/>
|
||||
<Spacer :size="32"/>
|
||||
<Link
|
||||
to="/library"
|
||||
solid
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
>
|
||||
<Loader v-if="isLoading"/>
|
||||
<album-card
|
||||
<AlbumCard
|
||||
v-for="album in result.results"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import { useStore } from '~/store'
|
|||
|
||||
import axios from 'axios'
|
||||
|
||||
import TagsSelector from '~/components/library/TagsSelector.vue'
|
||||
import Pagination from '~/components/ui/Pagination.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
|
|
@ -128,116 +127,116 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout stack main v-title="labels.title">
|
||||
<h2>
|
||||
{{ t('components.library.Artists.header.browse') }}
|
||||
</h2>
|
||||
<Layout form flex
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
<Layout stack main v-title="labels.title">
|
||||
<h2>
|
||||
{{ t('components.library.Artists.header.browse') }}
|
||||
</h2>
|
||||
<Layout form flex
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
>
|
||||
<Input search
|
||||
id="artist-search"
|
||||
v-model="query"
|
||||
name="search"
|
||||
:label="t('components.library.Artists.label.search')"
|
||||
autofocus
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
<Input search
|
||||
id="artist-search"
|
||||
v-model="query"
|
||||
name="search"
|
||||
:label="t('components.library.Artists.label.search')"
|
||||
autofocus
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</Input>
|
||||
<Pills
|
||||
v-model="tagList"
|
||||
: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]"
|
||||
>
|
||||
{{ 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"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<Toggle
|
||||
:label="t('components.library.Artists.label.excludeCompilation')"
|
||||
id="exclude-compilation"
|
||||
v-model="excludeCompilation"
|
||||
true-value="true"
|
||||
false-value="null"
|
||||
type="checkbox"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
</Input>
|
||||
<Pills
|
||||
v-model="tagList"
|
||||
: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"
|
||||
>
|
||||
<Loader v-if="isLoading"/>
|
||||
<ArtistCard
|
||||
v-for="artist in result.results"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout
|
||||
stack
|
||||
v-else-if="result && result.results.length === 0"
|
||||
>
|
||||
<Alert yellow>
|
||||
<i class="compact disc icon" />
|
||||
{{ t('components.library.Artists.empty.noResults') }}
|
||||
</Alert>
|
||||
<Card
|
||||
v-if="store.state.auth.authenticated"
|
||||
:title="t('components.library.Artists.button.upload')"
|
||||
solid
|
||||
small
|
||||
primary
|
||||
@click="store.commit('ui/toggleModal', 'upload')"
|
||||
:aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
<template #image>
|
||||
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
|
||||
</template>
|
||||
</Card>
|
||||
</Layout>
|
||||
<Spacer grow />
|
||||
<Pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
:page="page"
|
||||
:pages="Math.ceil((result?.results.length || 0)/paginateBy)"
|
||||
/>
|
||||
{{ 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"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
<Toggle
|
||||
:label="t('components.library.Artists.label.excludeCompilation')"
|
||||
id="exclude-compilation"
|
||||
v-model="excludeCompilation"
|
||||
true-value="true"
|
||||
false-value="null"
|
||||
type="checkbox"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
>
|
||||
<Loader v-if="isLoading"/>
|
||||
<ArtistCard
|
||||
v-for="artist in result.results"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout
|
||||
stack
|
||||
v-else-if="result && result.results.length === 0"
|
||||
>
|
||||
<Alert yellow>
|
||||
<i class="compact disc icon" />
|
||||
{{ t('components.library.Artists.empty.noResults') }}
|
||||
</Alert>
|
||||
<Card
|
||||
v-if="store.state.auth.authenticated"
|
||||
:title="t('components.library.Artists.button.upload')"
|
||||
solid
|
||||
small
|
||||
primary
|
||||
@click="store.commit('ui/toggleModal', 'upload')"
|
||||
:aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
|
||||
>
|
||||
<template #image>
|
||||
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
|
||||
</template>
|
||||
</Card>
|
||||
</Layout>
|
||||
<Spacer grow />
|
||||
<Pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
:page="page"
|
||||
:pages="Math.ceil((result?.results.length || 0)/paginateBy)"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ watch(props, fetchData, { immediate: true })
|
|||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Profile description -->
|
||||
<!-- TODO: Translate Edit Link -->
|
||||
<Section no-items
|
||||
:h1="store.state.auth.username"
|
||||
:action="{ text:'Edit profile', to:'/settings' }"
|
||||
|
|
|
|||
Loading…
Reference in New Issue