Make table scrollables (and improve their resizing)
This commit is contained in:
parent
28aca23d8d
commit
1a20223c38
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'}]">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue