fix(front): [WIP] Radios page

front/src/components/favorites/List.vue

@@ -109,10 +109,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout main stack
+  <Layout main stack no-gap align-left
     v-title="labels.title"
   >
+    <Spacer/>
     <Section
+      no-items
       v-if="results"
       :h1="t('components.favorites.List.title', store.state.favorites.count)"
     >

front/src/components/library/Radios.vue

@@ -14,8 +14,14 @@ import { useStore } from '~/store'
 import axios from 'axios'
 import $ from 'jquery'
 
-import Pagination from '~/components/vui/Pagination.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/layout/Section.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
+import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
+import Card from '~/components/ui/Card.vue'
+import Input from '~/components/ui/Input.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -109,17 +115,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <main v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('components.library.Radios.header.browse') }}
-      </h2>
-      <div class="ui hidden divider" />
-      <div class="ui row">
-        <h3 class="ui header">
+  <Layout main stack>
+    <Section :h1="t('components.library.Radios.header.browse')" />
+        <h2 class="ui header">
           {{ t('components.library.Radios.header.instance') }}
-        </h3>
-        <div class="ui cards">
+        </h2>
+        <Layout flex>
           <radio-card
             v-if="isAuthenticated"
             :type="'actor-content'"
@@ -146,93 +147,62 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             v-if="store.state.auth.authenticated && scope === 'me'"
             :type="'less-listened_library'"
           />
-        </div>
-      </div>
-
-      <div class="ui hidden divider" />
-      <h3 class="ui header">
-        {{ t('components.library.Radios.header.user') }}
-      </h3>
-      <router-link
-        v-if="isAuthenticated"
-        class="ui success button"
-        to="/library/radios/build"
-      >
-        {{ t('components.library.Radios.button.create') }}
-      </router-link>
-      <div class="ui hidden divider" />
-      <form
+      </Layout>
+      <Spacer />
+      <Section :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" />
+      <Layout flex form
         :class="['ui', {'loading': isLoading}, 'form']"
         @submit.prevent="search"
       >
-        <div class="fields">
-          <div class="field">
-            <label for="radios-search">{{ t('components.library.Radios.label.search') }}</label>
-            <div class="ui action input">
-              <input
-                id="radios-search"
-                v-model="query"
-                type="text"
-                name="search"
-                :placeholder="labels.searchPlaceholder"
-              >
-              <Button
-                icon="bi-search"
-                type="submit"
-                :aria-label="t('components.library.Radios.button.search')"
-              >
-              </Button>
-            </div>
-          </div>
-          <div class="field">
-            <label for="radios-ordering">{{ t('components.library.Radios.ordering.label') }}</label>
-            <select
-              id="radios-ordering"
-              v-model="ordering"
-              class="ui dropdown"
-            >
-              <option
-                v-for="(option, key) in orderingOptions"
-                :key="key"
-                :value="option[0]"
-              >
-                {{ sharedLabels.filters[option[1]] }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="radios-ordering-direction">{{ t('components.library.Radios.ordering.direction.label') }}</label>
-            <select
-              id="radios-ordering-direction"
-              v-model="orderingDirection"
-              class="ui dropdown"
-            >
-              <option value="+">
-                {{ t('components.library.Radios.ordering.direction.ascending') }}
-              </option>
-              <option value="-">
-                {{ t('components.library.Radios.ordering.direction.descending') }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="radios-results">{{ t('components.library.Radios.pagination.results') }}</label>
-            <select
-              id="radios-results"
-              v-model="paginateBy"
-              class="ui dropdown"
-            >
-              <option
-                v-for="opt in paginateOptions"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </form>
+        <Input search
+          id="radios-search"
+          v-model="query"
+          name="search"
+          :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="ui dropdown"
+        >
+          <option
+            v-for="(option, key) in orderingOptions"
+            :key="key"
+            :value="option[0]"
+          >
+            {{ sharedLabels.filters[option[1]] }}
+          </option>
+        </select>
+        <select
+          id="radios-ordering-direction"
+          :label="t('components.library.Radios.ordering.direction.label')"
+          v-model="orderingDirection"
+          class="ui 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="ui dropdown"
+        >
+          <option
+            v-for="opt in paginateOptions"
+            :key="opt"
+            :value="opt"
+          >
+            {{ opt }}
+          </option>
+        </select>
+      </Layout>
       <div class="ui hidden divider" />
       <div
         v-if="result && result.results.length === 0"
@@ -262,14 +232,10 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           :custom-radio="radio"
         />
       </div>
-      <div class="ui center aligned basic segment">
-        <pagination
-          v-if="result && result.count > paginateBy"
-          v-model:current="page"
-          :paginate-by="paginateBy"
-          :total="result.count"
-        />
-      </div>
-    </section>
-  </main>
+      <Pagination
+        v-if="result && result.count > paginateBy"
+        :page="page"
+        :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+      />
+  </Layout>
 </template>

front/src/components/radios/Card.vue

@@ -6,6 +6,7 @@ import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
 import RadioButton from './Button.vue'
+import Card from '~/components/ui/Card.vue'
 
 interface Props {
   type: string
@@ -33,27 +34,18 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
 </script>
 
 <template>
-  <div class="ui card">
-    <div class="content">
-      <h4 class="header">
-        <router-link
-          v-if="radio.id"
-          class="discrete link"
-          :to="{name: 'library.radios.detail', params: {id: radio.id}}"
-        >
-          {{ radio.name }}
-        </router-link>
-        <template v-else>
-          {{ radio.name }}
-        </template>
-      </h4>
-      <div
-        class="description"
-        :class="{expanded: isDescriptionExpanded}"
-        @click="isDescriptionExpanded = !isDescriptionExpanded"
-      >
-        {{ radio.description }}
-      </div>
+  <Card
+    v-if="radio.id"
+    large
+    :title="radio.name"
+    :to="{name: 'library.radios.detail', params: {id: radio.id}}"
+  >
+    <div
+      class="description"
+      :class="{expanded: isDescriptionExpanded}"
+      @click="isDescriptionExpanded = !isDescriptionExpanded"
+    >
+      {{ radio.description }}
     </div>
     <div class="extra content">
       <user-link
@@ -61,20 +53,50 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         :user="radio.user"
         class="left floated"
       />
-      <div class="ui hidden divider" />
-      <radio-button
-        class="right floated button"
-        :type="type"
-        :custom-radio-id="customRadioId"
-        :object-id="objectId"
-      />
-      <router-link
-        v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
-        class="ui success button right floated"
-        :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
-      >
-        {{ t('components.radios.Card.button.edit') }}
-      </router-link>
+        <radio-button
+          class="right floated button"
+          :type="type"
+          :custom-radio-id="customRadioId"
+          :object-id="objectId"
+        />
+        <Link
+          v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
+          class="ui success button right floated"
+          :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
+        >
+          {{ t('components.radios.Card.button.edit') }}
+        </Link>
     </div>
-  </div>
+  </Card>
+  <Card
+    v-else
+    large
+    :title="radio.name"
+  >
+    <div
+      class="description"
+      :class="{expanded: isDescriptionExpanded}"
+      @click="isDescriptionExpanded = !isDescriptionExpanded"
+    >
+      {{ radio.description }}
+    </div>
+    <div class="extra content">
+      <user-link
+        v-if="radio.user"
+        :user="radio.user"
+      />
+        <radio-button
+          :type="type"
+          :custom-radio-id="customRadioId"
+          :object-id="objectId"
+        />
+        <Link
+          v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
+          class="ui success button right floated"
+          :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
+        >
+          {{ t('components.radios.Card.button.edit') }}
+        </Link>
+    </div>
+  </Card>
 </template>