UserDetail page improved

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

@@ -28,34 +28,37 @@
                     <div class="card-body">
                         <div class="text-center">
                             <div class="position-relative d-inline-block">
-                                <img gravatar-email="@Model.User.Email" default-image="Identicon" class="post-member-img rounded-circle d-block mx-auto" />
+                                <img gravatar-email="@Model.User.Email" default-image="Identicon" id="profile-photo" class="post-member-img rounded-circle d-block mx-auto" />
                             </div>
                         </div>
                         <div class="d-inline-block align-top text-left ml-3">
                             @if (Model.User.Name != null && Model.User.Surname != null)
                             {
-                                <h2 class="m-0">@Model.User.Name @Model.User.Surname</h2> 
-                            }
+                                <h2 class="m-0 custom-heading">
+                                    @Model.User.Name @Model.User.Surname
+                                </h2>}
                             @if (Model.User.Company != null)
                             {
-                                <h4 class="m-0">@Model.User.Company</h4>
+                                <h4 class="m-0 company-jobtitle">@Model.User.Company</h4>
                             }
+
                             @if (Model.User.JobTitle != null)
                             {
-                                <h4>@Model.User.JobTitle</h4>
+                                <h4 class="company-jobtitle">@Model.User.JobTitle</h4>
                             }
 
-                            <small class="d-block">@L["UserName"].Value.ToUpper()</small>
-                            <h5>@Model.User.UserName</h5>
+                            <small class="d-block custom-small">@L["UserName"].Value.ToUpper()</small>
+                            <h5 class="username-website">@Model.User.UserName</h5>
 
                             @if (Model.User.WebSite != null)
                             {
-                                <small>@L["PersonalWebsite"].Value.ToUpper()</small>
-                                <h5>
+                                <small class="custom-small">@L["PersonalWebsite"].Value.ToUpper()</small>
+                                <h5 class="username-website">
                                     <a href="@Model.User.WebSite">@Model.User.WebSite</a>
                                 </h5>
                             }
 
+
                             @if (Model.User.Twitter != null || Model.User.Github != null || Model.User.Linkedin != null)
                             {
                                 <small>@L["Social"].Value.ToUpper()</small>

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

@@ -4,4 +4,29 @@
 
 #gravatar {
     margin: 10px; 
-}
+}
+
+#profile-photo {
+    margin-bottom: 10px;
+}
+
+.custom-heading {
+    margin-bottom: 20px !important;
+    font-size: 28px !important;
+}
+
+.company-jobtitle {
+    font-size: 16px !important;
+    font-weight: 300 !important;
+    margin-bottom: 20px;
+}
+
+.username-website {
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    margin-bottom: 20px;
+}
+
+.custom-small {
+    display: block;
+}