From 70cf9b99deb255df23407c4230e9c45cf5388932 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Tue, 8 Aug 2023 23:52:55 +1000
Subject: Cosmetic improvements to ViewMedia page

---
 Pages/ViewMedia.cshtml     | 24 +++++++++++++++++-------
 Pages/ViewMedia.cshtml.css |  6 +++++-
 wwwroot/styles/global.css  | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/Pages/ViewMedia.cshtml b/Pages/ViewMedia.cshtml
index 078ac8f..967759b 100644
--- a/Pages/ViewMedia.cshtml
+++ b/Pages/ViewMedia.cshtml
@@ -44,8 +44,8 @@
     <img src="/media/@(Model.Media.Guid)"/>
     <div id="metadata">
         <div id="metadata-header">
-            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-fileinfo" class="selected">File Info</a>
-            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-tags">Tags</a>
+            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-fileinfo">File Info</a>
+            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-tags" class="selected">Tags</a>
         </div>
 @*        <form method="post">
             <label for="shortDescription">Short Description</label>
@@ -54,19 +54,21 @@
             <input type="text" name="longDescription" placeholder="@Model.Media.LongDescription"/>
             <input type="submit" value="Update"/>
         </form>*@
-        <div id="metadata-fileinfo" class="selected">
-            <table>
+        <div id="metadata-fileinfo">
+            <p>Upload history</p>
+            <hr />
+            <table class="data-table">
                 <tr>
                     <th>Created On</th>
                     <th>Last Write</th>
                     <th>Uploaded On</th>
                     <th>Filename</th>
-                    <th>Checksum</th>
+                    <th>Original Checksum</th>
                 </tr>
                 @foreach(var file in Model.Media.UploadedFiles) {
                     <tr>
-                        <td>@file.CreateTime</td>
-                        <td>@file.LastWriteTime</td>
+                        <td>@(file.CreateTime?.ToString() ?? "N/A")</td>
+                        <td>@(file.LastWriteTime?.ToString() ?? "N/A")</td>
                         <td>@file.UploadTime</td>
                         <td>@file.Filename</td>
                         <td>@file.OriginalChecksum</td>
@@ -74,5 +76,13 @@
                 }
             </table>
         </div>
+        <div id="metadata-tags" class="selected">
+            <table class="data-table">
+                <tr>
+                    <th>Tag Name</th>
+                </tr>
+            </table>
+            <button>Add Tag</button>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/Pages/ViewMedia.cshtml.css b/Pages/ViewMedia.cshtml.css
index b9c22ee..a272dbb 100644
--- a/Pages/ViewMedia.cshtml.css
+++ b/Pages/ViewMedia.cshtml.css
@@ -39,7 +39,11 @@ div#metadata-header > a:hover {
     background: rgba(255, 255, 255, 0.4);
 }
 
+div#metadata-fileinfo > table th {
+    font-size: 8pt;
+}
+
 div#metadata-fileinfo > table td {
     font-family: 'Lucida Console';
-    font-size:   10pt;
+    font-size:   8pt;
 }
\ No newline at end of file
diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
index 6c6e6f1..4a76f87 100644
--- a/wwwroot/styles/global.css
+++ b/wwwroot/styles/global.css
@@ -21,4 +21,43 @@ input {
     border:        1px solid #aaa;
     background:    rgba(0, 0, 0, 0.3);
     border-radius: 5px;
+}
+
+button {
+    background:    #f0f;
+    border-radius: 10px;
+    border:        none;
+    box-sizing:    border-box;
+    height:        30px;
+    padding:       0 7px 0 7px;
+}
+
+button:hover {
+    background: #f8f;
+}
+
+button:active {
+    background: #fff;
+}
+
+table.data-table {
+    border-collapse: collapse;
+    width:           100%;
+}
+
+table.data-table > tbody > tr > th {
+    border-bottom: 1px solid white;
+    padding:       4px;
+}
+
+table.data-table > tbody > tr > td {
+    padding: 4px;
+}
+
+table.data-table > tbody > tr:nth-child(2n):not(:last-child) {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+table.data-table > tbody > tr > td:not(:last-child) {
+    border-right: 1px solid white;
 }
\ No newline at end of file
-- 
cgit v1.3