diff options
| -rw-r--r-- | MainLayout.razor.css | 4 | ||||
| -rw-r--r-- | Pages/Component/Dialog.razor.css | 1 | ||||
| -rw-r--r-- | Pages/Gallery.razor | 18 | ||||
| -rw-r--r-- | Pages/Gallery.razor.css | 7 | ||||
| -rw-r--r-- | Pages/TagDefinitions.razor | 110 | ||||
| -rw-r--r-- | Pages/TagDefinitions.razor.css | 7 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor | 4 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor.css | 37 | ||||
| -rw-r--r-- | wwwroot/styles/global.css | 2 |
9 files changed, 117 insertions, 73 deletions
diff --git a/MainLayout.razor.css b/MainLayout.razor.css index 87b8aae..b0dea4e 100644 --- a/MainLayout.razor.css +++ b/MainLayout.razor.css @@ -2,6 +2,7 @@ background: var(--col-navbar-bg); box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px; display: flex; + z-index: 100; } div#navbar > a { @@ -49,8 +50,7 @@ div#navbar input[type="text"] { } #content { - flex: 1 1 calc(100vh - 119px); + flex: 1 1 calc(100vh - 59px); overflow-x: hidden; overflow-y: auto; - padding: 30px; } 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> +<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()) - @(", ") + <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 { diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css index b694fe4..50f20f1 100644 --- a/wwwroot/styles/global.css +++ b/wwwroot/styles/global.css @@ -21,6 +21,8 @@ --col-switch-bg: var(--col-bg); --col-switch-fg: #fff; --col-switch-bg-hl: var(--col-accent-pri); + + --size-default-gap: 30px; } ::selection { |