From ba86ba12732b3290eaa74936950a370966b41ac5 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Thu, 16 Apr 2026 02:22:56 +1000
Subject: v0.10a

---
 Pages/ViewMedia.razor | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

(limited to 'Pages/ViewMedia.razor')

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index 27a366c..46cbc45 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -14,23 +14,34 @@
         document.getElementById("hcontainer").classList.toggle("hide-metadata");
     }
 
-	function showSidebar(visible) {
-		document.getElementById("hcontainer").classList.toggle("hide-metadata", !visible)
+	function setMobilePane(pane) {
+		var panes = Array.from(document.querySelectorAll('[class^="mobile-pane-"]'));
+
+		panes.forEach(e => e.classList.remove('visible'));
+		panes
+			.filter(e => e.classList.contains(`mobile-pane-${pane}`))
+			.forEach(e => e.classList.add('visible'));
+	}
+
+	function pageKeyDownHandler(e) {
+		if(!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !e.isComposing)
+			if(e.key == 's')
+				toggleSidebar();
 	}
 </script>
 
 <div id="vcontainer">
-	<div id="hcontainer" class="hide-metadata">
-		<div id="image-container">
+	<div id="hcontainer">
+		<div id="image-container" class="mobile-pane-image visible">
 			<img
 				src="/media/@(media.Guid)"
 				width=@media.CurrentUploadedFile.Width
 				height=@media.CurrentUploadedFile.Height/>
 		</div>
 		<div id="metadata-show-button">
-			<a href="javascript:toggleSidebar();"></a>
+			<a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a>
 		</div>
-		<div id="metadata">
+		<div id="metadata" class="mobile-pane-metadata">
 			<div id="metadata-container">
 				<div id="metadata-fileinfo">
 					@if(infoEditMode) {
@@ -143,8 +154,8 @@
 		</div>
 	</div>
 	<div id="bottom-bar">
-		<img onclick="showSidebar(false);" src="/images/photo.svg" width="25" height="25"/>
-		<img onclick="showSidebar(true);" src="/images/info.svg" width="25" height="25"/>
+		<img onclick="setMobilePane('image');" src="/images/photo.svg" width="25" height="25"/>
+		<img onclick="setMobilePane('metadata');" src="/images/info.svg" width="25" height="25"/>
 	</div>
 </div>
 
-- 
cgit v1.3