1 files changed, 49 insertions, 36 deletions
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index da297ba..3aba9f7 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -1,37 +1,42 @@
 <template>
-  <div>
-    <transition :enter="showList ? 'fadeInLeft' : 'fadeInRight'" :leave="showList ? 'fadeOutRight' : 'fadeOutLeft'" mode="out-in" duration="500">
-      <div v-if="showList">
-        <h4>Available Mods</h4>
-        <q-table
-          no-data-label="No mods available"
-          row-key="name"
-          :data="uploads"
-          :config="tableConfig"
-          :columns="tableColumns"
-          @refresh="refresh">
-          <q-td slot='body-cell-action' slot-scope="props" :props='props'>
-            <q-btn color="primary"
-                   small
-                   outline
-                   icon="fa-info-circle"
-                   @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
-              Details</q-btn>
-            <q-btn color="negative"
-                   outline
-                   small
-                   icon="fa-trash-o"
-                   v-if="props.row.author.username === $store.state.user.decodedToken.username"
-                   @click="deleteUpload(cell.row)">
-              Delete</q-btn>
-          </q-td>
-          <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
-            {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
-          </q-td>
-        </q-table>
-      </div>
-      <router-view></router-view>
-    </transition>
+  <div class="flex row no-wrap gutter-lg">
+    <div class="animateMaxWidth" :class="showList ? 'col-12' : 'gt-sm col-md-6'">
+      <h4>Available Mods</h4>
+      <q-table
+        no-data-label="No mods available"
+        row-key="name"
+        :data="uploads"
+        :config="tableConfig"
+        :columns="tableColumns"
+        :visible-columns="visibleColumns"
+        @refresh="refresh">
+        <q-td slot='body-cell-action' slot-scope="props" :props='props'>
+          <q-btn color="primary"
+                 small
+                 outline
+                 icon="fa-info-circle"
+                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
+            Details</q-btn>
+          <q-btn color="negative"
+                 outline
+                 small
+                 icon="fa-trash-o"
+                 v-if="props.row.author.username === $store.state.user.decodedToken.username"
+                 @click="deleteUpload(cell.row)">
+            Delete</q-btn>
+        </q-td>
+        <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
+          {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
+        </q-td>
+      </q-table>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <transition appear
+                  enter-active-class="animated fadeIn"
+                  leave-active-class="animated fadeOut">
+        <router-view></router-view>
+      </transition>
+    </div>
   </div>
 </template>
 
@@ -45,7 +50,15 @@
     computed: {
       showList () {
         return this.$route.name === 'upload-list'
-      }
+      },
+      visibleColumns () {
+        let that = this
+        let removeOnSmall = ['description']
+        return this.tableColumns.map(el => el.name).filter(el => that.showList || removeOnSmall.indexOf(el) === -1)
+      },
+    },
+    mounted () {
+      this.refresh()
     },
     watch: {
       showList: {
@@ -121,6 +134,6 @@
 </script>
 
 <style lang="styl" type="text/stylus" scoped>
-  .description
-    max-width: 400px
+  .animateMaxWidth
+    transition: max-width .5s ease-in-out;
 </style>