From 08ef2e0137db378f8074b5940ebbcc72af963e96 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 29 Jan 2025 23:15:36 +0100
Subject: [PATCH] refactor(front): labels for select input fields

---
 front/src/components/favorites/List.vue   | 91 ++++++++++++---------
 front/src/components/library/Albums.vue   | 90 ++++++++++++---------
 front/src/components/library/Artists.vue  | 98 ++++++++++++++---------
 front/src/components/library/Podcasts.vue | 90 ++++++++++++---------
 front/src/components/library/Radios.vue   | 90 ++++++++++++---------
 front/src/style/components/_form.scss     |  6 ++
 front/src/views/playlists/List.vue        | 90 ++++++++++++---------
 7 files changed, 321 insertions(+), 234 deletions(-)

diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index ce37e2634..a08b24725 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -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"
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 806225ee7..884491ba6 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -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
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 7ca60c4bf..b29037132 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -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>
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 08d8afc07..acea53451 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -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"
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 7f5c09414..2695d8e82 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -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
diff --git a/front/src/style/components/_form.scss b/front/src/style/components/_form.scss
index 107e2a46f..a4d4967b5 100644
--- a/front/src/style/components/_form.scss
+++ b/front/src/style/components/_form.scss
@@ -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);
 }
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index a70d80324..3c0640978 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -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"