From 7be1989cd498bdf6da34e320cb272158200774ad Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 30 Mar 2024 11:17:28 +0100
Subject: [PATCH] [web] Display only icons in tabs when on mobile

No need to scroll horizontally to switch tabs on the music and audiobook pages anymore.
---
 web-src/src/components/TabsAudiobooks.vue | 15 +++++++++---
 web-src/src/components/TabsMusic.vue      | 30 ++++++++++++++++++-----
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index 90921b64..8af3d9ef 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -17,7 +17,10 @@
                       name="account-music"
                       size="16"
                     />
-                    <span v-text="$t('page.audiobooks.tabs.authors')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.audiobooks.tabs.authors')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -29,7 +32,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="album" size="16" />
-                    <span v-text="$t('page.audiobooks.tabs.audiobooks')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.audiobooks.tabs.audiobooks')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -41,7 +47,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="speaker" size="16" />
-                    <span v-text="$t('page.audiobooks.tabs.genres')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.audiobooks.tabs.genres')"
+                    />
                   </a>
                 </li>
               </router-link>
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index ef446c9d..6e91a9cb 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -13,7 +13,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="history" size="16" />
-                    <span v-text="$t('page.music.tabs.history')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.history')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -29,7 +32,10 @@
                       name="account-music"
                       size="16"
                     />
-                    <span v-text="$t('page.music.tabs.artists')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.artists')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -41,7 +47,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="album" size="16" />
-                    <span v-text="$t('page.music.tabs.albums')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.albums')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -53,7 +62,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="speaker" size="16" />
-                    <span v-text="$t('page.music.tabs.genres')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.genres')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -69,7 +81,10 @@
                       name="book-open-page-variant"
                       size="16"
                     />
-                    <span v-text="$t('page.music.tabs.composers')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.composers')"
+                    />
                   </a>
                 </li>
               </router-link>
@@ -82,7 +97,10 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <mdicon class="icon is-small" name="spotify" size="16" />
-                    <span v-text="$t('page.music.tabs.spotify')" />
+                    <span
+                      class="is-hidden-mobile"
+                      v-text="$t('page.music.tabs.spotify')"
+                    />
                   </a>
                 </li>
               </router-link>