diff options
| -rw-r--r-- | Pages/Component/Button.razor.css | 6 | ||||
| -rw-r--r-- | Pages/Gallery.razor | 38 | ||||
| -rw-r--r-- | wwwroot/images/grid-large.svg | 3 | ||||
| -rw-r--r-- | wwwroot/images/grid-medium.svg | 7 | ||||
| -rw-r--r-- | wwwroot/images/grid-small.svg | 13 | ||||
| -rw-r--r-- | wwwroot/styles/global.css | 7 |
6 files changed, 66 insertions, 8 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 + } } diff --git a/wwwroot/images/grid-large.svg b/wwwroot/images/grid-large.svg new file mode 100644 index 0000000..b458975 --- /dev/null +++ b/wwwroot/images/grid-large.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px"> + <rect x="10" y="10" width="50" height="50"/> +</svg> diff --git a/wwwroot/images/grid-medium.svg b/wwwroot/images/grid-medium.svg new file mode 100644 index 0000000..410b362 --- /dev/null +++ b/wwwroot/images/grid-medium.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px"> + <rect x="10" y="10" width="20" height="20"/> + <rect x="40" y="10" width="20" height="20"/> + + <rect x="10" y="40" width="20" height="20"/> + <rect x="40" y="40" width="20" height="20"/> +</svg> diff --git a/wwwroot/images/grid-small.svg b/wwwroot/images/grid-small.svg new file mode 100644 index 0000000..fb75516 --- /dev/null +++ b/wwwroot/images/grid-small.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px"> + <rect x="10" y="10" width="10" height="10"/> + <rect x="30" y="10" width="10" height="10"/> + <rect x="50" y="10" width="10" height="10"/> + + <rect x="10" y="30" width="10" height="10"/> + <rect x="30" y="30" width="10" height="10"/> + <rect x="50" y="30" width="10" height="10"/> + + <rect x="10" y="50" width="10" height="10"/> + <rect x="30" y="50" width="10" height="10"/> + <rect x="50" y="50" width="10" height="10"/> +</svg> diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css index 9de9fc1..f2b6147 100644 --- a/wwwroot/styles/global.css +++ b/wwwroot/styles/global.css @@ -108,9 +108,12 @@ button.warning { } button > img { - height: 15px; + height: 15px; + width: 15px; +} + +button > :not(:last-child) { margin-right: 5px; - width: 15px; } @media (hover: none) and (pointer: coarse) { |
