From fc821be03fd220fe280af715f872ecbec118317f Mon Sep 17 00:00:00 2001
From: ellotheth <this@ello.tech>
Date: Thu, 17 Aug 2023 21:02:28 +0200
Subject: [PATCH] style an upload button for phones/tablets

---
 static/css/index.css      | 20 +++++++++++++++++++-
 static/js/index.js        |  2 ++
 templates/index.html.tera |  4 ++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/static/css/index.css b/static/css/index.css
index 3751b16..505b2d7 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -42,6 +42,24 @@ form.highlight {
     grid-row: 1/2;
 }
 
+.fileUpload {
+    margin-bottom: 1.5em;
+}
+.fileUpload label {
+    color: #83837b;
+    border: 1px solid #83837b;
+    border-radius: .3em;
+    padding: 1em;
+    display: block;
+    text-align: center;
+}
+
+@media (min-width: 992px) {
+    .fileUpload {
+        display: none;
+    }
+}
+
 textarea {
     height: 90%;
     width: 100%;
@@ -125,4 +143,4 @@ button[type="submit"]:hover {
 
 *.hidden {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/static/js/index.js b/static/js/index.js
index 8df8bda..ac71050 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,6 +1,7 @@
 const body = document.querySelector('body');
 const form = document.querySelector('form');
 const grid_form = document.querySelector('.grid_form');
+const fileInput = document.querySelector('.fileUpload');
 const upload_card = document.querySelector('#upload_card');
 const textarea = document.querySelector('textarea');
 const select = document.querySelector('select');
@@ -18,6 +19,7 @@ window.onload = () => {
 const onInput = () => {
     submitButton.classList.toggle('hidden', !textarea.value);
     select.classList.toggle('hidden', !textarea.value);
+    fileInput.classList.toggle('hidden', textarea.value);
 }
 textarea.addEventListener('input', onInput);
 onInput();
diff --git a/templates/index.html.tera b/templates/index.html.tera
index b2c1b51..7083c93 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -4,6 +4,10 @@
 <form action="/submit" method="post" ondrop="dropHandler(event)">
     <div class="grid_form">
         <div class="textareaBox">
+            <div class="fileUpload">
+                <input type="file" name="file-upload" id="file-upload" hidden />
+                <label for="file-upload">Upload a file</label>
+            </div>
             <textarea name="content" id="textarea_content" style="resize: none" placeholder="
 
 bin(3)                                BIN                               bin(3)