From 5e00ed783c68746567f40bb56c7cf69f4224b711 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Fri, 21 Aug 2026 00:37:58 +1000
Subject: Initial commit

---
 Pages/Component/Button.razor.css |  6 ++----
 Pages/Gallery.razor              | 38 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 6 deletions(-)

(limited to 'Pages')

diff --git a/Pages/Component/Button.razor.css b/Pages/Component/Button.razor.css
index 5254030..1511e1d 100644
--- a/Pages/Component/Button.razor.css
+++ b/Pages/Component/Button.razor.css
@@ -14,9 +14,8 @@
 }
 
 button > img, button > svg {
-    height:       15px;
-    margin-right: 5px;
-    width:        15px;
+    height: 15px;
+    width:  15px;
 }
 
 @media (hover: none) and (pointer: coarse) {
@@ -26,7 +25,6 @@ button > img, button > svg {
 
     button > img, button > svg {
         height:       20px;
-        margin-right: 0;
         padding:      8px;
         width:        20px;
     }
diff --git a/Pages/Gallery.razor b/Pages/Gallery.razor
index 043f92d..deabd98 100644
--- a/Pages/Gallery.razor
+++ b/Pages/Gallery.razor
@@ -20,13 +20,34 @@
         <p><center>a tag ID have been specified!</center></p>
     </div>
 } else {
-	<div style="padding:var(--size-default-gap);">
+	<div style="margin:0 auto 0 auto;padding:var(--size-default-gap);">
+        <ButtonContainer>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Small))
+                IconUrl="/images/grid-small.svg"/>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Medium))
+                IconUrl="/images/grid-medium.svg"/>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Large))
+                IconUrl="/images/grid-large.svg"/>
+        </ButtonContainer>
 		@foreach(var media in displayMedia) {
 			// Precalculate thumbnail size to help the browser
 			// lay out the images during initial page load
 			int width = (int) media.CurrentUploadedFile!.Width! * 200 / (int) media.CurrentUploadedFile.Height!;
 			<a href="/ViewMedia?m=@(media.Guid)">
-				<img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
+                @switch(viewSize) {
+                    case GalleryViewSize.Small:
+						<img src="/media/thumb/@(media.Guid)?w=100&h=100" width="100" height="100"/>
+						break;
+                    case GalleryViewSize.Medium:
+						<img src="/media/thumb/@(media.Guid)?w=200&h=200" width="200" height="200"/>
+						break;
+                    case GalleryViewSize.Large:
+						<img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
+						break;
+                }
 			</a>
 		}
 		<div id="canary" style="height:1px;"></div>
@@ -77,6 +98,8 @@
         }
     }
 
+    private GalleryViewSize viewSize = GalleryViewSize.Large;
+
     private List<Media> displayMedia;
 
     protected override void OnInitialized() =>
@@ -136,6 +159,17 @@
         });
     }
 
+    private async Task SetViewSize(GalleryViewSize viewSize) {
+		this.viewSize = viewSize;
+		await InvokeAsync(() => StateHasChanged());
+    }
+
     public void Dispose() =>
         userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
+
+    public enum GalleryViewSize {
+        Small,
+        Medium,
+        Large
+    }
 }
-- 
cgit v1.3