Tweak various progress bars

Fixes #5

res/include/style/layout.css

@@ -394,11 +394,6 @@ pre {
 	background: var(--input_hover_background);
 }
 
-.file_button_selected {
-	box-shadow: 0 0 2px 2px var(--highlight_color);
-	text-decoration: none;
-}
-
 .file_button>img {
 	max-height: 100%;
 	max-width: 25%;

svelte/src/file_viewer/ListNavigator.svelte

@@ -82,7 +82,7 @@ export const set_item = idx => {
 				href="#item={index}"
 				title="Open {file.name}"
 				class="list_item file_button"
-				class:file_button_selected={file.selected}>
+				class:file_selected={file.selected}>
 				<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
 				{file.name}
 			</a>
@@ -119,4 +119,9 @@ export const set_item = idx => {
 	overflow-y: hidden;
 	white-space: nowrap;
 }
+
+.file_selected {
+	box-shadow: 0 0 2px 2px var(--highlight_color);
+	text-decoration: none;
+}
 </style>

svelte/src/home_page/UploadProgressBar.svelte

@@ -288,7 +288,7 @@ export const start = () => {
 }
 .progress {
 	flex: 0 0 auto;
-	height: 2px;
+	height: 3px;
 }
 .progress_bar {
 	background: var(--highlight_background);

svelte/src/home_page/UploadWidget.svelte

@@ -9,6 +9,7 @@ import Tumblr from "../icons/Tumblr.svelte"
 import { formatDataVolume, formatDuration } from "../util/Formatting.svelte";
 import StorageProgressBar from "../user_home/StorageProgressBar.svelte"
 import Konami from "../util/Konami.svelte"
+import ProgressBar from "../util/ProgressBar.svelte"
 
 // === UPLOAD LOGIC ===
 
@@ -113,7 +114,6 @@ const finish_upload = (file) => {
 
 let stats_interval = null
 let stats_interval_ms = 500
-let progress_bar_inner
 let start_time = 0
 let total_progress = 0
 let total_size = 0
@@ -147,7 +147,6 @@ const stats_update = () => {
 	)
 	last_total_loaded = total_loaded
 
-	progress_bar_inner.style.width = (total_progress * 100) + "%"
 	document.title = (total_progress*100).toFixed(0) + "% ~ " +
 		formatDuration(remaining_time, 0) +
 		" ~ uploading to pixeldrain"
@@ -156,7 +155,6 @@ const stats_finished = () => {
 	start_time = 0
 	total_loaded = total_size
 	total_progress = 1
-	progress_bar_inner.style.width = "100%"
 	total_rate = 0
 
 	document.title = "Finished! ~ pixeldrain"
@@ -435,10 +433,9 @@ const keydown = (e) => {
 			<div>ETA {formatDuration(remaining_time, 0)}</div>
 			<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
 		</div>
+
+		<ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
 	</section>
-	<div class="progress_bar_outer">
-		<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
-	</div>
 
 	<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
 		Gimme gimme gimme!<br/>
@@ -572,7 +569,6 @@ const keydown = (e) => {
 }
 .instruction {
 	border-top: 1px solid var(--separator);
-	border-bottom: 1px solid var(--separator);
 	margin: 1.5em 0;
 	padding: 5px;
 }
@@ -609,17 +605,6 @@ const keydown = (e) => {
 		grid-template-columns: 50% 50%;
 	}
 }
-.progress_bar_outer {
-	width: 100%;
-	height: 3px;
-}
-.progress_bar_inner {
-	background: var(--highlight_background);
-	height: 100%;
-	width: 0;
-	transition: width 0.5s;
-	transition-timing-function: linear;
-}
 
 .album_name_form {
 	display: inline-flex;

svelte/src/user_home/SharingSettings.svelte

@@ -1,6 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import FilePicker from "../file_viewer/FilePicker.svelte";
+import CustomBanner from "../file_viewer/CustomBanner.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
 import SuccessMessage from "../util/SuccessMessage.svelte";
 import ThemePicker from "../util/ThemePicker.svelte";
@@ -181,13 +182,7 @@ onMount(() => {
 
 	{#if header_image}
 		<div class="highlight_shaded">
-			{#if header_link}
-				<a href={header_link} target="_blank">
-					<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
-				</a>
-			{:else}
-				<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
-			{/if}
+			<CustomBanner src={"/api/file/"+header_image} link={header_link}></CustomBanner>
 		</div>
 	{/if}
 
@@ -233,13 +228,7 @@ onMount(() => {
 	</form>
 	{#if footer_image}
 		<div class="highlight_shaded">
-			{#if footer_link}
-				<a href={footer_link} target="_blank">
-					<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
-				</a>
-			{:else}
-				<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
-			{/if}
+			<CustomBanner src={"/api/file/"+footer_image} link={footer_link}></CustomBanner>
 		</div>
 	{/if}
 	<br/>
@@ -268,12 +257,6 @@ onMount(() => {
 />
 
 <style>
-.banner_preview {
-	max-height: 90px;
-	max-width: 100%;
-	display: block;
-	margin: auto;
-}
 .background_preview {
 	max-height: 200px;
 	max-width: 100%;

svelte/src/util/ProgressBar.svelte

@@ -1,6 +1,8 @@
 <script>
 export let total = 0
 export let used = 0
+export let animation = "ease"
+export let speed = 1000
 let percent = 0
 $: {
 	// Avoid division by 0
@@ -18,7 +20,7 @@ $: {
 </script>
 
 <div class="progress_bar_outer">
-	<div class="progress_bar_inner" style="width: {percent}%;"></div>
+	<div class="progress_bar_inner" style="width: {percent}%; transition-timing-function: {animation}; transition-duration: {speed}ms;"></div>
 </div>
 
 <style>
@@ -26,13 +28,16 @@ $: {
 	display: block;
 	background: var(--background_color);
 	width: 100%;
-	height: 3px;
+	height: 6px;
+	border-radius: 6px;
+	overflow: hidden;
 	margin: 6px 0 12px 0;
 }
 .progress_bar_inner {
 	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
-	transition: width 1s;
+	border-radius: 6px;
+	transition-property: width;
 }
 </style>