Skip to content

Commit efb31d5

Browse files
mythzmythz
committed
ui tweaks
1 parent 387e61e commit efb31d5

6 files changed

Lines changed: 65 additions & 11 deletions

File tree

‎BlazorDiffusion/Pages/Favorites.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@
6464
<div class="flex-grow mt-2">
6565
@if (SelectedAlbum != null)
6666
{
67-
<ArtifactGallery Results=@GalleryResults ResolveBorderColor="GetBorderColor" Change="OnGalleryChange">
67+
<ArtifactGallery Results=@GalleryResults ResolveBorderColor="GetBorderColor" Change="OnGalleryChange" ColumnsSliderClass="-ml-16">
6868
<LeftHeader>
69-
<div class="w-full sm:w-1/3 sm:pl-2 sm:-mr-20 flex justify-center sm:justify-start items-center whitespace-nowrap">
70-
<AlbumTitle Album=@SelectedAlbum />
69+
<div class="w-full sm:w-1/3 sm:pl-2 flex justify-center sm:justify-start items-center whitespace-nowrap">
70+
<AlbumTitle class="-ml-16 sm:ml-0" Album=@SelectedAlbum />
7171
</div>
7272
</LeftHeader>
7373
<TopRightIcon>
@@ -108,10 +108,10 @@
108108
}
109109
else
110110
{
111-
<ArtifactGallery Results=@GalleryResults ResolveBorderColor="GetBorderColor" Change="OnGalleryChange">
111+
<ArtifactGallery Results=@GalleryResults ResolveBorderColor="GetBorderColor" Change="OnGalleryChange" ColumnsSliderClass="-ml-16">
112112
<LeftHeader>
113-
<div class="w-full sm:w-1/3 sm:pl-2 sm:-mr-20 flex justify-center sm:justify-start items-center whitespace-nowrap">
114-
<div class="text-xl">Likes</div>
113+
<div class="w-full sm:w-1/3 sm:pl-2 flex justify-center sm:justify-start items-center whitespace-nowrap">
114+
<div class="text-xl -ml-16 sm:ml-0">Likes</div>
115115
</div>
116116
</LeftHeader>
117117
<RightHeader>

‎BlazorDiffusion/Pages/Index.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</div>
5959
</div>
6060
<div class="flex-grow">
61-
<ArtifactGallery Results=@GalleryResults LazyLoad="LazyLoad ?? true" Change="OnGalleryChange">
61+
<ArtifactGallery Results=@GalleryResults LazyLoad="LazyLoad ?? true" Change="OnGalleryChange" ColumnsSliderClass="-ml-16 sm:ml-0">
6262
<LeftHeader>
6363
<div class="w-full sm:w-1/3 sm:pl-2 sm:-mr-20 flex justify-center sm:justify-start items-center whitespace-nowrap">
6464
@if (SelectedAlbum != null)
@@ -100,7 +100,7 @@
100100
</div>
101101

102102
<div class="flex-grow">
103-
<ArtifactGallery Results=@GalleryResults LazyLoad="LazyLoad ?? true" Change="OnGalleryChange">
103+
<ArtifactGallery Results=@GalleryResults LazyLoad="LazyLoad ?? true" Change="OnGalleryChange" ColumnsSliderClass="-ml-16 sm:ml-0">
104104
<LeftHeader>
105105
<div class="w-full sm:w-1/3 sm:pl-2 sm:-mr-20 flex justify-center sm:justify-start items-center whitespace-nowrap">
106106
@if (SelectedAlbum != null)

‎BlazorDiffusion/Shared/AlbumTitle.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@if (Album != null)
44
{
5-
<div class="flex">
5+
<div class=@ClassNames("flex", @class)>
66
<div class="text-xl">@Album.Name</div>
77
<div class="pl-4">
88
@if (UserState.HasLiked(Album))
@@ -27,6 +27,7 @@
2727

2828
@code {
2929
[Parameter, EditorRequired] public AlbumResult? Album { get; set; }
30+
[Parameter] public string? @class { get; set; }
3031

3132
async Task LikeAlbumAsync()
3233
{

‎BlazorDiffusion/Shared/ArtifactGallery.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="w-full sm:w-1/3"></div>
1111
}
1212
<div class="w-full sm:w-1/3 flex justify-center items-center align-middle whitespace-nowrap">
13-
<div class=@ClassNames(ColumnsSliderClass ?? "mb-4 overflow-hidden rounded sm:rounded-md text-center")>
13+
<div class=@ClassNames("z-20 mb-4 overflow-hidden rounded sm:rounded-md text-center", ColumnsSliderClass)>
1414
<label for="steps-range" class="block text-sm font-medium text-gray-600 dark:text-gray-400">@UserState.AppPrefs.ArtifactGalleryColumns columns</label>
1515
<input id="steps-range" @bind="UserState.AppPrefs.ArtifactGalleryColumns" @bind:event="oninput" @onchange="SaveAppPrefsAsync" type="range" min="1" max="12" step="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
1616
</div>

‎BlazorDiffusion/Shared/ArtifactGallery.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ public partial class ArtifactGallery : AppAuthComponentBase, IDisposable
6666
[Parameter] public RenderFragment<Artifact>? BottomMenu { get; set; }
6767
[Parameter] public Func<Artifact, int?, UserState, string> ResolveBorderColor { get; set; } = ArtifactExtensions.GetBorderColor;
6868
[Parameter] public bool? LazyLoad { get; set; }
69-
[Parameter] public string ColumnsSliderClass { get; set; }
69+
[Parameter] public string? ColumnsSliderClass { get; set; }
7070
[Parameter] public EventCallback<GalleryChangeEventArgs> Change { get; set; }
7171

7272
//public SimpleSlideOver? SlideOver { get; set; }

‎BlazorDiffusion/wwwroot/css/app.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1320,6 +1320,26 @@ input[data-autocompleted] {
13201320
margin-right: 0.75rem;
13211321
}
13221322

1323+
.-mr-20 {
1324+
margin-right: -5rem;
1325+
}
1326+
1327+
.-ml-20 {
1328+
margin-left: -5rem;
1329+
}
1330+
1331+
.-ml-8 {
1332+
margin-left: -2rem;
1333+
}
1334+
1335+
.-ml-12 {
1336+
margin-left: -3rem;
1337+
}
1338+
1339+
.-ml-16 {
1340+
margin-left: -4rem;
1341+
}
1342+
13231343
.block {
13241344
display: block;
13251345
}
@@ -2524,6 +2544,18 @@ input[data-autocompleted] {
25242544
padding-top: 0.375rem;
25252545
}
25262546

2547+
.pl-8 {
2548+
padding-left: 2rem;
2549+
}
2550+
2551+
.pl-12 {
2552+
padding-left: 3rem;
2553+
}
2554+
2555+
.pl-16 {
2556+
padding-left: 4rem;
2557+
}
2558+
25272559
.text-left {
25282560
text-align: left;
25292561
}
@@ -3996,6 +4028,22 @@ input[data-autocompleted] {
39964028
margin-bottom: 0.25rem;
39974029
}
39984030

4031+
.sm\:-ml-20 {
4032+
margin-left: -5rem;
4033+
}
4034+
4035+
.sm\:-ml-8 {
4036+
margin-left: -2rem;
4037+
}
4038+
4039+
.sm\:-ml-0 {
4040+
margin-left: -0px;
4041+
}
4042+
4043+
.sm\:ml-0 {
4044+
margin-left: 0px;
4045+
}
4046+
39994047
.sm\:block {
40004048
display: block;
40014049
}
@@ -4196,6 +4244,11 @@ input[data-autocompleted] {
41964244
padding-bottom: 4rem;
41974245
}
41984246

4247+
.sm\:py-2 {
4248+
padding-top: 0.5rem;
4249+
padding-bottom: 0.5rem;
4250+
}
4251+
41994252
.sm\:pl-6 {
42004253
padding-left: 1.5rem;
42014254
}

0 commit comments

Comments
 (0)