fix(front): indentation
This commit is contained in:
ArneBo
parent
5f392150e8
commit
9dfb1bab00
|
|
@ -131,123 +131,123 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout stack main v-title="labels.title">
|
||||
<Header :h1="t('components.library.Albums.header.browse')" />
|
||||
<Layout form flex
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
<Layout stack main v-title="labels.title">
|
||||
<Header :h1="t('components.library.Albums.header.browse')" />
|
||||
<Layout form flex
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
>
|
||||
<Input search
|
||||
id="album-search"
|
||||
v-model="query"
|
||||
name="search"
|
||||
:label="t('components.library.Albums.label.search')"
|
||||
autofocus
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
<Input search
|
||||
id="album-search"
|
||||
v-model="query"
|
||||
name="search"
|
||||
:label="t('components.library.Albums.label.search')"
|
||||
autofocus
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</Input>
|
||||
<Pills
|
||||
v-model="tagList"
|
||||
: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"
|
||||
v-model="ordering"
|
||||
class="dropdown"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||
</Input>
|
||||
<Pills
|
||||
v-model="tagList"
|
||||
:label="t('components.library.Albums.label.tags')"
|
||||
style="max-width: 150px;"
|
||||
/>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
>
|
||||
<AlbumCard
|
||||
v-for="album in result.results"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout
|
||||
stack
|
||||
v-else-if="result && result.results.length === 0"
|
||||
>
|
||||
<Alert yellow>
|
||||
<i class="bi bi-disc" />
|
||||
{{ t('components.library.Albums.empty.noResults') }}
|
||||
</Alert>
|
||||
<Card
|
||||
v-if="store.state.auth.authenticated"
|
||||
:title="t('components.library.Albums.link.addMusic')"
|
||||
solid
|
||||
small
|
||||
primary
|
||||
style="text-align: center;"
|
||||
:to="useModal('upload').to"
|
||||
<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"
|
||||
>
|
||||
<template #image>
|
||||
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
|
||||
</template>
|
||||
</Card>
|
||||
<option
|
||||
v-for="(option, key) in orderingOptions"
|
||||
:key="key"
|
||||
:value="option[0]"
|
||||
>
|
||||
{{ sharedLabels.filters[option[1]] }}
|
||||
</option>
|
||||
</select>
|
||||
</Layout>
|
||||
<Spacer grow />
|
||||
<Pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||
/>
|
||||
<Layout grid
|
||||
v-if="result && result.results.length > 0"
|
||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||
>
|
||||
<AlbumCard
|
||||
v-for="album in result.results"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
/>
|
||||
</Layout>
|
||||
<Layout
|
||||
stack
|
||||
v-else-if="result && result.results.length === 0"
|
||||
>
|
||||
<Alert yellow>
|
||||
<i class="bi bi-disc" />
|
||||
{{ t('components.library.Albums.empty.noResults') }}
|
||||
</Alert>
|
||||
<Card
|
||||
v-if="store.state.auth.authenticated"
|
||||
:title="t('components.library.Albums.link.addMusic')"
|
||||
solid
|
||||
small
|
||||
primary
|
||||
style="text-align: center;"
|
||||
:to="useModal('upload').to"
|
||||
>
|
||||
<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"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue