From 9635143e277e58afac5c0613598a958eca4a0d98 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 29 Jan 2025 15:43:34 +0100
Subject: [PATCH] fix(front): Radio page layout

---
 front/src/components/library/Radios.vue | 10 +++++-----
 front/src/components/radios/Button.vue  |  1 +
 front/src/components/radios/Card.vue    | 21 ++++++++++++---------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 6e2656f4d..e2d268430 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -14,6 +14,7 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
@@ -113,10 +114,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 
 <template>
   <Layout main stack>
-    <Section :h1="t('components.library.Radios.header.browse')" />
-        <h2 class="ui header">
-          {{ t('components.library.Radios.header.instance') }}
-        </h2>
+    <Header :h1="t('components.library.Radios.header.browse')" />
+    <Section alignLeft :h2="t('components.library.Radios.header.instance')">
+    </Section>
         <Layout flex>
           <radio-card
             v-if="isAuthenticated"
@@ -146,7 +146,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           />
       </Layout>
       <Spacer />
-      <Section :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" />
+      <Section alignLeft :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"
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index 5eb98eac6..d419a1d2a 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -85,6 +85,7 @@ const toggleRadio = () => {
     :round="playOnly"
     class="play-button"
     icon="bi-play-fill"
+    :full="!playOnly"
     :square="store.state.auth.authenticated && type === 'custom'"
     @click="toggleRadio"
   >
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index 00b0f866f..197d038ed 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -68,7 +68,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
       </div>
     </template>
 
-    <template #footer>
+    <template #action>
       <Button
         v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
         primary
@@ -85,11 +85,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     :title="radio.name"
   >
     <template #topright>
-      <radio-button
-        :type="type"
-        :custom-radio-id="customRadioId"
-        :object-id="objectId"
-      />
     </template>
 
     <template #default>
@@ -107,10 +102,15 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
       >
         {{ radio.description }}
       </div>
-      <Spacer />
     </template>
 
-    <template #footer>
+    <template #action>
+      <radio-button
+        :type="type"
+        :custom-radio-id="customRadioId"
+        :object-id="objectId"
+      />
+      <Spacer v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id" h grow />
       <Button
         v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
         primary
@@ -125,8 +125,11 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
 
 
 <style lang="scss" scoped>
-.play-button {
+.play-button.is-icon-only {
   top: 16px;
   right: 16px;
 }
+h6.title {
+  font-size: 3em;
+}
 </style>