blog enhancements part 1

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

@@ -43,8 +43,9 @@
                                     </h2>
                                     <p class="article-sum">
                                         @Html.Raw(GetShortContent(post.Content))
-                                        <a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">Continue Reading</a>
                                     </p>
+                                    <a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="read-more-btn">Continue Reading &#8594;</a>
+
                                 </div>
                                 @if (post.Writer != null)
                                 {
@@ -113,7 +114,7 @@
                                                         }
                                                         <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] 
+                                                        <i class="fa fa-comment"></i>  @L["CommentWithCount", post.CommentCount]
                                                     </div>
                                                 </div>
                                             </div>
@@ -157,11 +158,12 @@
                                             </h3>
                                             <p>
                                                 @Html.Raw(GetShortContent(post.Content))
-                                                <a asp-page="./Detail" asp-route-postUrl="@post.Url"  asp-route-blogShortName="@Model.BlogShortName">Continue Reading</a>
                                             </p>
+                                            <a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="read-more-btn">Continue Reading &#8594;</a>
+
                                             <div class="article-owner">
                                                 <div class="article-infos">
-                                                    <div class="user-card">  
+                                                    <div class="user-card">
                                                         <div class="row">
                                                             <div class="col-auto pr-1">
                                                                 <img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar" />
@@ -198,14 +200,11 @@
                         <div class="vs-blog-title">
                             <h2>@L["PopularTags"]</h2>
                         </div>
-                        <div class="list-group small-list popular-tags">
+                        <div class="tags">
                             @foreach (var popularTag in Model.PopularTags)
-                            {
-                                <div class="list-group-item">
-                                    <a asp-page="/Blogs/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <span>(@popularTag.UsageCount @L["Posts"])</span></a>
-                                </div>
-
-                            }
+                                { 
+                                    <a class="tag" asp-page="/Blogs/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <small>(@popularTag.UsageCount)</small></a>
+                                }
                         </div>
                     </div>
                 }

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/_bootstrap-overwrite.scss

@@ -71,7 +71,7 @@ input, select, textarea, .form-control, .btn {
 
         & + .list-group-item {
             border-top: 1px solid #f5f5f5;
-            padding: 45px 0 30px;
+            padding: 35px 0 30px;
         }
 
         h3 {
@@ -104,5 +104,9 @@ input, select, textarea, .form-control, .btn {
 }
 .font-125 {
     font-size: 1.125em;
-} 
- 
+}
+pre { 
+    background: #eee;
+    padding: 25px 30px;
+    margin: 1em 0 2em 0;
+}

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/_post.scss

@@ -48,7 +48,15 @@
     }
 
 }
-
+.read-more-btn {
+    display: inline-block;
+    font-size: .9em;
+    margin: 0 0 1em 0;
+    background: #eee; 
+    color: blue;
+    padding: .25em 1em;
+    border-radius: 20px; 
+}
 .comment-area {
     background: #f5f5f5;
     margin: 1.5rem 0;

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.css

@@ -56,7 +56,7 @@
       background: none; }
     div.vs-blog .list-group .list-group-item + .list-group-item {
       border-top: 1px solid #f5f5f5;
-      padding: 45px 0 30px; }
+      padding: 35px 0 30px; }
     div.vs-blog .list-group .list-group-item h3 {
       margin-top: 0; }
   div.vs-blog .list-group.small-list .list-group-item {
@@ -73,6 +73,10 @@
     font-size: 1em; }
   div.vs-blog .font-125 {
     font-size: 1.125em; }
+  div.vs-blog pre {
+    background: #eee;
+    padding: 25px 30px;
+    margin: 1em 0 2em 0; }
   div.vs-blog .vs-blog-title {
     padding-bottom: 15px;
     margin-bottom: 25px;
@@ -236,6 +240,14 @@
     font-size: .95em; }
     div.vs-blog .media .media {
       font-size: .95em; }
+  div.vs-blog .read-more-btn {
+    display: inline-block;
+    font-size: .9em;
+    margin: 0 0 1em 0;
+    background: #eee;
+    color: blue;
+    padding: .25em 1em;
+    border-radius: 20px; }
   div.vs-blog .comment-area {
     background: #f5f5f5;
     margin: 1.5rem 0;