[web] Streamline usage of styles

This commit is contained in:
Alain Nussbaumer 2023-12-09 10:49:15 +01:00
parent 8733eb46f1
commit 8d501f9ef1
4 changed files with 17 additions and 13 deletions

View File

@ -23,12 +23,13 @@
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<div> <div>
<h1 class="title is-6" v-text="album.item.name" /> <h1 class="title is-6" v-text="album.item.name" />
<h2 class="subtitle is-7 has-text-grey"> <h2
<b v-text="album.item.artist" /> class="subtitle is-7 has-text-grey has-text-weight-bold"
</h2> v-text="album.item.artist"
/>
<h2 <h2
v-if="album.item.date_released && album.item.media_kind === 'music'" v-if="album.item.date_released && album.item.media_kind === 'music'"
class="subtitle is-7 has-text-grey has-text-weight-normal" class="subtitle is-7 has-text-grey"
v-text="$filters.date(album.item.date_released)" v-text="$filters.date(album.item.date_released)"
/> />
</div> </div>

View File

@ -5,11 +5,12 @@
</div> </div>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="album.name" /> <h1 class="title is-6" v-text="album.name" />
<h2 class="subtitle is-7 has-text-grey">
<b v-text="album.artists[0].name" />
</h2>
<h2 <h2
class="subtitle is-7 has-text-grey has-text-weight-normal" class="subtitle is-7 has-text-grey has-text-weight-bold"
v-text="album.artists[0].name"
/>
<h2
class="subtitle is-7 has-text-grey"
v-text=" v-text="
[album.album_type, $filters.date(album.release_date)].join(', ') [album.album_type, $filters.date(album.release_date)].join(', ')
" "

View File

@ -20,15 +20,14 @@
v-text="item.title" v-text="item.title"
/> />
<h2 <h2
class="subtitle is-7" class="subtitle is-7 has-text-weight-bold"
:class="{ :class="{
'has-text-primary': item.id === state.item_id, 'has-text-primary': item.id === state.item_id,
'has-text-grey-light': !is_next, 'has-text-grey-light': !is_next,
'has-text-grey': is_next && item.id !== state.item_id 'has-text-grey': is_next && item.id !== state.item_id
}" }"
> v-text="item.artist"
<b v-text="item.artist" /> />
</h2>
<h2 <h2
class="subtitle is-7" class="subtitle is-7"
:class="{ :class="{

View File

@ -25,7 +25,10 @@
}" }"
v-text="track.item.title" v-text="track.item.title"
/> />
<h2 class="subtitle is-7 has-text-grey" v-text="track.item.artist" /> <h2
class="subtitle is-7 has-text-grey has-text-weight-bold"
v-text="track.item.artist"
/>
<h2 class="subtitle is-7 has-text-grey" v-text="track.item.album" /> <h2 class="subtitle is-7 has-text-grey" v-text="track.item.album" />
<progress-bar <progress-bar
v-if="show_progress" v-if="show_progress"