add title field to image modals

3 files changed, 77 insertions, 41 deletions

diff --git a/static/index.js b/static/index.js
index ea68d2b..ffc5532 100644
--- a/static/index.js
+++ b/static/index.js
@@ -156,6 +156,7 @@ window.addEventListener('load', () => {
 
 	const modal = document.getElementById('image-modal');
 	const modalImg = document.getElementById('modal-img');
+	const modalTitle = document.getElementById('modal-title');
 	const modalDesc = document.getElementById('modal-description');
 	const modalSave = document.getElementById('modal-save');
 	const modalClose = document.querySelector('.modal .close');
@@ -163,25 +164,31 @@ window.addEventListener('load', () => {
 
 	function showModal(img) {
 		currentModalImage = img;
+		document.body.style.overflow = 'hidden';
 		modal.style.display = 'flex';
 		modalImg.src = img.src;
+		modalTitle.value = img.dataset.title || '';
 		modalDesc.value = img.dataset.description || '';
 	}
 
 	modalClose.addEventListener('click', () => {
 		modal.style.display = 'none';
+		document.body.style.overflow = 'hidden';
 	});
 
 	modalSave.addEventListener('click', () => {
 		if (currentModalImage) {
+			currentModalImage.dataset.title = modalTitle.value;
 			currentModalImage.dataset.description = modalDesc.value;
 		}
 		modal.style.display = 'none';
+		document.body.style.overflow = 'hidden';
 	});
 
 	window.addEventListener('click', (evt) => {
 		if (evt.target == modal) {
 			modal.style.display = 'none';
+			document.body.style.overflow = 'hidden';
 		}
 	});
 
@@ -205,6 +212,13 @@ function create_img_with_src(src) {
 		dragged_image.classList.add("dragged");
 	});
 
+	img.addEventListener("mouseenter", (evt) => {
+        const title = evt.target.dataset.title;
+        if (title) {
+            evt.target.title = title;
+        }
+    });
+	
 	img.addEventListener("dragend", (evt) => {
 		if (dragged_image) {
 			dragged_image.classList.remove("dragged");
@@ -241,6 +255,7 @@ function save_tierlist(filename) {
 		row.querySelectorAll('img').forEach((img) => {
 			serialized_tierlist.rows[i].imgs.push({
 				src: img.src,
+				title: img.dataset.title || '',
 				description: img.dataset.description || ''
 			});
 		});
@@ -252,6 +267,7 @@ function save_tierlist(filename) {
 		untiered_imgs.forEach((img) => {
 			serialized_tierlist.untiered.push({
 				src: img.src,
+				title: img.dataset.title || '',
 				description: img.dataset.description || ''
 			});
 		});
@@ -268,6 +284,7 @@ function load_tierlist(serialized_tierlist) {
 
 		for (let img_obj of ser_row.imgs ?? []) {
 			let img = create_img_with_src(img_obj.src);
+			img.dataset.title = img_obj.title || '';
 			img.dataset.description = img_obj.description || '';
 			let td = document.createElement('span');
 			td.classList.add('item');
@@ -284,6 +301,7 @@ function load_tierlist(serialized_tierlist) {
 		let images = document.querySelector('.images');
 		for (let img_obj of serialized_tierlist.untiered) {
 			let img = create_img_with_src(img_obj.src);
+			img.dataset.title = img_obj.title || '';
 			img.dataset.description = img_obj.description || '';
 			images.appendChild(img);
 		}
diff --git a/static/styles.css b/static/styles.css
index 8166a32..994c882 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -258,55 +258,72 @@ img.draggable.dragged, .button:active {
 	justify-content: center;
 }
 
-.modal-content {
-	background-color: white;
-	padding: 30px;
-	border-radius: 10px;
-	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-	width: 90%;
-	max-width: 800px;
-	text-align: center;
-}
 
-.close {
-	color: #aaa;
-	float: right;
-	font-size: 28px;
-	font-weight: bold;
-	cursor: pointer;
+.modal-content {
+    background-color: #444;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
+    width: 90%;
+    max-width: 800px;
+    max-height: 90vh; 
+    text-align: center;
+    color: #ddd;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;  
 }
 
-.close:hover {
-	color: black;
+#modal-img {
+    max-width: 100%;
+    max-height: 40vh; 
+    object-fit: contain;
+    border-radius: 5px;
+    margin-bottom: 10px;
 }
 
-#modal-img {
-	max-width: 100%;
-	max-height: 40vh;
-	border-radius: 5px;
-	margin-bottom: 10px;
+#modal-title {
+    width: 80%;
+    padding: 8px 15px;
+    margin: 10px auto;
+    border: 1px solid #666;
+    border-radius: 5px;
+    font-size: 16px;
+    background-color: #333;
+    color: #ddd;
+    text-align: center;
 }
 
 #modal-description {
-	width: 100%;
-	height: 25vh;
-	padding: 10px;
-	margin-top: 10px;
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	font-size: 14px;
+    width: 80%;
+    height: 25vh;
+    padding: 12px 15px;
+    margin: 10px auto;
+    border: 1px solid #666;
+    border-radius: 5px;
+    font-size: 14px;
+    background-color: #333;
+    color: #ddd;
+    resize: vertical;
 }
 
-#modal-save {
-	background: #4CAF50;
-	color: white;
-	border: none;
-	padding: 10px 20px;
-	cursor: pointer;
-	margin-top: 10px;
-	border-radius: 5px;
+#modal-title:focus {
+    outline: none;
+    border-color: #4a4a4a;
+    background-color: #3a3a3a;
 }
 
-#modal-save:hover {
-	background: #45a049;
-}
+#modal-save {
+    background: #2c662f;
+    color: #ddd;
+    border: none;
+    padding: 12px 25px;
+    cursor: pointer;
+    margin-top: 15px;
+    border-radius: 5px;
+    font-size: 16px;
+    transition: background-color 0.2s ease;
+    align-self: center;
+    min-width: 120px;
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9790869..0e5cc84 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -59,8 +59,9 @@
     </div>
     <div id="image-modal" class="modal">
         <div class="modal-content">
-          <span class="close">&times;</span>
+          <span class="close"></span>
           <img id="modal-img" src="" alt="Image preview" />
+          <input id="modal-title" type="text" placeholder="Enter title here" />
           <textarea id="modal-description" placeholder="Enter description here"></textarea>
           <button id="modal-save">Save</button>
         </div>