improve table responsiveness

This commit is contained in:
Thomas Amland 2020-08-02 15:30:24 +02:00
parent 60e1192e12
commit 2836e934fb

View File

@ -5,9 +5,9 @@
<tr> <tr>
<th class="pl-0 pr-0 text-center text-muted"></th> <th class="pl-0 pr-0 text-center text-muted"></th>
<th class="text-left">Title</th> <th class="text-left">Title</th>
<th class="text-left">Artist</th> <th class="text-left d-none d-lg-table-cell">Artist</th>
<th v-if="showAlbum" class="text-left">Album</th> <th class="text-left d-none d-md-table-cell" v-if="showAlbum">Album</th>
<th class="text-right">Duration</th> <th class="text-right d-none d-md-table-cell">Duration</th>
<th class="text-right">Actions</th> <th class="text-right">Actions</th>
</tr> </tr>
</thead> </thead>
@ -28,11 +28,11 @@
</td> </td>
<td @click="play(index)"> <td @click="play(index)">
{{ item.title }} {{ item.title }}
<div class="hidden-md text-muted"> <div class="d-lg-none text-muted">
<small>{{ item.artist }}</small> <small>{{ item.artist }}</small>
</div> </div>
</td> </td>
<td> <td class="d-none d-lg-table-cell">
<template v-if="item.artistId"> <template v-if="item.artistId">
<router-link :to="{name: 'artist', params: {id: item.artistId}}"> <router-link :to="{name: 'artist', params: {id: item.artistId}}">
{{ item.artist }} {{ item.artist }}
@ -42,12 +42,12 @@
{{ item.artist }} {{ item.artist }}
</template> </template>
</td> </td>
<td v-if="showAlbum"> <td class="d-none d-md-table-cell" v-if="showAlbum">
<router-link :to="{name: 'album', params: {id: item.albumId}}"> <router-link :to="{name: 'album', params: {id: item.albumId}}">
{{ item.album }} {{ item.album }}
</router-link> </router-link>
</td> </td>
<td class="text-right"> <td class="text-right d-none d-md-table-cell">
{{ item.duration | duration }} {{ item.duration | duration }}
</td> </td>
<td class="text-right"> <td class="text-right">