1 files changed, 122 insertions, 12 deletions

diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index 53d5eca..d5bac3e 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -1,7 +1,19 @@
-div#content {
-    display:     flex;
-    align-items: start;
-    height:      100%;
+div#vcontainer {
+    align-items:    start;
+    display:        flex;
+    flex-direction: column;
+    height:         100%;
+    overflow:       hidden;
+    width:          100%;
+}
+
+div#hcontainer {
+    align-items:    start;
+    display:        flex;
+    flex-direction: row;
+    height:         100%;
+    overflow:       hidden;
+    width:          100%;
 }
 
 div#image-container {
@@ -23,9 +35,50 @@ div#image-container > img {
     transform:  translate(-50%, -50%);
 }
 
+div#metadata-show-button {
+    display:         flex;
+    flex-direction:  column;
+    height:          100%;
+    justify-content: center;
+    user-select:     none;
+    width:           20px;
+}
+
+div#metadata-show-button > a::before {
+    content: "\25B6";
+}
+
+div#hcontainer.hide-metadata > div#metadata-show-button > a::before {
+    content: "\25C0" !important;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#metadata-show-button {
+        display: none !important;
+    }
+}
+
+div#metadata-show-button > a {
+    /* TODO: Use colours from global.css */
+    background:    #333;
+    border-radius: 10px 0 0 10px;
+    color:         #fff;
+    display:       block;
+    padding:       15px 0 15px 0;
+    text-align:    center;
+}
+
+div#metadata-show-button > a:hover {
+    filter: brightness(1.5);
+}
+
+div#metadata-show-button > a:active {
+    background: #fff;
+}
+
 div#metadata {
     background:     #333;
-    box-shadow:     rgba(0, 0, 0, 0.5) -10px 0px 10px;
+    box-shadow:     rgba(0, 0, 0, 0.25) -10px 0px 10px;
     box-sizing:     border-box;
     display:        flex;
     flex-direction: column;
@@ -38,15 +91,28 @@ div#metadata {
     z-index:        90;
 }
 
-div#metadata.hidden {
-    box-shadow:   none;
-    margin-right: -700px;
+@media (hover: hover) and (pointer: fine) {
+    div#hcontainer.hide-metadata > div#metadata {
+        box-shadow:   none;
+        margin-right: -700px;
+    }
 }
 
-@media (max-aspect-ratio: 4/3) {
+@media (hover: none) and (pointer: coarse) {
+    div#image-container {
+        display: none;
+    }
+
     div#metadata {
-        box-shadow:   none;
-        margin-right: -700px;
+        width: 100%;
+    }
+
+    div#hcontainer.hide-metadata > div#image-container {
+        display: initial;
+    }
+
+    div#hcontainer.hide-metadata > div#metadata {
+        display: none;
     }
 }
 
@@ -54,6 +120,12 @@ div#button-container {
     margin-top: auto;
 }
 
+@media (hover: none) and (pointer: coarse) {
+    div#button-container button {
+        font-size: 8pt;
+    }
+}
+
 div#metadata-container {
     overflow-x: hidden;
     overflow-y: auto;
@@ -93,12 +165,19 @@ table#uploaded-files th {
 
 table#uploaded-files td {
     font-family:   'Lucida Console';
-    font-size:     8pt;
+    font-size:     7pt;
     overflow:      hidden;
     text-overflow: ellipsis;
     white-space:   nowrap;
 }
 
+@media (hover: none) and (pointer: coarse) {
+    table#uploaded-files th,
+    table#uploaded-files td {
+        font-size: 6pt;
+    }
+}
+
 table#uploaded-files td:nth-child(4) {
     max-width: 170px;
 }
@@ -114,3 +193,34 @@ p.heading {
 p.newlines {
     white-space: pre-line;
 }
+
+div#bottom-bar {
+    /* TODO: Use colours from global.css */
+    align-items:    center;
+    background:     #141414;
+    box-shadow:     rgba(0, 0, 0, 0.25) 0px -5px 5px;
+    display:        none;
+    flex-direction: row;
+    width:          100%;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#bottom-bar {
+        display: flex;
+    }
+}
+
+div#bottom-bar > a {
+    color:       white;
+    display:     block;
+    font-size:   18pt;
+    margin:      auto;
+    padding:     7px;
+    user-select: none;
+}
+
+div#bottom-bar > a:active {
+    /* TODO: Use colours from global.css */
+    background: white;
+    color:      #141414;
+}