Merge branch 'frontend-fixes' into 'develop'
Frontend fixes / improvements See merge request funkwhale/funkwhale!644
This commit is contained in:
Eliot Berriot
commit
b75e30763c
|
|
@ -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,26 +1,28 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</form>
|
||||
</section>
|
||||
<section class="ui small text container">
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<h2 class="ui header">
|
||||
<translate :translate-context="'Content/Settings/Title'">Avatar</translate>
|
||||
</h2>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</section>
|
||||
|
||||
<section class="ui small text container">
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<h2 class="ui header">
|
||||
<translate :translate-context="'Content/Settings/Title/Verb'">Change my password</translate>
|
||||
</h2>
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</section>
|
||||
|
||||
<section class="ui small text container" id="content-filters">
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<h2 class="ui header">
|
||||
<i class="eye slash outline icon"></i>
|
||||
<div class="content">
|
||||
|
|
@ -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,142 +1,144 @@
|
|||
<template>
|
||||
<table class="ui compact very basic single line unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1000">
|
||||
<div v-if="refreshable" class="right floated">
|
||||
<span v-if="needsRefresh">
|
||||
<translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('refresh')"
|
||||
class="ui basic icon button"
|
||||
:title="labels.refresh"
|
||||
:aria-label="labels.refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1000">
|
||||
<div v-if="refreshable" class="right floated">
|
||||
<span v-if="needsRefresh">
|
||||
<translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('refresh')"
|
||||
class="ui basic icon button"
|
||||
:title="labels.refresh"
|
||||
:aria-label="labels.refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
|
||||
<div class="ui inline fields">
|
||||
<div class="field">
|
||||
<label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
|
||||
<select class="ui dropdown" v-model="currentActionName">
|
||||
<option v-for="action in actions" :value="action.name">
|
||||
{{ action.label }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
|
||||
<div class="ui inline fields">
|
||||
<div class="field">
|
||||
<label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
|
||||
<select class="ui dropdown" v-model="currentActionName">
|
||||
<option v-for="action in actions" :value="action.name">
|
||||
{{ action.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<dangerous-button
|
||||
v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
|
||||
confirm-color="green"
|
||||
color=""
|
||||
@confirm="launchAction">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
|
||||
<p slot="modal-header">
|
||||
<translate :translate-context="'Modal/*/Title'"
|
||||
key="1"
|
||||
:translate-n="affectedObjectsCount"
|
||||
:translate-params="{count: affectedObjectsCount, action: currentActionName}"
|
||||
translate-plural="Do you want to launch %{ action } on %{ count } elements?">
|
||||
Do you want to launch %{ action } on %{ count } element?
|
||||
</translate>
|
||||
</p>
|
||||
<p slot="modal-content">
|
||||
<translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
|
||||
</p>
|
||||
<div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
|
||||
</dangerous-button>
|
||||
<div
|
||||
v-else
|
||||
@click="launchAction"
|
||||
:disabled="checked.length === 0"
|
||||
:class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
|
||||
</div>
|
||||
<div class="count field">
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-if="selectAll"
|
||||
key="1"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{count: objectsData.count, total: objectsData.count}"
|
||||
translate-plural="All %{ count } elements selected">
|
||||
All %{ count } element selected
|
||||
</translate>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-else
|
||||
key="2"
|
||||
:translate-n="checked.length"
|
||||
:translate-params="{count: checked.length, total: objectsData.count}"
|
||||
translate-plural="%{ count } on %{ total } selected">
|
||||
%{ count } on %{ total } selected
|
||||
</translate>
|
||||
<template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
|
||||
<a @click="selectAll = true" v-if="!selectAll">
|
||||
<translate :translate-context="'Content/*/Link/Verb'"
|
||||
key="3"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{total: objectsData.count}"
|
||||
translate-plural="Select all %{ total } elements">
|
||||
Select all %{ total } elements
|
||||
</translate>
|
||||
</a>
|
||||
<a @click="selectAll = false" v-else>
|
||||
<translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<dangerous-button
|
||||
v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
|
||||
confirm-color="green"
|
||||
color=""
|
||||
@confirm="launchAction">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
|
||||
<p slot="modal-header">
|
||||
<translate :translate-context="'Modal/*/Title'"
|
||||
key="1"
|
||||
:translate-n="affectedObjectsCount"
|
||||
:translate-params="{count: affectedObjectsCount, action: currentActionName}"
|
||||
translate-plural="Do you want to launch %{ action } on %{ count } elements?">
|
||||
Do you want to launch %{ action } on %{ count } element?
|
||||
</translate>
|
||||
</p>
|
||||
<p slot="modal-content">
|
||||
<translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
|
||||
</p>
|
||||
<div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
|
||||
</dangerous-button>
|
||||
<div
|
||||
v-else
|
||||
@click="launchAction"
|
||||
:disabled="checked.length === 0"
|
||||
:class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
|
||||
<div v-if="actionErrors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
|
||||
<ul class="list">
|
||||
<li v-for="error in actionErrors">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="count field">
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-if="selectAll"
|
||||
key="1"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{count: objectsData.count, total: objectsData.count}"
|
||||
translate-plural="All %{ count } elements selected">
|
||||
All %{ count } element selected
|
||||
</translate>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-else
|
||||
key="2"
|
||||
:translate-n="checked.length"
|
||||
:translate-params="{count: checked.length, total: objectsData.count}"
|
||||
translate-plural="%{ count } on %{ total } selected">
|
||||
%{ count } on %{ total } selected
|
||||
</translate>
|
||||
<template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
|
||||
<a @click="selectAll = true" v-if="!selectAll">
|
||||
<translate :translate-context="'Content/*/Link/Verb'"
|
||||
key="3"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{total: objectsData.count}"
|
||||
translate-plural="Select all %{ total } elements">
|
||||
Select all %{ total } elements
|
||||
</translate>
|
||||
</a>
|
||||
<a @click="selectAll = false" v-else>
|
||||
<translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="actionErrors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
|
||||
<ul class="list">
|
||||
<li v-for="error in actionErrors">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="actionResult" class="ui positive message">
|
||||
<p>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
:translate-n="actionResult.updated"
|
||||
:translate-params="{count: actionResult.updated, action: actionResult.action}"
|
||||
translate-plural="Action %{ action } was launched successfully on %{ count } elements">
|
||||
Action %{ action } was launched successfully on %{ count } element
|
||||
</translate>
|
||||
</p>
|
||||
<div v-if="actionResult" class="ui positive message">
|
||||
<p>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
:translate-n="actionResult.updated"
|
||||
:translate-params="{count: actionResult.updated, action: actionResult.action}"
|
||||
translate-plural="Action %{ action } was launched successfully on %{ count } elements">
|
||||
Action %{ action } was launched successfully on %{ count } element
|
||||
</translate>
|
||||
</p>
|
||||
|
||||
<slot name="action-success-footer" :result="actionResult">
|
||||
</slot>
|
||||
<slot name="action-success-footer" :result="actionResult">
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th v-if="actions.length > 0">
|
||||
<div class="ui checkbox">
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th v-if="actions.length > 0">
|
||||
<div class="ui checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="toggleCheckAll"
|
||||
:disabled="checkable.length === 0"
|
||||
:checked="checkable.length > 0 && checked.length === checkable.length"><label> </label>
|
||||
</div>
|
||||
</th>
|
||||
<slot name="header-cells"></slot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="objectsData.count > 0">
|
||||
<tr v-for="(obj, index) in objects">
|
||||
<td v-if="actions.length > 0" class="collapsing">
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="toggleCheckAll"
|
||||
:disabled="checkable.length === 0"
|
||||
:checked="checkable.length > 0 && checked.length === checkable.length"><label> </label>
|
||||
</div>
|
||||
</th>
|
||||
<slot name="header-cells"></slot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="objectsData.count > 0">
|
||||
<tr v-for="(obj, index) in objects">
|
||||
<td v-if="actions.length > 0" class="collapsing">
|
||||
<input
|
||||
type="checkbox"
|
||||
:disabled="checkable.indexOf(getId(obj)) === -1"
|
||||
@click="toggleCheck($event, getId(obj), index)"
|
||||
:checked="checked.indexOf(getId(obj)) > -1"><label> </label>
|
||||
</td>
|
||||
<slot name="row-cells" :obj="obj"></slot>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
:disabled="checkable.indexOf(getId(obj)) === -1"
|
||||
@click="toggleCheck($event, getId(obj), index)"
|
||||
:checked="checked.indexOf(getId(obj)) > -1"><label> </label>
|
||||
</td>
|
||||
<slot name="row-cells" :obj="obj"></slot>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
|
|
|||
|
|
@ -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'}]">
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui section hidden divider"></div>
|
||||
<div class="ui grid">
|
||||
<div class="ui row">
|
||||
<div class="ui stackable one column grid">
|
||||
<div class="column">
|
||||
<album-widget :filters="{playable: true, ordering: '-creation_date'}">
|
||||
<template slot="title"><translate :translate-context="'Content/Home/Title'">Recently added</translate></template>
|
||||
</album-widget>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,15 @@ export function ago (date, locale) {
|
|||
locale = locale || 'en'
|
||||
const m = moment(date)
|
||||
m.locale(locale)
|
||||
return m.fromNow()
|
||||
return m.calendar(null, {
|
||||
sameDay: 'LT',
|
||||
nextDay: 'L',
|
||||
nextWeek: 'L',
|
||||
lastDay: 'L',
|
||||
lastWeek: 'L',
|
||||
sameElse: 'L'
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
Vue.filter('ago', ago)
|
||||
|
|
|
|||
|
|
@ -75,6 +75,9 @@
|
|||
// see https://github.com/webpack/webpack/issues/215
|
||||
@import "./vendor/media";
|
||||
|
||||
$desktop-sidebar-width: 300px;
|
||||
$widedesktop-sidebar-width: 350px;
|
||||
|
||||
html,
|
||||
body {
|
||||
@include media("<desktop") {
|
||||
|
|
@ -91,12 +94,25 @@ body {
|
|||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.ui.wide.left.sidebar {
|
||||
@include media(">desktop") {
|
||||
width: $desktop-sidebar-width;
|
||||
}
|
||||
|
||||
@include media(">widedesktop") {
|
||||
width: $widedesktop-sidebar-width;
|
||||
}
|
||||
}
|
||||
.main.pusher,
|
||||
.footer {
|
||||
@include media(">desktop") {
|
||||
margin-left: 350px !important;
|
||||
margin-left: $desktop-sidebar-width !important;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
@include media(">widedesktop") {
|
||||
margin-left: $widedesktop-sidebar-width !important;;
|
||||
}
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -118,11 +134,14 @@ body {
|
|||
}
|
||||
@include media(">desktop") {
|
||||
position: fixed;
|
||||
left: 350px;
|
||||
left: $desktop-sidebar-width;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
z-index: 99;
|
||||
}
|
||||
@include media(">widedesktop") {
|
||||
left: $widedesktop-sidebar-width;
|
||||
}
|
||||
background-color: white;
|
||||
.item {
|
||||
padding-top: 1.5em;
|
||||
|
|
@ -135,7 +154,10 @@ body {
|
|||
bottom: 1em;
|
||||
left: 1em;
|
||||
@include media(">desktop") {
|
||||
left: 350px;
|
||||
left: $desktop-sidebar-width;
|
||||
}
|
||||
@include media(">widedesktop") {
|
||||
left: $widedesktop-sidebar-width;
|
||||
}
|
||||
}
|
||||
.main-pusher {
|
||||
|
|
@ -143,9 +165,12 @@ body {
|
|||
}
|
||||
.ui.stripe.segment,
|
||||
#footer {
|
||||
padding: 2em;
|
||||
padding: 1em;
|
||||
@include media(">tablet") {
|
||||
padding: 4em;
|
||||
padding: 2em;
|
||||
}
|
||||
@include media(">widedesktop") {
|
||||
padding: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -285,3 +310,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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@
|
|||
$breakpoints: (
|
||||
'phone': 320px,
|
||||
'tablet': 768px,
|
||||
'desktop': 1024px
|
||||
'desktop': 1024px,
|
||||
'widedesktop': 1200px
|
||||
) !default;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="ui stackable grid">
|
||||
<div class="five wide column">
|
||||
<div class="ui two column row">
|
||||
<div class="column">
|
||||
<h3 class="ui header"><translate :translate-context="'Content/Library/Title'">Current library</translate></h3>
|
||||
<library-card :library="library" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {expect} from 'chai'
|
||||
|
||||
import moment from 'moment'
|
||||
import {truncate, ago, capitalize, year} from '@/filters'
|
||||
|
||||
describe('filters', () => {
|
||||
|
|
@ -24,7 +24,15 @@ describe('filters', () => {
|
|||
it('works', () => {
|
||||
const input = new Date()
|
||||
let output = ago(input)
|
||||
expect(output).to.equal('a few seconds ago')
|
||||
let expected = moment(input).calendar(input, {
|
||||
sameDay: 'LT',
|
||||
nextDay: 'L',
|
||||
nextWeek: 'L',
|
||||
lastDay: 'L',
|
||||
lastWeek: 'L',
|
||||
sameElse: 'L'
|
||||
})
|
||||
expect(output).to.equal(expected)
|
||||
})
|
||||
})
|
||||
describe('year', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue