ui: Better header and container alignment

linkdotnet · Jun 12, 2024 · 19a2d1d · 19a2d1d
1 parent 1f94bfb
commit 19a2d1d
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 18 deletions.
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
@@ -1,9 +1,8 @@
 @using LinkDotNet.Blog.Domain
 @inject IJSRuntime JSRuntime
 
-<h3>@Title</h3>
-
 <div class="container">
+	<h3 class="fw-bold">@Title</h3>
 	<EditForm Model="@model" OnValidSubmit="OnValidBlogPostCreatedAsync">
 		<DataAnnotationsValidator />
 		<div class="mb-3">

diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/CreateBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/CreateBlogPost.razor
@@ -6,12 +6,12 @@
 @inject IRepository<BlogPost> BlogPostRepository
 @inject IToastService ToastService
 
-<CreateNewBlogPost Title="Create new BlogPost" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
+<CreateNewBlogPost Title="Create New Blog Post" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
 
 @code {
     private async Task StoreBlogPostAsync(BlogPost blogPost)
     {
         await BlogPostRepository.StoreAsync(blogPost);
         ToastService.ShowInfo($"Created BlogPost {blogPost.Title}");
     }
-}
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/UpdateBlogPostPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/UpdateBlogPostPage.razor
@@ -9,7 +9,7 @@
 @if (blogPostFromDb is not null)
 {
     <CreateNewBlogPost
-        Title="Update BlogPost"
+        Title="Update Blog Post"
         BlogPost="@blogPostFromDb"
         OnBlogPostCreated="@StoreBlogPostAsync"
         ClearAfterCreated="false"></CreateNewBlogPost>

diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/DashboardPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/DashboardPage.razor
@@ -2,8 +2,8 @@
 @using LinkDotNet.Blog.Web.Features.Admin.Dashboard.Components
 @attribute [Authorize]
 
-<div class="container-fluid ms-3">
-    <h3>Dashboard</h3>
+<div class="container">
+    <h3 class="fw-bold">Dashboard</h3>
     <div class="container-fluid">
 	    <div class="row mt-3">
             <div class="col-12">

diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/DraftBlogPost/DraftBlogPostPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/DraftBlogPost/DraftBlogPostPage.razor
@@ -5,13 +5,15 @@
 @attribute [Authorize]
 @inject IRepository<BlogPost> BlogPostRepository
 
-<h3>Draft Blog Posts</h3>
+<div class="container">
+	<h3 class="fw-bold">Draft Blog Posts</h3>
 
-<div class="content px-4">
-    @for (var i = 0; i < blogPosts.Count; i++)
-    {
-        <ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
-    }
+	<div class="content px-4">
+		@for (var i = 0; i < blogPosts.Count; i++)
+		{
+			<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
+		}
+	</div>
 </div>
 
 @code {
@@ -22,4 +24,4 @@
         blogPosts = await BlogPostRepository.GetAllAsync(p => !p.IsPublished, b => b.UpdatedDate);
     }
 
-}
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/Settings/SettingsPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/Settings/SettingsPage.razor
@@ -7,8 +7,8 @@
 @inject IInstantJobRegistry InstantJobRegistry
 @attribute [Authorize]
 
-<div class="container-fluid ms-3">
-	<h3>Settings</h3>
+<div class="container">
+	<h3 class="fw-bold">Settings</h3>
 	<table class="table table-responsive table-hover">
 		<thead>
 		<tr>

diff --git a/src/LinkDotNet.Blog.Web/Features/Archive/ArchivePage.razor b/src/LinkDotNet.Blog.Web/Features/Archive/ArchivePage.razor
@@ -6,8 +6,8 @@
 
 <OgData Title="Archive" Description="Explore all blog posts."></OgData>
 
-<div class="ps-2">
-    <h3 class="pb-3">Archive (@blogPostCount posts)</h3>
+<div class="container">
+    <h3 class="pb-3 fw-bold">Archive (@blogPostCount posts)</h3>
 
     @if (blogPostsPerYear is null)
     {