Skip to content

Commit 1d02ab6

Browse files
mythzmythz
committed
ArtifactEdit UI tweaks
1 parent aef9ab2 commit 1d02ab6

2 files changed

Lines changed: 154 additions & 213 deletions

File tree

‎BlazorDiffusion/Shared/ArtifactEdit.razor‎

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,35 @@
66
<!-- Header -->
77
<div class="h-0 flex-1 overflow-y-auto">
88
<div class=@CssDefaults.Form.TitlebarClass>
9-
<div class="flex items-start justify-between space-x-3">
10-
<div class="space-y-1">
11-
<TextLink class="flex" href=@($"/admin/creatives?Id={Artifact.CreativeId}")>
12-
<h2 class=@CssDefaults.Form.HeadingClass title="@Artifact.FileName">@Artifact.Prompt</h2>
9+
<div class="flex items-start justify-between space-x-2">
10+
<div>
11+
<TextLink href=@($"/admin/creatives?Id={Artifact.CreativeId}")>
12+
<h2 class="font-medium text-gray-900 dark:text-gray-100" title="@Artifact.FileName">@Artifact.Prompt</h2>
1313
</TextLink>
1414

15-
<div class="mt-1 flex justify-evenly">
16-
<div>
17-
<span class="w-12 group flex items-center text-gray-500 text-base leading-6 font-medium rounded-full">
18-
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
19-
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
20-
</svg>
21-
@Artifact.LikesCount
22-
</span>
15+
<div class="mt-2 flex justify-between">
16+
<div class="flex items-center text-gray-500 font-medium">
17+
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
18+
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
19+
</svg>
20+
@Artifact.LikesCount
2321
</div>
24-
<div>
25-
<span class="w-12 group flex items-center text-gray-500 text-base leading-6 font-medium rounded-full">
26-
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
27-
<path d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"></path>
28-
</svg>
29-
@Artifact.DownloadsCount
30-
</span>
22+
<div class="flex items-center text-gray-500 font-medium">
23+
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
24+
<path d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"></path>
25+
</svg>
26+
@Artifact.DownloadsCount
3127
</div>
32-
<div>
33-
<span class="w-12 group flex items-center text-gray-500 text-base leading-6 font-medium rounded-full">
34-
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
35-
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
36-
</svg>
37-
@Artifact.SearchCount
38-
</span>
28+
<div class="flex items-center text-gray-500 font-medium">
29+
<svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
30+
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
31+
</svg>
32+
@Artifact.SearchCount
3933
</div>
40-
<div>
34+
<div class="flex items-center text-gray-500 font-medium">
4135
@TextUtils.FormatBytes(Artifact.ContentLength, decimals:0)
4236
</div>
43-
<div>
37+
<div class="flex items-center text-gray-500 font-medium">
4438
@($"{Artifact.Width}x{Artifact.Height}")
4539
</div>
4640
</div>
@@ -66,21 +60,19 @@
6660
<div class="flex flex-1 flex-col justify-between">
6761
<div class="divide-y divide-gray-200 px-4 sm:px-6">
6862
<div class="space-y-6 pt-6 pb-5">
69-
<div>
70-
<CheckboxInput @bind-Value="Artifact.Nsfw" Label="NSFW"></CheckboxInput>
71-
</div>
72-
<div>
73-
<select @bind="Quality">
74-
@foreach (var item in options)
75-
{
76-
<option value="@item.Key">@item.Value</option>
77-
}
78-
</select>
79-
</div>
80-
<div class="">
81-
<img src="https://cdn.diffusion.works@(Artifact.FilePath)" alt=""
82-
class="object-cover group-hover:opacity-75">
83-
</div>
63+
64+
<fieldset class="grid grid-cols-12 gap-6">
65+
<div class="col-span-12 xl:col-span-6 flex items-center">
66+
<CheckboxInput @bind-Value="Artifact.Nsfw" Label="NSFW" />
67+
</div>
68+
<div class="col-span-12 xl:col-span-6">
69+
<SelectInput @bind-Value="Quality" Entries="options" />
70+
</div>
71+
<div class="col-span-12">
72+
<img src="https://cdn.diffusion.works@(Artifact.FilePath)" alt="" class="object-cover">
73+
</div>
74+
</fieldset>
75+
8476
</div>
8577
</div>
8678
</div>
@@ -120,12 +112,12 @@
120112

121113
string Quality = "0";
122114

123-
Dictionary<string, string> options = new()
115+
KeyValuePair<string, string>[] options = new KeyValuePair<string, string>[]
124116
{
125-
{ "0", "Good" },
126-
{ "-1", "Malformed" },
127-
{ "-2", "Blurred" },
128-
{ "-3", "Low Quality" }
117+
new("0", "Good"),
118+
new("-1", "Malformed"),
119+
new("-2", "Blurred"),
120+
new("-3", "Low Quality"),
129121
};
130122

131123
protected override async Task OnParametersSetAsync()

0 commit comments

Comments
 (0)