From 76ce6f4072849b1684f34d7b8035f0a786ad6434 Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Fri, 2 Aug 2019 16:25:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20=E2=80=94=20Modify=20UI?=
 =?UTF-8?q?=20for=20zip=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/default/public/js/lufi-up.js    |  4 ++
 themes/default/templates/index.html.ep | 52 +++++++++++++-------------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/themes/default/public/js/lufi-up.js b/themes/default/public/js/lufi-up.js
index 2a80186..42a6352 100644
--- a/themes/default/public/js/lufi-up.js
+++ b/themes/default/public/js/lufi-up.js
@@ -110,6 +110,7 @@ function zipClicking () {
         $('#zipname').val('documents.zip');
         $('#zipname-input').addClass('hide');
         $('#zipping').addClass('hide');
+        $('#files').removeClass('m6').addClass('m12');
         $('#zip-parts').html('');
         $('#delete-day').attr('disabled', null);
         $('#first-view').attr('disabled', null);
@@ -160,6 +161,7 @@ function uploadZip(e) {
             if (!$('#zipping').hasClass('hide')) {
                 window.zip = null;
                 $('#zipping').addClass('hide');
+                $('#files').removeClass('m6').addClass('m12');
                 $('#zipname-input').addClass('hide');
                 $('#zip-compressing').addClass('hide');
                 $('#uploadZip').removeClass('hide');
@@ -230,6 +232,7 @@ function handleFiles(f) {
             window.zip = new JSZip();
         }
         $('#zipping').removeClass('hide');
+        $('#files').removeClass('m12').addClass('m6');
         for (var i = 0; i < f.length; i++) {
             var element  = f.item(i);
             var filename = element.name;
@@ -699,5 +702,6 @@ $(document).ready(function() {
         $('#zip-compressing').addClass('hide');
         $('#file-browser-button').attr('disabled', null);
         $('#file-browser-span').removeClass('disabled');
+        $('#files').removeClass('m6').addClass('m12');
     });
 });
diff --git a/themes/default/templates/index.html.ep b/themes/default/templates/index.html.ep
index 4f9a967..8381872 100644
--- a/themes/default/templates/index.html.ep
+++ b/themes/default/templates/index.html.ep
@@ -117,32 +117,34 @@
             </div>
         </div>
     </form>
-    <div id="files">
-        <h2><%= l('Drop files here') %></h2>
-        <p id="max-file-size"></p>
-        <p><small><%= l('or') %></small></p>
-        <label>
-            <span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
-            <input type="file" id="file-browser-button" multiple disabled>
-        </label>
-    </div>
-    <div id="zipping" class="hide">
-        <div class="card">
-            <div>
-                <a href="#" id="reset-zipping">
-                    <i class="right mdi-navigation-close small"></i>
-                </a>
-                <div class="card-content">
-                    <span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
-                    <p id="zip-compressing" class="hide">
-                        <button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
-                        <%= l('Compressing zip file…') %>
-                    </p>
-                    <div class="col s12 m6 text-left input-field right">
-                        <a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
+    <div class="row">
+        <div id="files" class="col s12 m12">
+            <h2><%= l('Drop files here') %></h2>
+            <p id="max-file-size"></p>
+            <p><small><%= l('or') %></small></p>
+            <label>
+                <span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
+                <input type="file" id="file-browser-button" multiple disabled>
+            </label>
+        </div>
+        <div id="zipping" class="col s12 m6 hide">
+            <div class="card">
+                <div>
+                    <a href="#" id="reset-zipping">
+                        <i class="right mdi-navigation-close small"></i>
+                    </a>
+                    <div class="card-content">
+                        <span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
+                        <p id="zip-compressing" class="hide">
+                            <button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
+                            <%= l('Compressing zip file…') %>
+                        </p>
+                        <ul id="zip-parts">
+                        </ul>
+                        <div class="right-align">
+                            <a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
+                        </div>
                     </div>
-                    <ul id="zip-parts">
-                    </ul>
                 </div>
             </div>
         </div>