From 1cb82838b210454ed7010f19806b2cf3475fd352 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Thu, 7 May 2026 19:48:57 +0200
Subject: [PATCH] Fix upload progress bar

---
 src/components/upload.vue    |  5 +++--
 src/styles/_page.upload.scss | 36 +++++++++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/upload.vue b/src/components/upload.vue
index 6cf7b67..38780a9 100644
--- a/src/components/upload.vue
+++ b/src/components/upload.vue
@@ -127,9 +127,10 @@ export default {
 			<input id="fileupload" type="file" name="files[]" multiple accept=".gif,.jpg,.jpeg,.png,.mov,.mp4" @change="onFileChange" />
 		</div>
 		<div class="section progress" v-if="progress > 0">
+			<div class="total"></div>
 			<div class="bar" :style="{width:progress+'%'}"></div>
 		</div>
-		<div class="section comment" v-for="file in files">
+		<div class="section comment" v-for="file in files" :key="file.id">
 			<img class="thumb" :src="file.thumbnail" />
 			<div class="form">
 				<input class="content" name="content" type="text" v-model="file.content" />
@@ -139,7 +140,7 @@ export default {
 		</div>
 		<div class="section location" v-if="project.editable">
 			<h2>{{ lang.get('upload.position.title') }}</h2>
-			<SpotButton :icon="'message'" :text="lang.get('upload.position.new')" @click="addPosition()" />
+			<SpotButton :icon="'marker'" :text="lang.get('upload.position.new')" @click="addPosition()" />
 		</div>
 		<div class="section logs" v-if="logs.length > 0">
 			<p class="log" v-for="log in logs">{{ log }}.</p>
diff --git a/src/styles/_page.upload.scss b/src/styles/_page.upload.scss
index e80f350..597d6e7 100644
--- a/src/styles/_page.upload.scss
+++ b/src/styles/_page.upload.scss
@@ -2,10 +2,10 @@
 @use "@styles/color";
 
 #upload {
-	padding: 1em;
+	padding: var.$block-spacing;
 
 	.section {
-		border-radius: 3px;
+		border-radius: var.$block-radius;
 
 		& + .section {
 			margin-top: var.$block-spacing;
@@ -17,36 +17,50 @@
 	}
 
 	.progress {
+		position: relative;
+		height: 1rem;
+
+		div {
+			position: absolute;
+			height: 100%;
+			border-radius: var.$block-radius;
+			top: 0;
+		}
+
 		.bar {
-			height: 18px;
 			background: color.$success;
+			
+		}
+		.total {
+			background: color.$default-bg;
+			width: 100%;
 		}
 	}
 
 	.comment {
 		.thumb {
 			width: 30%;
-			max-width: 100px;
+			max-width: 120px;
 		}
 		
 		.form {
 			display: inline-block;
-			width: calc(70% - 2rem);
-			min-width: calc(100% - 100px - 2rem);
-			padding: var.$block-spacing;
+			width: 70%;
+			min-width: calc(100% - 120px);
+			padding-left: var.$block-spacing;
 			vertical-align: top;
 			box-sizing: border-box;
 			
 			.content {
-				width: calc(100% - 2rem);
+				width: 100%;
 				box-sizing: border-box;
-				padding: 0.5em;
+				padding: var.$elem-spacing;
 				background: color.$default-bg;
 			}
 			
-			.save {
+			button.save {
 				margin-top: var.$block-spacing;
-				padding: 0.5em;
+				padding: var.$elem-spacing;
 			}
 		}
 	}