From 720856bb353ab66a773e0a438d8af7f0a2188641 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Sun, 12 Apr 2026 17:41:11 +1000
Subject: v0.8a

---
 Pages/Component/ButtonContainer.razor.css |  6 +++++
 Pages/ViewMedia.razor                     | 44 ++++++++++++++++++++++++-------
 Pages/ViewMedia.razor.css                 | 14 +++++-----
 Pages/_Host.cshtml                        |  2 +-
 4 files changed, 47 insertions(+), 19 deletions(-)

(limited to 'Pages')

diff --git a/Pages/Component/ButtonContainer.razor.css b/Pages/Component/ButtonContainer.razor.css
index 6de94c7..c2d5d25 100644
--- a/Pages/Component/ButtonContainer.razor.css
+++ b/Pages/Component/ButtonContainer.razor.css
@@ -2,3 +2,9 @@
     display:         flex;
     justify-content: flex-end;
 }
+
+@media (hover: none) and (pointer: coarse) {
+    div {
+        justify-content: center;
+    }
+}
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index c6ff2ce..27a366c 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -100,27 +100,51 @@
 			</div>
 			<div id="button-container">
 				<ButtonContainer>
-					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d"><u>D</u>elete</button>
-					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button>
-					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</button>
+					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">
+						<img src="/images/trash.svg"/>
+						<p><u>D</u>elete</p>
+					</button>
+					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">
+						<img src="/images/tag.svg"/>
+						<p>Add <u>T</u>ag</p>
+					</button>
+					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">
+						<img src="/images/book.svg"/>
+						<p>View <u>O</u>CR</p>
+					</button>
 					@if(infoEditMode) {
-						<button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button>
-						<button @onclick=@(() => ApplyInfoEdit(true))>Apply</button>
+						<button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">
+							<img src="/images/cross.svg"/>
+							<p>Cancel</p>
+						</button>
+						<button @onclick=@(() => ApplyInfoEdit(true))>
+							<img src="/images/checkmark.svg"/>
+							<p>Apply</p>
+						</button>
 					} else {
-						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e"><u>E</u>dit Info</button>
+						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">
+							<img src="/images/edit.svg"/>
+							<p><u>E</u>dit Info</p>
+						</button>
 					}
 					@if(media.IsIngest) {
-						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button>
+						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">
+							<img src="/images/checkmark.svg"/>
+							<p>Mark Tagging <u>C</u>omplete</p>
+						</button>
 					} else {
-						<button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button>
+						<button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">
+							<img src="/images/cross.svg"/>
+							<p>Mark Tagging In<u>c</u>omplete</p>
+						</button>
 					}
 				</ButtonContainer>
 			</div>
 		</div>
 	</div>
 	<div id="bottom-bar">
-		<a href="javascript:showSidebar(false);">&#x1F5BC;</a>
-		<a href="javascript:showSidebar(true);">&#x1F6C8;</a>
+		<img onclick="showSidebar(false);" src="/images/photo.svg" width="25" height="25"/>
+		<img onclick="showSidebar(true);" src="/images/info.svg" width="25" height="25"/>
 	</div>
 </div>
 
diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index d5bac3e..080994a 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -20,6 +20,7 @@ div#image-container {
     box-sizing: border-box;
     flex:       1 0 0;
     height:     100%;
+    overflow:   auto;
     padding:    var(--size-default-gap);
     width:      100%;
 }
@@ -210,16 +211,13 @@ div#bottom-bar {
     }
 }
 
-div#bottom-bar > a {
-    color:       white;
-    display:     block;
-    font-size:   18pt;
-    margin:      auto;
-    padding:     7px;
-    user-select: none;
+div#bottom-bar > img {
+    color:   white;
+    margin:  auto;
+    padding: 10px;
 }
 
-div#bottom-bar > a:active {
+div#bottom-bar > img:active {
     /* TODO: Use colours from global.css */
     background: white;
     color:      #141414;
diff --git a/Pages/_Host.cshtml b/Pages/_Host.cshtml
index abee742..28ff24c 100644
--- a/Pages/_Host.cshtml
+++ b/Pages/_Host.cshtml
@@ -7,7 +7,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <base href="~/" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="/styles/global.css" rel="stylesheet" />
-- 
cgit v1.3