From bd4093e6bc0e7da70fddb41d08177b2bbebb52cd Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 15 Jan 2025 16:28:04 +0100
Subject: [PATCH] fix(front): small fixes

---
 front/src/components/favorites/List.vue  |   2 +-
 front/src/components/library/Albums.vue  |   2 +-
 front/src/components/library/Artists.vue | 217 +++++++++++------------
 front/src/views/auth/ProfileBase.vue     |   2 +-
 4 files changed, 111 insertions(+), 112 deletions(-)

diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 1b00be8e4..87c5d00d6 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -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
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 84e89faf8..862fc1a1e 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -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"
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 2bc025d88..5e1ce7d67 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -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>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index bf145d84b..51e3b8306 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -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' }"