From af3ef3cf9b82b853dea71cf28d04fa928b0f8b56 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Mon, 4 Sep 2023 09:19:22 +1000
Subject: Moved buttons to bottom in ViewMedia

---
 Pages/ViewMedia.razor     | 90 +++++++++++++++++++++++++----------------------
 Pages/ViewMedia.razor.css | 27 +++++++++-----
 2 files changed, 66 insertions(+), 51 deletions(-)

(limited to 'Pages')

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index c78e9f5..f1df9a1 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -13,52 +13,56 @@
         <img src="/media/@(media.Guid)" width=@media.Width height=@media.Height/>
     </div>
     <div id="metadata">
-        <div id="metadata-fileinfo">
-            @if(infoEditMode) {
-                <form @onsubmit=@(() => ApplyInfoEdit(true))>
-                    <table id="edit-metadata">
-                        <tr>
-                            <td>Title:</td>
-                            <td><input type="text" @bind=shortDescription/></td>
-                        </tr>
-                        <tr>
-                            <td>Description:</td>
-                            <td><textarea rows="4" @bind=longDescription/></td>
-                        </tr>
-                    </table>
-                </form>
-            } else {
-                <p>Title: <i>@(media.ShortDescription ?? "None")</i></p>
-                <p class="newlines">Description:<br/><i>@(media.LongDescription ?? "None")</i></p>
-            }
-            <p>Resolution: @(media.Width)x@(media.Height)</p>
-            <p class="heading">Upload history</p>
-            <hr/>
-            <table id="uploaded-files" class="data-table">
-                <tr>
-                    <th>Created On</th>
-                    <th>Last Write</th>
-                    <th>Uploaded On</th>
-                    <th>Filename</th>
-                    <th>Size</th>
-                    <th>Original Checksum</th>
-                </tr>
-                @foreach(var file in media.UploadedFiles) {
+        <div id="metadata-container">
+            <div id="metadata-fileinfo">
+                @if(infoEditMode) {
+                    <form @onsubmit=@(() => ApplyInfoEdit(true))>
+                        <table id="edit-metadata">
+                            <tr>
+                                <td>Title:</td>
+                                <td><input type="text" @bind=shortDescription/></td>
+                            </tr>
+                            <tr>
+                                <td>Description:</td>
+                                <td><textarea rows="4" @bind=longDescription/></td>
+                            </tr>
+                        </table>
+                    </form>
+                } else {
+                    <p>Title: <i>@(media.ShortDescription ?? "None")</i></p>
+                    <p class="newlines">Description:<br/><i>@(media.LongDescription ?? "None")</i></p>
+                }
+                <p>Resolution: @(media.Width)x@(media.Height)</p>
+                <p class="heading">Upload history</p>
+                <hr/>
+                <table id="uploaded-files" class="data-table">
                     <tr>
-                        <td title=@file.CreateTime?.ToString()>@(file.CreateTime?.ToString("d") ?? "N/A")</td>
-                        <td title=@file.LastWriteTime?.ToString()>@(file.LastWriteTime?.ToString("d") ?? "N/A")</td>
-                        <td title=@file.UploadTime>@(file.UploadTime.ToString("d"))</td>
-                        <td title=@file.Filename>@file.Filename</td>
-                        <td title=@file.Length>@file.Length.ToBytesSI()</td>
-                        <td title=@file.OriginalChecksum>@file.OriginalChecksum.Substring(0, 8)</td>
+                        <th>Created On</th>
+                        <th>Last Write</th>
+                        <th>Uploaded On</th>
+                        <th>Filename</th>
+                        <th>Size</th>
+                        <th>Original Checksum</th>
                     </tr>
-                }
-            </table>
+                    @foreach(var file in media.UploadedFiles) {
+                        <tr>
+                            <td title=@file.CreateTime?.ToString()>@(file.CreateTime?.ToString("d") ?? "N/A")</td>
+                            <td title=@file.LastWriteTime?.ToString()>@(file.LastWriteTime?.ToString("d") ?? "N/A")</td>
+                            <td title=@file.UploadTime>@(file.UploadTime.ToString("d"))</td>
+                            <td title=@file.Filename>@file.Filename</td>
+                            <td title=@file.Length>@file.Length.ToBytesSI()</td>
+                            <td title=@file.OriginalChecksum>@file.OriginalChecksum.Substring(0, 8)</td>
+                        </tr>
+                    }
+                </table>
+            </div>
+            <div id="metadata-tags">
+                <p class="heading">Tags</p>
+                <hr/>
+                <MediaTagTable Media=media @ref=mediaTagTable/>
+            </div>
         </div>
-        <div id="metadata-tags">
-            <p class="heading">Tags</p>
-            <hr/>
-            <MediaTagTable Media=media @ref=mediaTagTable/>
+        <div id="button-container">
             <ButtonContainer>
                 <button @onclick=@(() => deleteDialog.Show()) class="warning">Delete</button>
                 <button @onclick=@(() => tagDialog.Show()) class="secondary">Add Tag</button>
diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index 9ae291c..89ab2a7 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -23,14 +23,25 @@ div#image-container > img {
 }
 
 div#metadata {
-    background:  #333;
-    box-shadow:  rgba(0, 0, 0, 0.5) -10px 0px 10px;
-    box-sizing:  border-box;
-    height:      100%;
-    margin-left: auto;
-    padding:     30px;
-    width:       700px;
-    z-index:     90;
+    background:     #333;
+    box-shadow:     rgba(0, 0, 0, 0.5) -10px 0px 10px;
+    box-sizing:     border-box;
+    display:        flex;
+    flex-direction: column;
+    height:         100%;
+    margin-left:    auto;
+    padding:        30px;
+    width:          700px;
+    z-index:        90;
+}
+
+div#button-container {
+    margin-top: auto;
+}
+
+div#metadata-container {
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 table#edit-metadata {
-- 
cgit v1.3