add back-arrow for imagenav

files/assets/css/main.css

@@ -7689,25 +7689,30 @@ thead {
 	min-width: 300px
 }
 
-#imgnav {
+.imgnav {
 	border: 4px solid transparent;
-	color: black;
+	color: black !important;
 	font-size: 35px;
 	background-color: #bbbbbb !important;
 	margin-left: -5px;
 	cursor: pointer;
-	text-decoration: none;
+	text-decoration: none !important;
 }
 
-#imgnav:hover {
+.imgnav:hover {
 	border: 4px solid var(--primary);
 }
 
 
 @media (max-width: 768px) {
-	#imgnav {
+	.imgnav {
 		position: absolute;
 		bottom: 0;
+	}
+	#imgnav-next {
 		left: 50%;
 	}
+	#imgnav-prev {
+		left: calc(50% - 122px);
+	}
 }

files/assets/js/bottom.js

@@ -172,16 +172,32 @@ const negative_awards = document.querySelectorAll("[data-positive=False]")
 
 let all_images
 let position
-let num_of_images
+let last_img_index
 
-const imgnav_btn = document.getElementById('imgnav')
+const imgnav_next = document.getElementById('imgnav-next')
+const imgnav_prev = document.getElementById('imgnav-prev')
 
 document.addEventListener('keydown', (e) => {
-	if (['ArrowRight', 'd'].includes(e.key)  && imgnav_btn && !imgnav_btn.classList.contains('d-none')) {
-		imgnav_btn.click()
+	if (['ArrowRight', 'd'].includes(e.key)  && imgnav_next && !imgnav_next.classList.contains('d-none')) {
+		imgnav_next.click()
+	}
+	else if (['ArrowLeft', 'a'].includes(e.key)  && imgnav_prev && !imgnav_prev.classList.contains('d-none')) {
+		imgnav_prev.click()
 	}
 })
 
+function handle_navigation(delta) {
+	position += delta
+	if (position < last_img_index) {
+		imgnav_next.classList.remove('d-none')
+		imgnav_next.href = all_images[position+1].dataset.src
+	}
+	if (position > 0) {
+		imgnav_prev.classList.remove('d-none')
+		imgnav_prev.href = all_images[position-1].dataset.src
+	}
+}
+
 document.addEventListener("click", function (e) {
 	let element = e.target
 	if (element.tagName == "I")
@@ -189,23 +205,21 @@ document.addEventListener("click", function (e) {
 
 	if (!element) return
 
-	if (element.id == 'imgnav') {
+	if (element == imgnav_next) {
 		expandImage(element.href)
-		position += 1
-		if (position < num_of_images) {
-			element.classList.remove('d-none')
-			element.href = all_images[position].dataset.src
-		}
+		handle_navigation(1)
+	}
+	else if (element == imgnav_prev) {
+		expandImage(element.href)
+		handle_navigation(-1)
 	}
 	else if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
 		expandImage()
 		all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
-		if (all_images.length > 1) {
-			num_of_images = all_images.length
-			imgnav_btn.classList.remove('d-none')
+		if (all_images.length != 0) {
+			last_img_index = all_images.length - 1
 			position = [].indexOf.call(all_images, element);
-			position += 1
-			imgnav_btn.href = all_images[position].dataset.src
+			handle_navigation(0)
 		}
 	}
 	else if (element.classList.contains('showmore')) {

files/assets/js/core.js

@@ -189,7 +189,8 @@ function formkey() {
 const expandImageModal = document.getElementById('expandImageModal')
 
 function expandImage(url) {
-	document.getElementById('imgnav').classList.add('d-none')
+	document.getElementById('imgnav-next').classList.add('d-none')
+	document.getElementById('imgnav-prev').classList.add('d-none')
 
 	const e = this.event
 	if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)

files/templates/modals/expanded_image.html

@@ -1,10 +1,11 @@
 <div class="modal" id="expandImageModal" tabindex="-1">
 	<div class="modal-dialog modal-dialog-centered">
+		<a id="imgnav-prev" class="imgnav fas fa-arrow-left px-5 py-3 px-md-4 py-md-5 d-none"></a>
 		<div class="modal-body text-center p-0">
 			<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
 				<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
 			</a>
 		</div>
-		<a id="imgnav" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
+		<a id="imgnav-next" class="imgnav fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
 	</div>
 </div>