mirror of
https://github.com/koel/koel
synced 2024-11-10 14:44:13 +00:00
Fix artist/album name overflow on mobile
This commit is contained in:
parent
1661d7861f
commit
c6ab0ed14e
3 changed files with 22 additions and 8 deletions
|
@ -6,13 +6,15 @@
|
|||
</a>
|
||||
</span>
|
||||
<footer>
|
||||
<a class="name" @click.prevent="viewAlbumDetails(album)">{{ album.name }}</a>
|
||||
<span class="sep">by</span>
|
||||
<a class="artist" v-if="isNormalArtist"
|
||||
@click.prevent="viewArtistDetails(album.artist)">
|
||||
{{ album.artist.name }}
|
||||
</a>
|
||||
<span class="artist nope" v-else>{{ album.artist.name }}</span>
|
||||
<div class="info">
|
||||
<a class="name" @click.prevent="viewAlbumDetails(album)">{{ album.name }}</a>
|
||||
<span class="sep">by</span>
|
||||
<a class="artist" v-if="isNormalArtist"
|
||||
@click.prevent="viewArtistDetails(album.artist)">
|
||||
{{ album.artist.name }}
|
||||
</a>
|
||||
<span class="artist nope" v-else>{{ album.artist.name }}</span>
|
||||
</div>
|
||||
<p class="meta">
|
||||
<span class="left">
|
||||
{{ album.songs.length | pluralize('song') }}
|
||||
|
|
|
@ -6,7 +6,9 @@
|
|||
</a>
|
||||
</span>
|
||||
<footer>
|
||||
<a class="name" @click.prevent="viewArtistDetails(artist)">{{ artist.name }}</a>
|
||||
<div class="info">
|
||||
<a class="name" @click.prevent="viewArtistDetails(artist)">{{ artist.name }}</a>
|
||||
</div>
|
||||
<p class="meta">
|
||||
<span class="left">
|
||||
{{ artist.albums.length | pluralize('album') }}
|
||||
|
|
|
@ -129,6 +129,7 @@
|
|||
padding: 16px;
|
||||
background: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
@ -166,6 +167,15 @@
|
|||
|
||||
.as-list & {
|
||||
display: inline;
|
||||
white-space: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.as-list & {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue