Dynamically move the toolbar into the large free space above depending on screen size

app/index.html

@@ -76,11 +76,13 @@
             <h3 class="w300">Import manager</h3>
             <p>Import your notes from your device</p>
             <div class="section"></div>
-            <form><input type="file" id="importFile" style="border: 0;"></form>
+            <button onclick="uploadThing.click()" id="importFile">Browse</button>
+            <button id="importFileConfirm">Upload</button>
         </div>
         <div id="errorDiv" class="optionsDiv hidden">
             <p id="errorMessageThing"></p>
             <input class="hidden" id="errorInput" type="text" placeholder=""><br>
+            <button style="margin-bottom: 5px;" class="normalButton hidden" id="browseButton" onclick="uploadThing.click()">Browse</button>
             <button class="normalButton" id="closeErrorButton">Ok</button>
             <button class="normalButton hidden" id="cancelErrorButton">Cancel</button>
         </div>
@@ -89,6 +91,7 @@
     <div class="noteBox" id="noteBoxDiv">
         <div id="noteBox" class="noteBoxText"></div>
     </div>
+    <input type="file" id="uploadThing" class="hidden"> <!-- This is only ever .click()'d so it doesn't need to be styled -->
 
     <script>
         for (let i = 0; i < 40; i++) {
@@ -96,7 +99,7 @@
         }
         loadingStuff.remove()
     </script>
-    <script src="https://unpkg.com/pell"></script>
+    <script src="/static/js/pell.js"></script>
     <script type="text/javascript" src="/static/js/main.js"></script>
 </body>
 

static/css/style.css

@@ -163,13 +163,14 @@ body {
     width: calc(100% - 181px);
     height: 50px;
 
-    background-color: var(--editor);
 
     border: none;
     border-color: var(--border-color);
     border-width: 0;
     border-bottom-width: 1px;
     display: flex;
+    background-color: var(--editor);
+    z-index: -1;
 }
 
 .burgerDropdown {
@@ -427,6 +428,14 @@ body {
   display: flex;
   margin-bottom: 5px;
   overflow-x: auto;
+  position: fixed;
+  top: 8px;
+}
+
+@media only screen and (max-width: 860px) {
+    .pell-actionbar {
+        position: inherit;
+    }
 }
 
 .noteBox:focus {

static/js/main.js

@@ -28,6 +28,8 @@ let usernameBox = document.getElementById("usernameBox")
 let optionsCoverDiv = document.getElementById("optionsCoverDiv")
 let optionsDiv = document.getElementById("optionsDiv")
 let errorDiv = document.getElementById("errorDiv")
+let uploadThing = document.getElementById("uploadThing")
+let browseButton = document.getElementById("browseButton")
 let errorMessageThing = document.getElementById("errorMessageThing")
 let closeErrorButton = document.getElementById("closeErrorButton")
 let cancelErrorButton = document.getElementById("cancelErrorButton")
@@ -60,6 +62,7 @@ let textMinusBox = document.getElementById('textMinusBox');
 let wordCountBox = document.getElementById('wordCountBox');
 let removeBox = document.getElementById("removeBox")
 let importFile = document.getElementById("importFile")
+let importFileConfirm = document.getElementById("importFileConfirm")
 
 let selectedNote = 0
 let timer
@@ -128,15 +131,15 @@ document.addEventListener("DOMContentLoaded", function() {
                 title: 'Upload image',
                 result: function result() {
                     async function doStuff() {
-                        errorInput.classList.remove("hidden")
-                        errorInput.type = "file"
-                        errorInput.value = ""
+                        browseButton.classList.remove("hidden")
                         displayError("Select an image to upload:")
                         await waitForConfirm()
-                        let file = errorInput.files[0]
+                        browseButton.classList.add("hidden")
+                        let file = uploadThing.files[0]
                         if (file) {
                             let reader = new FileReader()
                             reader.readAsDataURL(file)
+                            uploadThing.files = null
                             reader.onload = function () {
                                 pell.exec('insertImage', reader.result);
                             }
@@ -860,7 +863,7 @@ document.addEventListener("DOMContentLoaded", function() {
         displayError("Exported notes!")
     });
 
-    importFile.addEventListener('change', function () {
+    importFileConfirm.addEventListener('click', function () {
         let fileread = new FileReader()
         fileread.addEventListener(
             "load",
@@ -883,7 +886,7 @@ document.addEventListener("DOMContentLoaded", function() {
             false,
         );
 
-        fileread.readAsText(importFile.files[0])
+        fileread.readAsText(uploadThing.files[0])
     })
 
     removeBox.addEventListener("click", () => {