From 98192c7b005425a1d6b7a73064b5240e765e8a75 Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Sun, 11 Sep 2022 08:33:36 +0200
Subject: [PATCH] add white border to images in /sumbit

---
 files/templates/submit_hats.html    | 14 ++++++++++----
 files/templates/submit_marseys.html | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/files/templates/submit_hats.html b/files/templates/submit_hats.html
index f93e4912d..d4131565e 100644
--- a/files/templates/submit_hats.html
+++ b/files/templates/submit_hats.html
@@ -41,7 +41,7 @@
 							<div id="image-upload-block">
 								<div><label class="mt-3">Image</label></div>
 
-								<img loading="lazy" id="image-preview" style="max-width:50%">
+								<img loading="lazy" id="image-preview" class="d-none" style="max-width:50%;border:5px white solid">
 								<label class="btn btn-secondary m-0" for="file-upload">
 									<div id="filename-show">Select Image</div>
 									<input autocomplete="off" id="file-upload" accept="image/*" type="file" name="image" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} hidden>
@@ -88,7 +88,10 @@
 				{
 					var fileReader = new FileReader();
 					fileReader.readAsDataURL(f.files[0]);
-					fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
+					fileReader.addEventListener("load", function () {
+						document.getElementById('image-preview').setAttribute('src', this.result);
+						document.getElementById('image-preview').classList.remove('d-none');
+					});
 				}
 				document.getElementById('file-upload').setAttribute('required', 'false');
 			}
@@ -102,7 +105,10 @@
 			{
 				var fileReader = new FileReader();
 				fileReader.readAsDataURL(f.files[0]);
-				fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
+				fileReader.addEventListener("load", function () {
+					document.getElementById('image-preview').setAttribute('src', this.result);
+					document.getElementById('image-preview').classList.remove('d-none');
+				});
 				document.getElementById('submit-hat').disabled = false;
 			}
 		})
@@ -140,7 +146,7 @@
 								<input type="hidden" name="formkey" value="{{v.formkey}}">
 		
 								<div><label class="mt-3">Image</label></div>
-								<img loading="lazy" src="/asset_submissions/hats/{{hat.name}}.webp" style="max-width:50%">
+								<img loading="lazy" src="/asset_submissions/hats/{{hat.name}}.webp" style="max-width:50%;border:5px white solid">
 
 								<div><label class="mt-3" for="{{hat.name}}-submitter">Submitter</label></div>
 								<input autocomplete="off" type="text" id="{{hat.name}}-submitter" class="form-control" maxlength="30" value="{{hat.submitter.username}}" readonly>
diff --git a/files/templates/submit_marseys.html b/files/templates/submit_marseys.html
index 0a734f517..d1d0e6f1a 100644
--- a/files/templates/submit_marseys.html
+++ b/files/templates/submit_marseys.html
@@ -47,7 +47,7 @@
 							<div id="image-upload-block">
 								<div><label class="mt-3">Image</label></div>
 
-								<img loading="lazy" id="image-preview" style="max-width:50%">
+								<img loading="lazy" id="image-preview" class="d-none" style="max-width:50%;border:5px white solid">
 								<label class="btn btn-secondary m-0" for="file-upload">
 									<div id="filename-show">Select Image</div>
 									<input autocomplete="off" id="file-upload" accept="image/*" type="file" name="image" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} hidden>
@@ -90,7 +90,10 @@
 				{
 					var fileReader = new FileReader();
 					fileReader.readAsDataURL(f.files[0]);
-					fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
+					fileReader.addEventListener("load", function () {
+						document.getElementById('image-preview').setAttribute('src', this.result);
+						document.getElementById('image-preview').classList.remove('d-none');
+					});
 				}
 				document.getElementById('file-upload').setAttribute('required', 'false');
 			}
@@ -104,7 +107,10 @@
 			{
 				var fileReader = new FileReader();
 				fileReader.readAsDataURL(f.files[0]);
-				fileReader.addEventListener("load", function () {document.getElementById('image-preview').setAttribute('src', this.result);});
+				fileReader.addEventListener("load", function () {
+					document.getElementById('image-preview').setAttribute('src', this.result);
+					document.getElementById('image-preview').classList.remove('d-none');
+				});
 				document.getElementById('submit-marsey').disabled = false;
 			}
 		})
@@ -141,7 +147,7 @@
 								<input type="hidden" name="formkey" value="{{v.formkey}}">
 		
 								<div><label class="mt-3">Image</label></div>
-								<img loading="lazy" src="/asset_submissions/marseys/{{marsey.name}}.webp" style="max-width:50%">
+								<img loading="lazy" src="/asset_submissions/marseys/{{marsey.name}}.webp" style="max-width:50%;border:5px white solid">
 		
 								<div><label class="mt-3" for="{{marsey.name}}-submitter">Submitter</label></div>
 								<input autocomplete="off" type="text" id="{{marsey.name}}-submitter" class="form-control" maxlength="30" value="{{marsey.submitter}}" readonly>