diff options
| -rw-r--r-- | Pages/ViewMedia.razor | 90 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor.css | 27 |
2 files changed, 66 insertions, 51 deletions
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 { |