From 9bd17d2beaed31d4dd532a5fe49bfce66beefe10 Mon Sep 17 00:00:00 2001
From: Ryan Tam <ryantam626@gmail.com>
Date: Fri, 14 Jul 2023 09:51:00 +0100
Subject: [PATCH] Move file upload section down

This is not the most important input method, and as such shouldn't be on
top, this should be viewable on most browser by default even at the
bottom.

Also add a `margin-bottom` to `paste-submit` for spacing consistency,
since the upload section is below the paste submit section, without
this, the two sections will look like they are merged into one.
---
 src/pinnwand/static/pinnwand.css  | 4 +++-
 src/pinnwand/template/create.html | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pinnwand/static/pinnwand.css b/src/pinnwand/static/pinnwand.css
index e0313b2..bd966e3 100644
--- a/src/pinnwand/static/pinnwand.css
+++ b/src/pinnwand/static/pinnwand.css
@@ -139,7 +139,9 @@ section.file-part div.file-meta {
 
 section.paste-submit {
   background-color: var(--color1);
-  padding: .5rem; }
+  padding: .5rem;
+  margin-bottom: .5rem;
+}
 
 div.file-meta button,
 section.paste-submit button {
diff --git a/src/pinnwand/template/create.html b/src/pinnwand/template/create.html
index f326a2c..49b33e3 100644
--- a/src/pinnwand/template/create.html
+++ b/src/pinnwand/template/create.html
@@ -8,10 +8,6 @@
             {% raw handler.application.configuration.paste_help %}
         </section>
         {% end %}
-        <section class="file-drop" id="file-drop">
-            Drop files&nbsp;<a id="file-upload" class="file-upload" onclick="document.getElementById('file-input').click();">or click here</a>&nbsp;to upload files
-            <input id="file-input" type="file" name="file-input" style="display: none;" multiple/>
-        </section>
         <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
         {% if message %}
         <div class="quick"><p>{{ message }}</p></div>
@@ -49,6 +45,10 @@
             </select>
             <input type="checkbox" name="long"> Use a longer URI
         </section>
+        <section class="file-drop" id="file-drop">
+            Drop files&nbsp;<a id="file-upload" class="file-upload" onclick="document.getElementById('file-input').click();">or click here</a>&nbsp;to upload files
+            <input id="file-input" type="file" name="file-input" style="display: none;" multiple/>
+        </section>
     </main>
 </form>
 <section class="file-template">