From c002c0b56b48442db58b4b994c431aa758728210 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 19:32:38 +0100
Subject: [PATCH] Improved upload API
---
assets/js/page_upload.js | 8 +++++
assets/sass/_page_upload.sass | 55 ++++++++++++++++++++++++++++++++++-
2 files changed, 62 insertions(+), 1 deletion(-)
diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js
index 6ceda72..67da37a 100644
--- a/assets/js/page_upload.js
+++ b/assets/js/page_upload.js
@@ -30,6 +30,14 @@ element.addEventListener("change", () => {
image_title.placeholder = "Description";
image_container.appendChild(image_title);
+ const image_progress = document.createElement("div");
+ image_progress.classList.add("progress");
+
+ const image_progress_indeterminate = document.createElement("div");
+ image_progress_indeterminate.classList.add("indeterminate");
+
+ image_progress.appendChild(image_progress_indeterminate);
+
const image_link = document.createElement("a");
image_link.classList.add("image");
const image = document.createElement("img");
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
index fa37abd..d0261c6 100644
--- a/assets/sass/_page_upload.sass
+++ b/assets/sass/_page_upload.sass
@@ -147,6 +147,37 @@
& + .image
border-top-left-radius: 4px
border-top-right-radius: 4px
+ .progress
+ position: absolute
+ height: 4px
+ display: block
+ background-color: rgba(255, 193, 7, 0.2)
+ overflow: hidden
+ transition: opacity 400ms
+ bottom: 0
+ left: 0
+ right: 0
+ .indeterminate
+ background-color: rgba(255, 193, 7, 0.8)
+ &::before
+ content: ''
+ position: absolute
+ background-color: inherit
+ top: 0
+ left: 0
+ bottom: 0
+ will-change: left, right
+ animation: indeterminate 4.2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
+ &::after
+ content: ''
+ position: absolute
+ background-color: inherit
+ top: 0
+ left: 0
+ bottom: 0
+ will-change: left, right
+ animation: indeterminate-short 4.2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
+ animation-delay: 2.25s
.image
background: #000
display: flex
@@ -177,4 +208,26 @@
&.submitted .container.centered
display: none
&:not(.submitted) .uploading.images
- display: none
\ No newline at end of file
+ display: none
+
+@keyframes indeterminate
+ 0%
+ left: -35%
+ right: 100%
+ 60%
+ left: 100%
+ right: -90%
+ 100%
+ left: 100%
+ right: -90%
+
+@keyframes indeterminate-short
+ 0%
+ left: -200%
+ right: 100%
+ 60%
+ left: 107%
+ right: -8%
+ 100%
+ left: 107%
+ right: -8%
\ No newline at end of file
--
GitLab