Added the ability to hide sidebar in ViewMedia

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;
 }