MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-23 12:05:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Display only icons in tabs when on mobile

Browse Source 
No need to scroll horizontally to switch tabs on the music and audiobook pages anymore.
This commit is contained in:
Alain Nussbaumer 2024-03-30 11:17:28 +01:00
parent 3e7e03b4c1
commit 7be1989cd4
2 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web-src/src/components/TabsAudiobooks.vue
View File

@ -17,7 +17,10 @@
name="account-music" name="account-music"
size="16" size="16"
/> />
<span v-text="$t('page.audiobooks.tabs.authors')" /> <span
class="is-hidden-mobile"
v-text="$t('page.audiobooks.tabs.authors')"
/>
</a> </a>
</li> </li>
</router-link> </router-link>
@ -29,7 +32,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>
@ -41,7 +47,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="speaker" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>

30
web-src/src/components/TabsMusic.vue
View File

@ -13,7 +13,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="history" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>
@ -29,7 +32,10 @@
name="account-music" name="account-music"
size="16" size="16"
/> />
<span v-text="$t('page.music.tabs.artists')" /> <span
class="is-hidden-mobile"
v-text="$t('page.music.tabs.artists')"
/>
</a> </a>
</li> </li>
</router-link> </router-link>
@ -41,7 +47,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>
@ -53,7 +62,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="speaker" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>
@ -69,7 +81,10 @@
name="book-open-page-variant" name="book-open-page-variant"
size="16" size="16"
/> />
<span v-text="$t('page.music.tabs.composers')" /> <span
class="is-hidden-mobile"
v-text="$t('page.music.tabs.composers')"
/>
</a> </a>
</li> </li>
</router-link> </router-link>
@ -82,7 +97,10 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="spotify" size="16" /> <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> </a>
</li> </li>
</router-link> </router-link>