summaryrefslogtreecommitdiff
path: root/Pages
diff options
context:
space:
mode:
Diffstat (limited to 'Pages')
-rw-r--r--Pages/Component/Dialog.razor.css1
-rw-r--r--Pages/Gallery.razor18
-rw-r--r--Pages/Gallery.razor.css7
-rw-r--r--Pages/TagDefinitions.razor110
-rw-r--r--Pages/TagDefinitions.razor.css7
-rw-r--r--Pages/ViewMedia.razor4
-rw-r--r--Pages/ViewMedia.razor.css37
7 files changed, 113 insertions, 71 deletions
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 {
generated by cgit v1.3 (git 2.53.0) at 2026-06-12 20:35:38 +0000