Skip to content
Snippets Groups Projects
Verified Commit 1a20223c authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Make table scrollables (and improve their resizing)

parent 28aca23d
No related branches found
No related tags found
No related merge requests found
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</header> </header>
<section class="scrolling content"> <section class="scrolling content">
<table <table
class="ui compact collapsing basic fixed single line table" class="ui compact collapsing basic table"
v-for="section in sections" v-for="section in sections"
:key="section.title"> :key="section.title">
<caption>{{ section.title }}</caption> <caption>{{ section.title }}</caption>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<td colspan="4" v-else> <td colspan="4" v-else>
<translate :translate-context="'*/*/*'">N/A</translate> <translate :translate-context="'*/*/*'">N/A</translate>
</td> </td>
<td colspan="2"> <td colspan="2" class="align right">
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon> <track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
<track-playlist-icon <track-playlist-icon
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
......
<template> <template>
<table class="ui compact very basic fixed single line unstackable table"> <div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
v-for="(track, index) in tracks"></track-row> v-for="(track, index) in tracks"></track-row>
</tbody> </tbody>
</table> </table>
</div>
</template> </template>
<script> <script>
......
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<h3 class="ui header"> <h3 class="ui header">
<translate>Hidden artists</translate> <translate>Hidden artists</translate>
</h3> </h3>
<table class="ui compact very basic fixed single line unstackable table"> <table class="ui compact very basic unstackable table">
<thead> <thead>
<tr> <tr>
<th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th> <th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th>
......
<template> <template>
<table class="ui compact very basic single line unstackable table"> <div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<thead> <thead>
<tr> <tr>
<th colspan="1000"> <th colspan="1000">
...@@ -137,6 +138,7 @@ ...@@ -137,6 +138,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
......
...@@ -79,7 +79,9 @@ ...@@ -79,7 +79,9 @@
<i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i> <i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
</file-upload-widget> </file-upload-widget>
</div> </div>
<table v-if="files.length > 0" class="ui single line table"> <div v-if="files.length > 0" class="table-wrapper">
<div class="ui hidden divider"></div>
<table class="ui unstackable table">
<thead> <thead>
<tr> <tr>
<th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th> <th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
...@@ -112,6 +114,7 @@ ...@@ -112,6 +114,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]"> <div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">
......
...@@ -48,7 +48,8 @@ ...@@ -48,7 +48,8 @@
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<template v-if="plts.length > 0"> <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> <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"> <div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<draggable v-model="plts" element="tbody" @update="reorder"> <draggable v-model="plts" element="tbody" @update="reorder">
<tr v-for="(plt, index) in plts" :key="plt.id"> <tr v-for="(plt, index) in plts" :key="plt.id">
<td class="left aligned">{{ plt.index + 1}}</td> <td class="left aligned">{{ plt.index + 1}}</td>
...@@ -66,6 +67,8 @@ ...@@ -66,6 +67,8 @@
</tr> </tr>
</draggable> </draggable>
</table> </table>
</div>
</template> </template>
</div> </div>
</div> </div>
......
...@@ -285,3 +285,19 @@ span.diff.added { ...@@ -285,3 +285,19 @@ span.diff.added {
span.diff.removed { span.diff.removed {
background-color: rgba(255, 0, 0, 0.25); 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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment