user interface edits have been made

modules/blogging/src/Volo.Blogging.Domain.Shared/Volo/Blogging/Localization/Resources/en.json

@@ -59,6 +59,7 @@
     "ClearCacheConfirmationMessage": "Are you sure you want to clear the cache?",
     "MarkdownSupported": "Markdown is supported",
     "FileUploadInfo": "Drag, drop, or paste a copied image.",
-    "PostDescriptionHint": "* Will be rendered in the article link preview, supports HTML"
+    "PostDescriptionHint": "* Will be rendered in the article link preview, supports HTML",
+    "ReadMore": "Continue Reading"
   }
 }

modules/blogging/src/Volo.Blogging.Web/Helpers/PostCoverImageHelper.cs

@@ -0,0 +1,48 @@
+using System;
+using System.Linq;
+
+namespace Volo.Blogging.Helpers;
+
+public static class PostCoverImageHelper
+{
+    private static readonly string[] PostColors =
+    {
+        "linear-gradient(135deg, #4b2d21 0%, #7d4b37 100%)",
+        "linear-gradient(135deg, #41003d 0%, #a10097 100%)",
+        "linear-gradient(135deg, #163e4b 0%, #297791 100%)",
+        "linear-gradient(135deg, #660040 0%, #aa006b 100%)",
+        "linear-gradient(135deg, #240d88 0%, #571fff 100%)",
+        "linear-gradient(135deg, #0d6a88 0%, #16b0e1 100%)",
+        "linear-gradient(135deg, #329063 0%, #4be099 100%)",
+        "linear-gradient(135deg, #904432 0%, #f07153 100%)",
+        "linear-gradient(135deg, #903282 0%, #e04cca 100%)",
+        "linear-gradient(135deg, #901943 0%, #f02a70 100%)",
+        "linear-gradient(135deg, #2e634a 0%, #4da57b 100%)",
+        "linear-gradient(135deg, #9c003f 0%, #e41d6f 100%)",
+        "linear-gradient(135deg, #806419 0%, #d5a72a 100%)",
+        "linear-gradient(135deg, #545975 0%, #8890bd 100%)",
+        "linear-gradient(135deg, #67172a 0%, #ba2549 100%)"
+    };
+
+    public static string GetRandomColor(string postTitle)
+    {
+        long total = postTitle.Truncate(32).ToCharArray().Sum(c => c);
+        return PostColors[total % PostColors.Length];
+    }
+
+    public static string GetTitleCapitals(string postTitle)
+    {
+        if (postTitle.Length < 2)
+        {
+            return postTitle.ToUpperInvariant();
+        }
+
+        if (postTitle.Contains(" "))
+        {
+            var splitted = postTitle.Split(" ");
+            return (splitted[0][0].ToString() + splitted[1][0].ToString()).ToUpperInvariant();
+        }
+
+        return postTitle.ToUpperInvariant().Left(2);
+    }
+}

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml

@@ -65,14 +65,19 @@
                                             <div class="col-auto pe-1">
                                                 @if (Model.Post.Writer != null)
                                                 {
-                                                    <img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar" />
+                                                    <a href="/Members/@Model.Post.Writer.UserName">
+                                                        <img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar"/>
+                                                    </a>
                                                 }
                                             </div>
                                             <div class="col ps-1">
                                                 @if (Model.Post.Writer != null)
                                                 {
-                                                    <h5 class="mt-2 mb-1">@(Model.Post.Writer.UserName) <span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(Model.Post.CreationTime)</span></h5>
+                                                    <a href="/Members/@Model.Post.Writer.UserName">
-
+                                                        <h5 class="mt-2 mb-1">
+                                                            @(Model.Post.Writer.UserName) <span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(Model.Post.CreationTime)</span>
+                                                        </h5>
+                                                    </a>
                                                 }
 
                                                 <i class="fa fa-eye"></i> @L["WiewsWithCount", @Model.Post.ReadCount]

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Index.cshtml

@@ -59,11 +59,17 @@
                                             <div class="user-card">
                                                 <div class="row">
                                                     <div class="col-auto pe-1">
-                                                        <img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar" />
+                                                        <a href="/Members/@post.Writer.UserName">
+                                                            <img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar"/>
+                                                        </a>
                                                     </div>
                                                     <div class="col ps-1">
-                                                        <h5 class="mt-2 mb-1">@post.Writer.UserName <span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(post.CreationTime)</span></h5>
+                                                        <a href="/Members/@post.Writer.UserName">
-                                                        <i class="fa fa-eye"></i>  @L["WiewsWithCount", post.ReadCount]
+                                                            <h5 class="mt-2 mb-1">
+                                                                @post.Writer.UserName <span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(post.CreationTime)</span>
+                                                            </h5>
+                                                        </a>
+                                                        <i class="fa fa-eye"></i> @L["WiewsWithCount", post.ReadCount]
                                                         @*<span class="vs-seperator">|</span>
                                                         <i class="fa fa-comment"></i>  @L["CommentWithCount", post.CommentCount]*@
                                                     </div>

modules/blogging/src/Volo.Blogging.Web/Pages/Members/Index.cshtml

@@ -1,13 +1,19 @@
 @page
-@using System.Text
 @using Microsoft.Extensions.Localization
-@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Alert
+@using Volo.Abp.AspNetCore.Mvc.UI.Bundling.TagHelpers
 @using Volo.Abp.Users
+@using Volo.Blogging.Helpers
 @using Volo.Blogging.Localization
 @model Volo.Blogging.Pages.Members.IndexModel
 @inject IStringLocalizer<BloggingResource> L
 @inject ICurrentUser CurrentUser
+@{
+    ViewBag.Title = @Model.User.UserName.ToUpper() + " - " + L["Blogs"].Value;
+}
 
+@section styles {
+    <abp-style src="/Pages/Members/Index.css"/>
+}
 
 
 <main class="pt-4" id="MemberDetail">
@@ -16,21 +22,13 @@
             <div class="col-md-4 mb-5 mb-md-0">
                 <div class="card h-auto member-profile-info">
                     <div class="card-body">
-                        @if (Model.User.UserName == CurrentUser.UserName)
+                        <div class="d-inline-block position-relative">
-                        {
+                            <img src="https://localhost:44333/api/account/profile-picture-file/@Model.User.Id" class="post-member-img rounded-circle d-block">
-                            <div class="d-inline-block position-relative">
+                        </div>
-                                <img src="~/assets/noimg-user.jpeg" loading="lazy" data-src="https://localhost:44300/api/account/profile-picture-file/ + @Model.User.Id" class="profile-pic"/>
-                            </div>
-                        }
-                        else
-                        {
-                            <img src="~/assets/noimg-user.jpeg" loading="lazy" data-src="https://localhost:44300/api/account/profile-picture-file/ + @Model.User.Id" class="profile-pic"/>
-                        }
                         @if (Model.User.UserName != null)
                         {
                             <h2 class="m-0">@Model.User.UserName</h2>
                         }
-
                         <small class="d-block">@L["UserName"].Value.ToUpper()</small>
                         <h5>@Model.User.UserName</h5>
                     </div>
@@ -38,7 +36,7 @@
             </div>
             <div class="col-md-8">
                 <abp-tabs>
-                    <abp-tab name="all-posts" title="All @L["Blogs"].Value">
+                    <abp-tab name="all-posts" title="All Blogs">
                         <div class="mt-4 pt-3">
                             @foreach (var post in Model.Posts)
                             {
@@ -46,8 +44,12 @@
                                     <div class="post-type-cont">
 
                                         <a href="/members/@Model.User.UserName" class="text-decoration-none">
-                                            <img src="~/assets/noimg-user.jpeg" data-src="https://localhost:44300/api/account/profile-picture-file/@Model.User.Id" class="post-member-img rounded-circle d-block">
+                                            <img src="https://localhost:44333/api/account/profile-picture-file/@Model.User.Id" class="post-member-img rounded-circle d-block">
                                         </a>
+                                        <span class="post-type">
+                                            <i class="fas fa-pen-nib"></i>
+                                            @L["Blog"].Value.ToUpper()
+                                        </span>
                                     </div>
                                     <div class="post-detail-cont">
                                         <div class="post-info fs-12 mb-2">
@@ -57,23 +59,22 @@
                                             <span class="text-dark-200 dot">@post.CreationTime.ToString("MMMM yyyy")</span>
                                             <span class="text-dark-200">@post.ReadCount.ToString() @L["Views"]</span>
                                         </div>
-
                                         <h3 class="post-title mb-3">
-                                            @if ((post.Title).Any())
+                                            <a href="/">
-                                            {
-                                                @foreach (var highlight in post.Title)
-                                                {
-                                                    @Html.Raw(highlight)
-                                                }
-                                            }
-                                            else
-                                            {
                                                 @post.Title
-                                            }
+                                            </a>
                                         </h3>
+                                        <p class="post-desc">
+                                            <a href="/">
+                                                @(post.Description.Length >= 150 ? post.Description.Substring(0, 150) + "..." : post.Description)
+                                            </a>
+                                            <a href="/" class="readMore">@L["ReadMore"]</a>
+                                        </p>
                                     </div>
                                     <div class="post-img-cont">
-                                        <img src="~/assets/noimg.png" data-src="@post.CoverImage" class="" loading="lazy"/>
+                                        <div class="post-list-span text-center post" style="background: @(PostCoverImageHelper.GetRandomColor(post.Title))">
+                                                                <span>@PostCoverImageHelper.GetTitleCapitals(post.Title)</span>
+                                                            </div>
                                     </div>
                                 </div>
                             }

modules/blogging/src/Volo.Blogging.Web/Pages/Members/Index.cshtml.cs

@@ -2,6 +2,7 @@ using System.Collections.Generic;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
+using Volo.Blogging.Blogs.Dtos;
 using Volo.Blogging.Members;
 using Volo.Blogging.Posts;
 

modules/blogging/src/Volo.Blogging.Web/Pages/Members/Index.css

@@ -0,0 +1,3 @@
+.post-desc {
+    overflow-wrap: break-word;
+}