Use fixed layout for song list

This commit is contained in:
An Phan 2016-06-17 14:09:21 +08:00
parent e0411ad019
commit 66938912b4
No known key found for this signature in database
GPG key ID: 05536BB4BCDC02A2

View file

@ -14,15 +14,15 @@
<i class="fa fa-angle-down" v-show="sortKey === 'track' && order > 0"></i> <i class="fa fa-angle-down" v-show="sortKey === 'track' && order > 0"></i>
<i class="fa fa-angle-up" v-show="sortKey === 'track' && order < 0"></i> <i class="fa fa-angle-up" v-show="sortKey === 'track' && order < 0"></i>
</th> </th>
<th @click="sort('title')">Title <th @click="sort('title')" class="title">Title
<i class="fa fa-angle-down" v-show="sortKey === 'title' && order > 0"></i> <i class="fa fa-angle-down" v-show="sortKey === 'title' && order > 0"></i>
<i class="fa fa-angle-up" v-show="sortKey === 'title' && order < 0"></i> <i class="fa fa-angle-up" v-show="sortKey === 'title' && order < 0"></i>
</th> </th>
<th @click="sort(['album.artist.name', 'album.name', 'track'])">Artist <th @click="sort(['album.artist.name', 'album.name', 'track'])" class="artist">Artist
<i class="fa fa-angle-down" v-show="sortingByArtist && order > 0"></i> <i class="fa fa-angle-down" v-show="sortingByArtist && order > 0"></i>
<i class="fa fa-angle-up" v-show="sortingByArtist && order < 0"></i> <i class="fa fa-angle-up" v-show="sortingByArtist && order < 0"></i>
</th> </th>
<th @click="sort(['album.name', 'track'])">Album <th @click="sort(['album.name', 'track'])" class="album">Album
<i class="fa fa-angle-down" v-show="sortingByAlbum && order > 0"></i> <i class="fa fa-angle-down" v-show="sortingByAlbum && order > 0"></i>
<i class="fa fa-angle-up" v-show="sortingByAlbum && order < 0"></i> <i class="fa fa-angle-up" v-show="sortingByAlbum && order < 0"></i>
</th> </th>
@ -493,6 +493,7 @@
table { table {
width: 100%; width: 100%;
table-layout: fixed;
} }
tr.droppable { tr.droppable {
@ -504,6 +505,9 @@
text-align: left; text-align: left;
padding: 8px; padding: 8px;
vertical-align: middle; vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&.time { &.time {
width: 72px; width: 72px;
@ -511,7 +515,15 @@
} }
&.track-number { &.track-number {
min-width: 42px; width: 42px;
}
&.artist {
width: 25%;
}
&.album {
width: 30%;
} }
&.play { &.play {