Merge branch 'frontend-fixes' into 'develop'
Frontend fixes / improvements See merge request funkwhale/funkwhale!644
This commit is contained in:
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,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>
|
||||
|
|
|
@ -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,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'}]">
|
||||
|
|
|
@ -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,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>
|
||||
|
|
|
@ -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