MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Display only icons in tabs when on mobile 

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"
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>

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

@ -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>