diff options
Diffstat (limited to 'Pages')
| -rw-r--r-- | Pages/Component/Button.razor.css | 6 | ||||
| -rw-r--r-- | Pages/Gallery.razor | 38 |
2 files changed, 38 insertions, 6 deletions
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 + } } |