Merge branch 'frontend-fixes' into 'develop'

Frontend fixes / improvements

See merge request funkwhale/funkwhale!644

front/src/components/ShortcutsModal.vue

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

front/src/components/audio/track/Row.vue

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

front/src/components/audio/track/Table.vue

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

front/src/components/auth/Settings.vue

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

front/src/components/common/ActionTable.vue

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

front/src/components/library/FileUpload.vue

@@ -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'}]">

front/src/components/library/Home.vue

@@ -19,8 +19,8 @@
         </div>
       </div>
       <div class="ui section hidden divider"></div>
-      <div class="ui grid">
+      <div class="ui stackable one column grid">
-        <div class="ui row">
+        <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>

front/src/components/playlists/Editor.vue

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

front/src/filters.js

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

front/src/style/_main.scss

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

front/src/style/vendor/_media.scss

@@ -34,7 +34,8 @@
 $breakpoints: (
   'phone': 320px,
   'tablet': 768px,
-  'desktop': 1024px
+  'desktop': 1024px,
+  'widedesktop': 1200px
 ) !default;
 
 

front/src/views/content/libraries/DetailArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="ui stackable grid">
+    <div class="ui two column row">
-      <div class="five wide column">
+      <div class="column">
         <h3 class="ui header"><translate :translate-context="'Content/Library/Title'">Current library</translate></h3>
         <library-card :library="library" />
       </div>

front/tests/unit/specs/filters/filters.spec.js

@@ -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', () => {