From a2acde3e6bd27f7cc82e6e9537c444c0ef18a7ee Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 02:53:32 +0100
Subject: [PATCH] Minor UI improvements
---
assets/sass/style.sass | 23 +++++++++++++++++++++++
templates/upload.html | 15 ++++++++++++---
2 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index 2bd2336..6a08452 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -96,6 +96,29 @@ form.upload
text-align: center
background: #333333
+ &:not(.submitted)
+ .upload-label
+ display: none
+ .submitted
+ label, input
+ display: none
+
+ label
+ display: inline-block
+ background: #FFC107
+ padding: 4px 16px
+ border-radius: 2px
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1)
+ line-height: 24px
+ color: #282828
+ cursor: pointer
+ &:hover,&:focus
+ background: #FFD54F
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+
+ input
+ display: none
+
.images
display: flex
max-width: 1024px
diff --git a/templates/upload.html b/templates/upload.html
index a77e5f7..ae4cd6a 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -20,9 +20,18 @@
{{end}}
{{end}}
<form class="upload" action="/upload/" method="POST" enctype="multipart/form-data">
- <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov"
- multiple/><br>
- <input type="submit"/>
+ <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/>
+ <label for="file">Select Files</label>
+ <input type="submit" value="Upload"/>
+ <p class="upload-label">Uploading…</p>
</form>
</div>
+<script>
+ const form = document.querySelector("form.upload");
+ const element = document.querySelector("form.upload input[type=file]");
+ element.addEventListener("change", () => {
+ form.submit();
+ form.classList.add("submitted");
+ })
+</script>
{{end}}
\ No newline at end of file
--
GitLab