From 351c4b24387c9d7198cb79f5595f963608e17ded Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Sat, 3 Mar 2018 14:22:40 +0100
Subject: fancy animations

---
 src/pages/UploadList.vue | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

(limited to 'src/pages/UploadList.vue')

diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index 3aba9f7..8b54b85 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -12,31 +12,30 @@
         @refresh="refresh">
         <q-td slot='body-cell-action' slot-scope="props" :props='props'>
           <q-btn color="primary"
+                 v-if="$route.params.uploadId !== props.row._id"
                  small
                  outline
                  icon="fa-info-circle"
-                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
-            Details</q-btn>
+                 label="Details"
+                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})" />
           <q-btn color="negative"
                  outline
                  small
                  icon="fa-trash-o"
+                 label="Delete"
                  v-if="props.row.author.username === $store.state.user.decodedToken.username"
-                 @click="deleteUpload(cell.row)">
-            Delete</q-btn>
+                 @click="deleteUpload(cell.row)" />
         </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">
+    <transition appear name="grow-fade">
+      <div v-if="!showList" class="col-sm-12 col-md-6">
         <router-view></router-view>
-      </transition>
-    </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -135,5 +134,16 @@
 
 <style lang="styl" type="text/stylus" scoped>
   .animateMaxWidth
-    transition: max-width .5s ease-in-out;
+    transition: max-width .5s ease-in-out
+
+  .grow-fade-enter-active
+    transition: all .5s ease-in-out
+
+  .grow-fade-leave-active
+    transition: all .5s ease-in-out
+
+  .grow-fade-enter, .grow-fade-leave-to
+    max-width: 0
+    opacity: 0
+
 </style>
-- 
cgit v1.2.3-54-g00ecf