From 259fb4f401c58033c3afdce0fa5571d46a5577b2 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Sat, 2 Sep 2023 11:18:45 +1000
Subject: Improved page layouts

---
 Pages/Component/Dialog.razor.css |   1 +
 Pages/Gallery.razor              |  18 ++++---
 Pages/Gallery.razor.css          |   7 ++-
 Pages/TagDefinitions.razor       | 112 ++++++++++++++++++++-------------------
 Pages/TagDefinitions.razor.css   |   7 ++-
 Pages/ViewMedia.razor            |   4 +-
 Pages/ViewMedia.razor.css        |  37 ++++++++++---
 7 files changed, 114 insertions(+), 72 deletions(-)

(limited to 'Pages')

diff --git a/Pages/Component/Dialog.razor.css b/Pages/Component/Dialog.razor.css
index 22d59f0..dea3d8d 100644
--- a/Pages/Component/Dialog.razor.css
+++ b/Pages/Component/Dialog.razor.css
@@ -11,4 +11,5 @@
     transform:      translate(-50%, -50%);
     transition:     visibility 0.1s, opacity 0.1s linear;
     width:          450px;
+    z-index:        1000;
 }
diff --git a/Pages/Gallery.razor b/Pages/Gallery.razor
index b94c694..fafcb44 100644
--- a/Pages/Gallery.razor
+++ b/Pages/Gallery.razor
@@ -10,14 +10,16 @@
 
 <link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
 
-@foreach(var media in Media) {
-    // Precalculate thumbnail size to help the browser
-    // lay out the images during initial page load
-    int width = media.Width * 200 / media.Height;
-    <a href="/ViewMedia?m=@(media.Guid)">
-        <img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
-    </a>
-}
+<div id="gallery">
+    @foreach(var media in Media) {
+        // Precalculate thumbnail size to help the browser
+        // lay out the images during initial page load
+        int width = media.Width * 200 / media.Height;
+        <a href="/ViewMedia?m=@(media.Guid)">
+            <img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
+        </a>
+    }
+</div>
 
 @code {
     [Parameter]
diff --git a/Pages/Gallery.razor.css b/Pages/Gallery.razor.css
index d1750b4..10be475 100644
--- a/Pages/Gallery.razor.css
+++ b/Pages/Gallery.razor.css
@@ -1,4 +1,9 @@
-img {
+div#gallery {
+    box-sizing: border-box;
+    padding:    var(--size-default-gap);
+}
+
+img {
     margin-right: 5px;
     max-height:   200px;
 }
diff --git a/Pages/TagDefinitions.razor b/Pages/TagDefinitions.razor
index f32e803..16d7929 100644
--- a/Pages/TagDefinitions.razor
+++ b/Pages/TagDefinitions.razor
@@ -8,63 +8,65 @@
 
 <link rel="stylesheet" type="text/css" href="@(nameof(HyperBooru)).styles.css"/>
 
-<ButtonContainer>
-    <button @onclick=PromptToCreate>Create</button>
-</ButtonContainer>
-
-<TabContainer @ref=tabContainer>
-    @foreach(var ns in tagNamespaces) {
-        <TabPane Title="@(ns ?? "Default")">
-            <table id="tag-definitions" class="data-table">
-                <tr>
-                    <th>Alias</th>
-                    <th>Name</th>
-                    <th>Implicit Tags</th>
-                    <th></th>
-                </tr>
-                @foreach(var tagDef in tagDefinitions.Where(td => td.Namespace == ns)) {
-                    <tr data-guid="@tagDef.Guid">
-                        <td>@tagDef.Alias</td>
-                        <td>
-                            <a href="/Gallery?q=@tagDef.Name" class="nondecorated">
-                                @tagDef.Name
-                            </a>
-                        </td>
-                        <td>
-                            <i>
-                                @{
-                                    var implicitTags = tagDef.ImplicitTags
-                                        .Where(td => td.Source == TagSource.UserTag);
-                                    foreach(var tag in implicitTags) {
-                                        <a href="/Gallery?q=@tag.Name" class="nondecorated">
-                                            @tag.Name
-                                        </a>
-                                        if(tag != implicitTags.Last())
-                                            @(", ")
+<div id="content">
+    <ButtonContainer>
+        <button @onclick=PromptToCreate>Create</button>
+    </ButtonContainer>
+
+    <TabContainer @ref=tabContainer>
+        @foreach(var ns in tagNamespaces) {
+            <TabPane Title="@(ns ?? "Default")">
+                <table id="tag-definitions" class="data-table">
+                    <tr>
+                        <th>Alias</th>
+                        <th>Name</th>
+                        <th>Implicit Tags</th>
+                        <th></th>
+                    </tr>
+                    @foreach(var tagDef in tagDefinitions.Where(td => td.Namespace == ns)) {
+                        <tr data-guid="@tagDef.Guid">
+                            <td>@tagDef.Alias</td>
+                            <td>
+                                <a href="/Gallery?q=@tagDef.Name" class="nondecorated">
+                                    @tagDef.Name
+                                </a>
+                            </td>
+                            <td>
+                                <i>
+                                    @{
+                                        var implicitTags = tagDef.ImplicitTags
+                                            .Where(td => td.Source == TagSource.UserTag);
+                                        foreach(var tag in implicitTags) {
+                                            <a href="/Gallery?q=@tag.Name" class="nondecorated">
+                                                @tag.Name
+                                            </a>
+                                            if(tag != implicitTags.Last())
+                                                @(", ")
+                                        }
                                     }
+                            </i>
+                            </td>
+                            <td class="actions">
+                                <a href="javascript:;" @onclick=@(() => PromptToEdit(tagDef))>Edit</a>
+                                <a href="javascript:;" @onclick=@(() => PromptToDelete(tagDef))>
+                                    Delete
+                                </a>
+                                <a href="javascript:;" @onclick=@(() => PromptImplicitTags(tagDef))>
+                                    Implicit Tags
+                                </a>
+                                @if(tagDef.ImplicitTags.Select(td => td.Guid).Contains(HBContext.NsfwTag)) {
+                                    <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, false))>Make SFW</a>
+                                } else {
+                                    <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, true))>Make NSFW</a>
                                 }
-                        </i>
-                        </td>
-                        <td class="actions">
-                            <a href="javascript:;" @onclick=@(() => PromptToEdit(tagDef))>Edit</a>
-                            <a href="javascript:;" @onclick=@(() => PromptToDelete(tagDef))>
-                                Delete
-                            </a>
-                            <a href="javascript:;" @onclick=@(() => PromptImplicitTags(tagDef))>
-                                Implicit Tags
-                            </a>
-                            @if(tagDef.ImplicitTags.Select(td => td.Guid).Contains(HBContext.NsfwTag)) {
-                                <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, false))>Make SFW</a>
-                            } else {
-                                <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, true))>Make NSFW</a>
-                            }
-                        </td>
-                    </tr>
-                }
-            </table>
-        </TabPane>
-    }
-</TabContainer>
+                            </td>
+                        </tr>
+                    }
+                </table>
+            </TabPane>
+        }
+    </TabContainer>
+</div>
 
 <Dialog Title="Create a new tag definition" @ref=createTagDialog>
     <form @onsubmit=CreateTagDefinition>
diff --git a/Pages/TagDefinitions.razor.css b/Pages/TagDefinitions.razor.css
index b66d491..daa2570 100644
--- a/Pages/TagDefinitions.razor.css
+++ b/Pages/TagDefinitions.razor.css
@@ -1,3 +1,8 @@
-form > input {
+div#content {
+    box-sizing: border-box;
+    padding:    var(--size-default-gap);
+}
+
+form > input {
     width: 100%;
 }
\ No newline at end of file
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index eb49b15..e9983f0 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -11,7 +11,9 @@
 <link rel="stylesheet" type="text/css" href="@(nameof(HyperBooru)).styles.css"/>
 
 <div id="content">
-    <img src="/media/@(media.Guid)" width=@media.Width height=@media.Height/>
+    <div id="image-container">
+        <img src="/media/@(media.Guid)" width=@media.Width height=@media.Height/>
+    </div>
     <div id="metadata">
         <div id="metadata-fileinfo">
             @if(infoEditMode) {
diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index c38f43a..9ae291c 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -4,15 +4,33 @@
     height:      100%;
 }
 
-div#content > img {
-    max-width:  60%;
+div#image-container {
+    box-sizing: border-box;
     height:     100%;
+    padding:    var(--size-default-gap);
+    width:      calc(100% - 700px);
+}
+
+div#image-container > img {
+    display:    block;
+    left:       50%;
+    max-height: 100%;
+    max-width:  100%;
     object-fit: contain;
+    position:   relative;
+    top:        50%;
+    transform:  translate(-50%, -50%);
 }
 
 div#metadata {
-    margin-left: 15px;
-    width:       100%;
+    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;
 }
 
 table#edit-metadata {
@@ -48,8 +66,15 @@ table#uploaded-files th {
 }
 
 table#uploaded-files td {
-    font-family: 'Lucida Console';
-    font-size:   8pt;
+    font-family:   'Lucida Console';
+    font-size:     8pt;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+    white-space:   nowrap;
+}
+
+table#uploaded-files td:nth-child(4) {
+    max-width: 170px;
 }
 
 p.heading {
-- 
cgit v1.3