pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fade out progress bar on completed upload

Browse Source
This commit is contained in:
Wim Brand
2021-06-29 13:08:57 +02:00
parent 887f055d67
commit 3fd84f2b74
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/template/home.html
View File

@@ -71,8 +71,8 @@
</style> </style>
<script>window.api_endpoint = '{{.APIEndpoint}}';</script> <script>window.api_endpoint = '{{.APIEndpoint}}';</script>
<link rel='stylesheet' href='/res/svelte/home_page.css?v5'> <link rel='stylesheet' href='/res/svelte/home_page.css?v7'>
<script defer src='/res/svelte/home_page.js?v5'></script> <script defer src='/res/svelte/home_page.js?v7'></script>
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}

12
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -10,7 +10,7 @@ let start_time = 0
let remaining_time = 0 let remaining_time = 0
let stats_interval = null let stats_interval = null
let stats_interval_ms = 300 let stats_interval_ms = 250
let progress = 0 let progress = 0
let last_loaded_size = 0 let last_loaded_size = 0
let transfer_rate = 0 let transfer_rate = 0
@@ -55,6 +55,7 @@ const on_success = (resp) => {
file_button.style.background = 'var(--layer_3_color)' file_button.style.background = 'var(--layer_3_color)'
progress_bar.style.width = "100%" progress_bar.style.width = "100%"
progress_bar.style.opacity = "0"
} }
let error_id = "" let error_id = ""
@@ -247,13 +248,14 @@ const add_upload_history = id => {
.thumbnail { .thumbnail {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
width: 3.8em; width: 4em;
margin-right: 4px; margin-right: 4px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.thumbnail > img { .thumbnail > img {
width: 100%; width: 90%;
border-radius: 4px;
} }
.thumbnail > i { .thumbnail > i {
font-size: 3em; font-size: 3em;
@@ -291,7 +293,7 @@ const add_upload_history = id => {
background-color: var(--highlight_color); background-color: var(--highlight_color);
height: 100%; height: 100%;
width: 0; width: 0;
transition: width 0.3s; transition: width 0.25s, opacity 3s;
transition-timing-function: linear; transition-timing-function: linear, ease;
} }
</style> </style>