diff options
| -rw-r--r-- | Pages/ViewMedia.razor | 12 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor.css | 17 |
2 files changed, 27 insertions, 2 deletions
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor index f1df9a1..f92111b 100644 --- a/Pages/ViewMedia.razor +++ b/Pages/ViewMedia.razor @@ -8,9 +8,19 @@ <PageTitle>@title</PageTitle> +<script suppress-warning="BL9992"> + function toggleSidebar() { + document.getElementById("metadata").classList.toggle("hidden"); + } +</script> + <div id="content"> <div id="image-container"> - <img src="/media/@(media.Guid)" width=@media.Width height=@media.Height/> + <img + src="/media/@(media.Guid)" + width=@media.Width + height=@media.Height + onclick="toggleSidebar()"/> </div> <div id="metadata"> <div id="metadata-container"> diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css index 89ab2a7..16f86ec 100644 --- a/Pages/ViewMedia.razor.css +++ b/Pages/ViewMedia.razor.css @@ -6,9 +6,10 @@ div#image-container { box-sizing: border-box; + flex: 1 0 0; height: 100%; padding: var(--size-default-gap); - width: calc(100% - 700px); + width: 100%; } div#image-container > img { @@ -28,13 +29,27 @@ div#metadata { box-sizing: border-box; display: flex; flex-direction: column; + flex: 0 0 auto; height: 100%; margin-left: auto; padding: 30px; + transition: margin-right 0.1s linear; width: 700px; z-index: 90; } +div#metadata.hidden { + box-shadow: none; + margin-right: -700px; +} + +@media (max-aspect-ratio: 4/3) { + div#metadata { + box-shadow: none; + margin-right: -700px; + } +} + div#button-container { margin-top: auto; } |