From c1bb144982813ba0391bfb13495cb6ee056cd425 Mon Sep 17 00:00:00 2001
From: James Tai <jtai@jtai.ca>
Date: Mon, 2 Sep 2019 18:07:15 -0700
Subject: [PATCH] Move file upload options above drop zone

This moves the 'randomize filename' checkbox and 'file expiry' menu
above the drop zone, so that the user is encouraged to tweak those
options before choosing the file to upload. Fixes
andreimarcu/linx-server#187.
---
 static/css/linx.css  |  2 +-
 templates/index.html | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/static/css/linx.css b/static/css/linx.css
index 15abee4..8d82c8c 100644
--- a/static/css/linx.css
+++ b/static/css/linx.css
@@ -251,7 +251,7 @@ body {
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
-  margin-top: 5px;
+  margin-bottom: 5px;
   font-size: 13px;
 }
 
diff --git a/templates/index.html b/templates/index.html
index 2843109..11ebc7e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,15 +7,6 @@
 {% block content %} 
 <div id="fileupload">
     <form action="{{ sitepath }}upload" class="dropzone" id="dropzone" method="POST" enctype="multipart/form-data" data-maxsize="{{ maxsize }}">
-        <div class="fallback">
-            <input id="fileinput" name="file" type="file" /><br />
-            <input id="submitbtn" type="submit" value="Upload">
-        </div>
-
-        <div id="dzone" class="dz-default dz-message">
-            <span>Click or Drop file(s) or Paste image</span>
-        </div>
-
         <div id="choices">
             <label>{% if not forcerandom %}<input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename{% endif %}</label>
             <div id="expiry">
@@ -28,6 +19,16 @@
                 </label>
             </div>
         </div>
+
+        <div class="fallback">
+            <input id="fileinput" name="file" type="file" /><br />
+            <input id="submitbtn" type="submit" value="Upload">
+        </div>
+
+        <div id="dzone" class="dz-default dz-message">
+            <span>Click or Drop file(s) or Paste image</span>
+        </div>
+
         <div class="clear"></div>
     </form>
     <div id="uploads"></div>