From 7561f4dddf45db134eff685d97ac71d9134c1940 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 28 Feb 2018 19:21:06 +0100
Subject: [PATCH] Prettier file upload form

---
 front/src/components/library/import/FileUpload.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/front/src/components/library/import/FileUpload.vue b/front/src/components/library/import/FileUpload.vue
index 1b90adc9d..35338c656 100644
--- a/front/src/components/library/import/FileUpload.vue
+++ b/front/src/components/library/import/FileUpload.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div v-if="batch" class="ui two buttons">
+    <div v-if="batch" class="ui container">
       <file-upload-widget
-        class="ui icon button"
+        :class="['ui', 'icon', 'left', 'floated', 'button']"
         :post-action="uploadUrl"
         :multiple="true"
         :size="1024 * 1024 * 30"
@@ -19,16 +19,18 @@
         <i class="upload icon"></i>
         Select files to upload...
     </file-upload-widget>
-      <button class="ui icon teal button" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
+      <button
+        :class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
+        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
         <i class="play icon" aria-hidden="true"></i>
         Start Upload
       </button>
-      <button type="button" class="ui icon yellow button" v-else @click.prevent="$refs.upload.active = false">
+      <button type="button" class="ui right floated icon yellow button" v-else @click.prevent="$refs.upload.active = false">
         <i class="pause icon" aria-hidden="true"></i>
         Stop Upload
       </button>
     </div>
-    <div class="ui hidden divider"></div>
+    <div class="ui hidden clearing divider"></div>
     <p v-if="batch">
       Once all your files are uploaded, simply head over  <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">import detail page</router-link> to check the import status.
     </p>