Skip to content

Commit 70ea414

Browse files
authored
Merge pull request #19 from linkdotnet/feature/redesign
Feature/redesign
2 parents e80e244 + 948a2b4 commit 70ea414

19 files changed

+267
-120
lines changed

LinkDotNet.Blog.Web/Pages/Admin/CreateNewBlogPostPage.razor

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
@inject IRepository repository
88
@inject IToastService toastService
99

10-
<CreateNewBlogPost Title="Create new BlogPost" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
10+
<div class="page">
11+
<CreateNewBlogPost Title="Create new BlogPost" OnBlogPostCreated="@(StoreBlogPostAsync)" ></CreateNewBlogPost>
12+
</div>
1113

1214
@code {
1315
private async Task StoreBlogPostAsync(BlogPost blogPost)

LinkDotNet.Blog.Web/Pages/Admin/DraftBlogPosts.razor

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@
33
@using LinkDotNet.Domain
44
@attribute [Authorize]
55
@inject IRepository repository
6-
<h3>Draft Blog Posts</h3>
76

8-
<div class="content px-4">
9-
@for (var i = 0; i < blogPosts.Count; i++)
10-
{
11-
<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
12-
}
7+
<div class="page">
8+
<h3>Draft Blog Posts</h3>
9+
10+
<div class="content px-4">
11+
@for (var i = 0; i < blogPosts.Count; i++)
12+
{
13+
<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
14+
}
15+
</div>
1316
</div>
1417

1518
@code {

LinkDotNet.Blog.Web/Pages/Admin/UpdateBlogPostPage.razor

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,20 @@
77
@inject IRepository repository
88
@inject IToastService toastService
99

10-
@if (blogPostFromDb != null)
11-
{
12-
<CreateNewBlogPost
13-
Title="Update BlogPost"
14-
BlogPost="@blogPostFromDb"
15-
OnBlogPostCreated="StoreBlogPostAsync"
16-
ClearAfterCreated="false"></CreateNewBlogPost>
17-
}
18-
else
19-
{
20-
<p>Loading...</p>
21-
}
10+
<div class="page">
11+
@if (blogPostFromDb != null)
12+
{
13+
<CreateNewBlogPost
14+
Title="Update BlogPost"
15+
BlogPost="@blogPostFromDb"
16+
OnBlogPostCreated="StoreBlogPostAsync"
17+
ClearAfterCreated="false"></CreateNewBlogPost>
18+
}
19+
else
20+
{
21+
<p>Loading...</p>
22+
}
23+
</div>
2224

2325
@code {
2426
[Parameter]

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,40 @@
88
@inject IJSRuntime jsRuntime
99
@inherits MarkdownComponentBase
1010

11-
@if (BlogPost == null)
12-
{
13-
<h3>Loading...</h3>
14-
}
15-
else
16-
{
17-
<Title>@BlogPost.Title</Title>
18-
<OgData Title="@BlogPost.Title"
19-
AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl"
20-
Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
21-
Keywords="@Tags"></OgData>
22-
<div class="blog-outer-box">
23-
<div class="content blog-container">
24-
<div class="blog-content">
25-
<header>
26-
<h1>@BlogPost.Title</h1></header>
27-
<div class="blogpost-date">
28-
@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")
29-
</div>
11+
<div class="page">
12+
@if (BlogPost == null)
13+
{
14+
<h3>Loading...</h3>
15+
}
16+
else
17+
{
18+
<Title>@BlogPost.Title</Title>
19+
<OgData Title="@BlogPost.Title"
20+
AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl"
21+
Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
22+
Keywords="@Tags"></OgData>
23+
<div class="blog-outer-box">
24+
<div class="content blog-container">
25+
<div class="blog-content">
26+
<header>
27+
<h1>@BlogPost.Title</h1></header>
28+
<div class="blogpost-date">
29+
@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")
30+
</div>
3031

31-
<div class="admin-action">
32-
<BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
33-
</div>
32+
<div class="admin-action">
33+
<BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
34+
</div>
3435

35-
<div class="blogpost-content">
36-
@(RenderMarkupString(BlogPost.Content))
36+
<div class="blogpost-content">
37+
@(RenderMarkupString(BlogPost.Content))
38+
</div>
3739
</div>
40+
<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
3841
</div>
39-
<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
4042
</div>
41-
</div>
42-
}
43+
}
44+
</div>
4345

4446
@code {
4547
[Parameter]

LinkDotNet.Blog.Web/Pages/Index.razor

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,27 @@
1010
<OgData Title="@(Markdown.ToPlainText(appConfiguration.BlogName))"
1111
AbsolutePreviewImageUrl="@GetAbsolutePreviewImageUrl()"
1212
Description="@(Markdown.ToPlainText(appConfiguration.Introduction.Description))"></OgData>
13-
<section>
13+
<section class="introduction">
1414
<IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
15+
</section>
1516

16-
<div class="content px-4">
17+
<section>
18+
<header>
19+
<div class="recent-posts">
20+
<h1>Recent Posts</h1>
21+
</div>
22+
</header>
23+
<div class="content px-4 my-2">
1724
@for (var i = 0; i < currentPage.Count; i++)
1825
{
1926
<ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
2027
}
2128
</div>
2229
<BlogPostNavigation CurrentPage="@currentPage" OnPageChanged="@GetPage"></BlogPostNavigation>
2330
</section>
31+
2432
@code {
25-
IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(Array.Empty<BlogPost>(), 1, 1);
33+
IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
2634

2735
protected override async Task OnInitializedAsync()
2836
{
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.blogpost-cards {
2+
background-color: var(--blog-post-background-color);
3+
margin: 1rem auto 1.6%;
4+
}
5+
6+
.recent-posts {
7+
text-align:center;
8+
padding-top: 10px;
9+
}
10+
11+
.recent-posts h1 {
12+
font-size: 2.5em;
13+
vertical-align:middle;
14+
margin: auto;
15+
padding-top: 75px;
16+
padding-bottom: 20px;
17+
}

LinkDotNet.Blog.Web/Pages/Search.razor

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
@using LinkDotNet.Infrastructure.Persistence
33
@using LinkDotNet.Domain
44
@inject IRepository repository
5-
<h3>Results for @SearchTerm</h3>
65

7-
<div class="content px-4">
8-
@for (var i = 0; i < blogPosts.Count; i++)
9-
{
10-
<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
11-
}
12-
</div>
6+
<div class="page">
7+
<h3>Results for @SearchTerm</h3>
138

9+
<div class="content px-4">
10+
@for (var i = 0; i < blogPosts.Count; i++)
11+
{
12+
<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
13+
}
14+
</div>
15+
</div>
1416
@code {
1517
[Parameter]
1618
public string SearchTerm { get; set; }

LinkDotNet.Blog.Web/Pages/SearchByTag.razor

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
@inject IRepository repository
66

77
<Title>Search for tag: @Tag</Title>
8-
<h3>All posts with Tag <em>@Tag</em></h3>
98

10-
@for (var i = 0; i < blogPosts.Count; i++)
9+
<div class="page">
10+
<h3>All posts with Tag <em>@Tag</em></h3>
11+
12+
@for (var i = 0; i < blogPosts.Count; i++)
1113
{
1214
<ShortBlogPost BlogPost="blogPosts[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
1315
}
14-
16+
</div>
1517
@code {
1618
[Parameter]
1719
public string Tag { get; set; }

LinkDotNet.Blog.Web/Pages/_Host.cshtml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<meta name="theme-color" content="#ffffff">
2323
<link rel="preload" href="css/bootstrap/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"></noscript>
2424
<link href="css/site.css" rel="stylesheet"/>
25+
<link href="css/basic.css" rel="stylesheet"/>
2526
<link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
2627
<link rel="preload" href="_content/Blazored.Toast/blazored-toast.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="_content/Blazored.Toast/blazored-toast.min.css"></noscript>
2728
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
@using LinkDotNet.Domain
22
@inherits MarkdownComponentBase
33

4-
<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);" class="introduction-container">
5-
<div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
4+
<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);"
5+
class="inverted-colors introduction-background">
6+
<div class="introduction-container">
7+
<div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
68

7-
</div>
8-
<div class="profile-text">
9-
@RenderMarkupString(Introduction.Description)
9+
</div>
10+
<div class="profile-text">
11+
@RenderMarkupString(Introduction.Description)
12+
</div>
1013
</div>
1114
</div>
1215
@code {

0 commit comments

Comments
 (0)