Commit 1a20223c authored by Eliot Berriot's avatar Eliot Berriot 💬

Make table scrollables (and improve their resizing)

parent 28aca23d
......@@ -5,7 +5,7 @@
</header>
<section class="scrolling content">
<table
class="ui compact collapsing basic fixed single line table"
class="ui compact collapsing basic table"
v-for="section in sections"
:key="section.title">
<caption>{{ section.title }}</caption>
......
......@@ -40,7 +40,7 @@
<td colspan="4" v-else>
<translate :translate-context="'*/*/*'">N/A</translate>
</td>
<td colspan="2">
<td colspan="2" class="align right">
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
<track-playlist-icon
v-if="$store.state.auth.authenticated"
......
<template>
<table class="ui compact very basic fixed single line unstackable table">
<thead>
<tr>
<th></th>
<th></th>
<th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<track-row
:playable="playable"
:display-position="displayPosition"
:track="track"
:artist="artist"
:key="index + '-' + track.id"
v-for="(track, index) in tracks"></track-row>
</tbody>
</table>
<div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<thead>
<tr>
<th></th>
<th></th>
<th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<track-row
:playable="playable"
:display-position="displayPosition"
:track="track"
:artist="artist"
:key="index + '-' + track.id"
v-for="(track, index) in tracks"></track-row>
</tbody>
</table>
</div>
</template>
<script>
......
......@@ -128,7 +128,7 @@
<h3 class="ui header">
<translate>Hidden artists</translate>
</h3>
<table class="ui compact very basic fixed single line unstackable table">
<table class="ui compact very basic unstackable table">
<thead>
<tr>
<th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th>
......
This diff is collapsed.
......@@ -79,39 +79,42 @@
<i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
</file-upload-widget>
</div>
<table v-if="files.length > 0" class="ui single line table">
<thead>
<tr>
<th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
<th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
<th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in sortedFiles" :key="file.id">
<td :title="file.name">{{ file.name | truncate(60) }}</td>
<td>{{ file.size | humanSize }}</td>
<td>
<span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
<span class="ui red icon label">
<i class="question circle outline icon" /> {{ file.error }}
<div v-if="files.length > 0" class="table-wrapper">
<div class="ui hidden divider"></div>
<table class="ui unstackable table">
<thead>
<tr>
<th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
<th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
<th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in sortedFiles" :key="file.id">
<td :title="file.name">{{ file.name | truncate(60) }}</td>
<td>{{ file.size | humanSize }}</td>
<td>
<span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
<span class="ui red icon label">
<i class="question circle outline icon" /> {{ file.error }}
</span>
</span>
</span>
<span v-else-if="file.success" class="ui green label">
<translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
</span>
<span v-else-if="file.active" class="ui yellow label">
<translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
({{ parseInt(file.progress) }}%)
</span>
<template v-else>
<span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
<button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
</template>
</td>
</tr>
</tbody>
</table>
<span v-else-if="file.success" class="ui green label">
<translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
</span>
<span v-else-if="file.active" class="ui yellow label">
<translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
({{ parseInt(file.progress) }}%)
</span>
<template v-else>
<span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
<button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
</template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">
......
......@@ -48,24 +48,27 @@
<div class="ui hidden divider"></div>
<template v-if="plts.length > 0">
<p><translate :translate-context="'Content/Playlist/Paragraph/Call to action'">Drag and drop rows to reorder tracks in the playlist</translate></p>
<table class="ui compact very basic fixed single line unstackable table">
<draggable v-model="plts" element="tbody" @update="reorder">
<tr v-for="(plt, index) in plts" :key="plt.id">
<td class="left aligned">{{ plt.index + 1}}</td>
<td class="center aligned">
<img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ plt.track.title }}</strong><br />
{{ plt.track.artist.name }}
</td>
<td class="right aligned">
<i @click.stop="removePlt(index)" class="circular red trash icon"></i>
</td>
</tr>
</draggable>
</table>
<div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<draggable v-model="plts" element="tbody" @update="reorder">
<tr v-for="(plt, index) in plts" :key="plt.id">
<td class="left aligned">{{ plt.index + 1}}</td>
<td class="center aligned">
<img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ plt.track.title }}</strong><br />
{{ plt.track.artist.name }}
</td>
<td class="right aligned">
<i @click.stop="removePlt(index)" class="circular red trash icon"></i>
</td>
</tr>
</draggable>
</table>
</div>
</template>
</div>
</div>
......
......@@ -285,3 +285,19 @@ span.diff.added {
span.diff.removed {
background-color: rgba(255, 0, 0, 0.25);
}
.table-wrapper {
display: block;
overflow-x: auto;
}
td.align.right {
text-align: right;
}
.ui.pagination.menu {
margin-top: 1em;
+ span {
margin-left: 1em;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment