Commit c002c0b5 authored by Janne Koschinski's avatar Janne Koschinski

Improved upload API

parent 989c407b
......@@ -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");
......
......@@ -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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment