From cb4fb2e4fd0ca1696dc3214db1100d070f61aaaa Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 15 Feb 2018 22:32:37 +0100
Subject: [PATCH] Responsive cards/tables thanks to unstackable

---
 front/src/components/Sidebar.vue                    | 2 +-
 front/src/components/audio/Player.vue               | 2 +-
 front/src/components/audio/album/Card.vue           | 2 +-
 front/src/components/audio/artist/Card.vue          | 2 +-
 front/src/components/audio/track/Table.vue          | 2 +-
 front/src/components/library/import/BatchDetail.vue | 2 +-
 front/src/components/library/import/BatchList.vue   | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 76fd8abac..6aaf04c42 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -53,7 +53,7 @@
       </div>
     </div>
     <div class="ui bottom attached tab" data-tab="queue">
-      <table class="ui compact inverted very basic fixed single line table">
+      <table class="ui compact inverted very basic fixed single line unstackable table">
         <draggable v-model="queue.tracks" element="tbody" @update="reorder">
           <tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
               <td class="right aligned">{{ index + 1}}</td>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 500f4dc1d..9388c2682 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -10,7 +10,7 @@
       :track="currentTrack">
     </audio-track>
 
-    <div v-if="currentTrack" class="track-area ui items">
+    <div v-if="currentTrack" class="track-area ui unstackable items">
       <div class="ui inverted item">
         <div class="ui tiny image">
           <img v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 4c803b29c..968b828a4 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -14,7 +14,7 @@
           </router-link>
         </div>
         <div class="description" v-if="mode === 'rich'">
-          <table class="ui very basic fixed single line compact table">
+          <table class="ui very basic fixed single line compact unstackable table">
             <tbody>
               <tr v-for="track in tracks">
                 <td>
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index 8a02163fb..9a82d6c8f 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -7,7 +7,7 @@
           </router-link>
         </div>
         <div class="description">
-          <table class="ui compact very basic fixed single line table">
+          <table class="ui compact very basic fixed single line unstackable table">
             <tbody>
               <tr v-for="album in albums">
                 <td>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 8a591d3bd..00bcf9f7d 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="ui compact very basic fixed single line table">
+  <table class="ui compact very basic fixed single line unstackable table">
     <thead>
       <tr>
         <th></th>
diff --git a/front/src/components/library/import/BatchDetail.vue b/front/src/components/library/import/BatchDetail.vue
index 621078b15..417fd55c2 100644
--- a/front/src/components/library/import/BatchDetail.vue
+++ b/front/src/components/library/import/BatchDetail.vue
@@ -17,7 +17,7 @@
         <div v-if="batch.status === 'pending'" class="label">Importing {{ batch.jobs.length }} tracks...</div>
         <div v-if="batch.status === 'finished'" class="label">Imported {{ batch.jobs.length }} tracks!</div>
       </div>
-      <table class="ui table">
+      <table class="ui unstackable table">
         <thead>
           <tr>
             <th>Job ID</th>
diff --git a/front/src/components/library/import/BatchList.vue b/front/src/components/library/import/BatchList.vue
index 8133d8e21..de4fef554 100644
--- a/front/src/components/library/import/BatchList.vue
+++ b/front/src/components/library/import/BatchList.vue
@@ -12,7 +12,7 @@
         :disabled="!nextLink">Next <i class="right arrow icon"></i></button>
       <div class="ui hidden clearing divider"></div>
       <div class="ui hidden clearing divider"></div>
-      <table v-if="results.length > 0" class="ui table">
+      <table v-if="results.length > 0" class="ui unstackable table">
         <thead>
           <tr>
             <th>ID</th>