ui tweaks

Author: mythz

BlazorDiffusion/Components/Pages/Albums/Album.razor

@@ -17,7 +17,7 @@
         </HeadContent>
     }
 
-    <div id="albums" class="mx-auto px-6 lg:px-8" data-album="@SelectedAlbum.Id">
+    <div id="albums" class="mx-auto px-2" data-album="@SelectedAlbum.Id">
         <div class="my-8 mx-auto max-w-2xl text-center">
             <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">@SelectedAlbum.Name</h1>
         </div>

BlazorDiffusion/Components/Pages/Albums/Index.razor

@@ -2,7 +2,7 @@
 @page "/albums.html"
 @inject UserState UserState
 
-<div id="albums" class="mx-auto px-6 lg:px-8">
+<div id="albums" class="mx-auto px-2">
     <div class="my-8 mx-auto max-w-2xl text-center">
         <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">Albums</h1>
     </div>

BlazorDiffusion/Components/Pages/ArtView.razor

@@ -95,7 +95,7 @@
             </a>
         </div>
 
-        @if (GetArtifactAlbums().Count() > 0)
+        @if (GetArtifactAlbums().Any())
         {
             <div class="ml-4 mb-8 text-sm text-gray-600 dark:text-gray-400">
                 <div class="flex whitespace-nowrap w-24">

BlazorDiffusion/Components/Pages/Create.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>Create new Image with Stable Diffusion</PageTitle>
 
-<div id="create" class="mx-auto px-6 lg:px-8">
+<div id="create" class="mx-auto px-2">
     <div class="my-8 mx-auto max-w-2xl text-center">
         <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">Create Image</h1>
     </div>

BlazorDiffusion/Components/Pages/Favorites.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>My Favorites</PageTitle>
 
-<div id="favorites" class="mx-auto px-6 lg:px-8">
+<div id="favorites" class="mx-auto px-2">
     <div class="my-8 mx-auto max-w-2xl text-center">
         <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">My Favorites</h1>
     </div>

BlazorDiffusion/Components/Pages/Latest.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>Latest Images @(Page != null ? $" - page {Page}" : "")</PageTitle>
 
-<div id="albums" class="mx-auto px-6 lg:px-8">
+<div id="albums" class="mx-auto px-2">
     <div class="my-8 mx-auto max-w-2xl text-center">
         <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">Latest Images</h1>
     </div>

BlazorDiffusion/Components/Pages/Top.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>Top Images @(Page != null ? $" - page {Page}" : "")</PageTitle>
 
-<div id="albums" class="mx-auto px-6 lg:px-8">
+<div id="albums" class="mx-auto px-2">
     <div class="my-8 mx-auto max-w-2xl text-center">
         <h1 class="max-w-4xl font-display text-4xl font-semibold tracking-tight text-slate-50 sm:text-5xl lg:text-6xl">Top Images</h1>
     </div>

BlazorDiffusion/wwwroot/css/app.css

@@ -1353,6 +1353,34 @@ select{
   margin-top: auto;
 }
 
+.-mt-12 {
+  margin-top: -3rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-mt-9 {
+  margin-top: -2.25rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.-mt-7 {
+  margin-top: -1.75rem;
+}
+
 .block {
   display: block;
 }
@@ -2593,11 +2621,6 @@ select{
   padding-bottom: 3rem;
 }
 
-.py-16 {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2640,6 +2663,10 @@ select{
   padding-bottom: 0.375rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -4682,10 +4709,6 @@ select{
     margin: 0.25rem;
   }
 
-  .sm\:m-2 {
-    margin: 0.5rem;
-  }
-
   .sm\:-mx-6 {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
@@ -4715,6 +4738,10 @@ select{
     margin-left: -1rem;
   }
 
+  .sm\:-mt-12 {
+    margin-top: -3rem;
+  }
+
   .sm\:-mt-8 {
     margin-top: -2rem;
   }
@@ -4751,6 +4778,14 @@ select{
     margin-top: 2rem;
   }
 
+  .sm\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .sm\:-mt-9 {
+    margin-top: -2.25rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -4949,10 +4984,6 @@ select{
     padding: 0px;
   }
 
-  .sm\:p-2 {
-    padding: 0.5rem;
-  }
-
   .sm\:p-6 {
     padding: 1.5rem;
   }
@@ -4982,11 +5013,6 @@ select{
     padding-bottom: 3.5rem;
   }
 
-  .sm\:py-32 {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
-  }
-
   .sm\:pb-0 {
     padding-bottom: 0px;
   }
@@ -4995,6 +5021,10 @@ select{
     padding-bottom: 0.5rem;
   }
 
+  .sm\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
   .sm\:pb-4 {
     padding-bottom: 1rem;
   }
@@ -5027,6 +5057,10 @@ select{
     padding-top: 0.5rem;
   }
 
+  .sm\:pt-0\.5 {
+    padding-top: 0.125rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -5206,10 +5240,6 @@ select{
          column-gap: 3rem;
   }
 
-  .lg\:rounded-xl {
-    border-radius: 0.75rem;
-  }
-
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

BlazorDiffusion/wwwroot/pages/Favorites.mjs

@@ -115,7 +115,7 @@ export default {
     <div>
         <div v-if="user" class="flex mt-3">
             <div class="z-10 flex-shrink mr-1 sm:mr-2">
-                <div class="ml-2 flex flex-col sm:-mt-8 justify-center items-center">
+                <div class="ml-2 flex flex-col pt-0.5 -mt-8 sm:-mt-10 justify-center items-center">
                     <div class="mb-2">
                         <a v-on:click.prevent="navTo({ album: undefined })" href="/favorites">
                             <svg :class="['h-16 w-16 sm:h-24 sm:w-24', selectedAlbum == null ? 'text-red-600 hover:text-red-400' : 'text-cyan-600 hover:text-cyan-400 cursor-pointer']"
@@ -126,7 +126,7 @@ export default {
                     </div>
 
                     <a v-for="album in store.userAlbums" v-on:click.prevent="navTo({ album: album.id })" :href="'/favorites?album='+album.id">
-                        <div :class="['sm:mt-2 hover:opacity-80 cursor-pointer h-16 w-16 sm:h-24 sm:w-24 overflow-hidden rounded sm:rounded-lg border-2',
+                        <div :class="['sm:mt-2 hover:opacity-80 cursor-pointer h-16 w-16 sm:h-24 sm:w-24 overflow-hidden border',
                                         selectedAlbum?.id === album.id ? 'border-yellow-400' : 'border-transparent']">
                             <artifact-image :artifact="store.albumCover(album)" class="flex w-full h-full" image-class="object-cover"></artifact-image>
                         </div>

BlazorDiffusion/wwwroot/pages/Index.mjs

@@ -5,7 +5,7 @@ import { SearchArtifacts, AnonData, QueryArtifacts } from "dtos.mjs"
 
 export default {
     template: `
-    <div class="mx-auto px-6 lg:px-8">
+    <div class="mx-auto px-2">
         <div class="mb-10 mx-auto max-w-2xl text-center">
             <form v-on:submit.prevent="update" class="mt-4 sm:mt-8 text-lg mx-auto max-w-lg flex justify-center">
                 <text-input id="query" type="search" v-model="request.query" class="bg-transparent h-8 w-96" label="" placeholder="Search existing images"></text-input>
@@ -15,10 +15,10 @@ export default {
         <div class="flex">
             <div class="flex flex-col flex-shrink">
                 <div class="z-10 flex-shrink sm:mr-2">
-                    <div v-if="topAlbums.length" :key="renderKey" class="flex flex-col -ml-6 sm:-ml-4 -mt-5 sm:-mt-8 pt-1 sm:pt-2 justify-center items-center">
+                    <div v-if="topAlbums.length" :key="renderKey" class="flex flex-col -mt-5 sm:-mt-10 pt-1 sm:pt-2 justify-center items-center">
                         <div class="-mt-1 sm:mt-0 text-xs sm:text-sm text-gray-500 whitespace-nowrap w-16 sm:w-24 text-center pb-1">top albums</div>
                         <a :key="album.slug" v-for="album in topAlbums" :href="'/albums/' + album.slug">
-                            <div :class="['sm:mt-2 hover:opacity-80 cursor-pointer h-16 w-16 sm:h-24 sm:w-24 overflow-hidden rounded sm:rounded-lg border-2',
+                            <div :class="['sm:mt-2 hover:opacity-80 cursor-pointer h-16 w-16 sm:h-24 sm:w-24 overflow-hidden',
                                           album === album.albumRef ? 'border-yellow-400' : 'border-transparent']">
                                 <artifact-image :artifact="store.albumCover(album)" class="flex w-full h-full" image-class="object-cover"></artifact-image>
                             </div>
@@ -28,7 +28,7 @@ export default {
                 </div>
             </div>
             <div v-cloak>
-                <h3 v-if="title" class="text-xl absolute -mt-8 ml-4">{{title}}</h3>
+                <h3 v-if="title" class="text-xl absolute -mt-9">{{title}}</h3>
                 <artifact-gallery ref="gallery" :results="results" v-on:contextmenu="artifactMenu=$event" v-on:open="openDialog">
                     <template #icons="artifact">
                         <div class="p-2 relative w-full h-full overflow-hidden flex flex-col justify-between overflow-hidden">