Commit b75e3076 authored by Eliot Berriot's avatar Eliot Berriot 💬

Merge branch 'frontend-fixes' into 'develop'

Frontend fixes / improvements

See merge request funkwhale/funkwhale!644
parents 42974263 6cfad078
......@@ -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>
......
......@@ -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>
......
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'}]">
......
......@@ -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;
......
<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>
......
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', () => {
......
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