Make table scrollables (and improve their resizing)

This commit is contained in:
Eliot Berriot 2019-03-06 17:40:09 +01:00
parent 28aca23d8d
commit 1a20223c38
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
8 changed files with 232 additions and 206 deletions

View File

@ -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>

View File

@ -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"

View File

@ -1,5 +1,6 @@
<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>
<tr>
<th></th>
@ -21,6 +22,7 @@
v-for="(track, index) in tracks"></track-row>
</tbody>
</table>
</div>
</template>
<script>

View File

@ -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>

View File

@ -1,5 +1,6 @@
<template>
<table class="ui compact very basic single line unstackable table">
<div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<thead>
<tr>
<th colspan="1000">
@ -137,6 +138,7 @@
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'

View File

@ -79,7 +79,9 @@
<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">
<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>
@ -112,6 +114,7 @@
</tr>
</tbody>
</table>
</div>
</div>
<div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">

View File

@ -48,7 +48,8 @@
<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">
<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>
@ -66,6 +67,8 @@
</tr>
</draggable>
</table>
</div>
</template>
</div>
</div>

View File

@ -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;
}
}