Support paste/drop events

VoidCat/spa/src/Dropzone.css

@@ -1,9 +1,24 @@
 .drop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: 20px;
-    border: 1px solid;
-    margin-top: 20vh;
+    border: 2px dashed;
+    margin: 10vh 2px 2px;
     text-align: center;
-    line-height: 300px;
     user-select: none;
     cursor: pointer;
+    height: 200px;
+    font-size: x-large;
+}
+
+.drop small {
+    display: block;
+    font-size: x-small;
+}
+
+@media (max-width: 720px) {
+    .drop {
+        width: 100%;
+    }
 }

VoidCat/spa/src/Dropzone.js

@@ -1,4 +1,4 @@
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import {FileUpload} from "./FileUpload";
 
 import "./Dropzone.css";
@@ -16,6 +16,16 @@ export function Dropzone(props) {
         i.click();
     }
 
+    function dropFiles(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if ("dataTransfer" in e && e.dataTransfer.files.length > 0) {
+            setFiles(e.dataTransfer.files);
+        } else if ("clipboardData" in e && e.clipboardData.files.length > 0) {
+            setFiles(e.clipboardData.files);
+        }
+    }
+
     function renderUploads() {
         let fElm = [];
         for (let f of files) {
@@ -31,10 +41,19 @@ export function Dropzone(props) {
     function renderDrop() {
         return (
             <div className="drop" onClick={selectFiles}>
-                <h3>Drop files here!</h3>
+                <div>
+                    Click me!
+                    <small>Or drop files here</small>
+                </div>
             </div>
         );
     }
 
+    useEffect(() => {
+        document.addEventListener("paste", dropFiles);
+        document.addEventListener("drop", dropFiles);
+        document.addEventListener("dragover", dropFiles);
+    }, []);
+
     return files.length === 0 ? renderDrop() : renderUploads();
 }

VoidCat/spa/src/GlobalStats.css

@@ -11,4 +11,15 @@
 }
 
 .stats > div {
+}
+
+@media (max-width: 720px) {
+    .stats {
+        margin: 0 10px;
+        font-size: 14px;
+    }
+    .stats svg {
+        height: 16px;
+        width: 16px;
+    }
 }

VoidCat/spa/src/HomePage.css

@@ -2,4 +2,11 @@
     width: 720px;
     margin-left: auto;
     margin-right: auto;
+}
+
+@media (max-width: 720px) {
+    .home {
+        width: 100vw;
+        white-space: nowrap;
+    }
 }