Add design

docs/en/Getting-Started-Create-Solution-Single-Layer.md

@@ -8,6 +8,20 @@
 }
 ````
 
+````json
+//[doc-nav]
+{
+  "Next": {
+    "Name": "Running the solution",
+    "Path": "Getting-Started-Running-Solution-Single-Layer"
+  },
+  "Previous": {
+    "Name": "Introduction",
+    "Path": "Introduction"
+  }
+}
+````
+
 > This document assumes that you prefer to use **{{ UI_Value }}** as the UI framework and **{{ DB_Value }}** as the database provider. For other options, please change the preference on top of this document.
 
 ## Create a New Project
@@ -45,8 +59,4 @@ Configure<AbpUnitOfWorkDefaultOptions>(options =>
 
 > Or you can delete that code since `Auto` is already the default behavior.
 
-{{ end }}
-
-## Next Step
-
-* [Running the solution](Getting-Started-Running-Solution-Single-Layer.md)
+{{ end }}

modules/docs/src/Volo.Docs.Web/HtmlConverting/DocumentNavigationsDto.cs

@@ -1,7 +1,13 @@
+using System;
+
 namespace Volo.Docs.HtmlConverting;
 
 public class DocumentNavigationsDto
 {
     public DocumentNavigationDto Previous { get; set; }
     public DocumentNavigationDto Next { get; set; }
+    
+    public bool HasPrevious => Previous?.Path.IsNullOrEmpty() == false;
+    public bool HasNext => Next?.Path.IsNullOrEmpty() == false;
+    public bool HasValues => HasPrevious || HasNext;
 }

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@@ -388,6 +388,30 @@
                                 </abp-alert>
                             }
                             @Html.Raw(Model.Document.Content)
+                            
+                            @if (Model.DocumentNavigationsDto.HasValues)
+                            {
+                                <hr/>
+                                <div class="navigation">
+                                    @if (Model.DocumentNavigationsDto.HasPrevious)
+                                    {
+                                        <a class="prev-link" href="@Model.CreateDocumentLink(Model.DocumentNavigationsDto.Previous.Path)">
+                                            <span class="desc">
+                                                <i class="fa fa-chevron-left"></i>
+                                                @L["Previous"]
+                                            </span>
+                                            <span class="title">@Model.DocumentNavigationsDto.Previous.Name</span>
+                                        </a>
+                                    }
+                                    @if (Model.DocumentNavigationsDto.HasNext)
+                                    {
+                                        <a class="next-link" href="@Model.CreateDocumentLink(Model.DocumentNavigationsDto.Next.Path)">
+                                            <span class="desc">@L["Next"]  <i class="fa fa-chevron-right"></i></span>
+                                            <span class="title">@Model.DocumentNavigationsDto.Next.Name</span>
+                                        </a>
+                                    }
+                                </div>
+                            }
                         </article>
 
                         <div id="crawler_link" style="display:none;">

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACI;EACI;EACA;EACA;;;AAKJ;EACI;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA","file":"Index.css"}

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACI,8BACI,4BACA,4CACA,uBAKJ,+BACI,0CAIR,YACI,aACA,8BAEA,8CACI,qBACA,cAEA,0DACI,eACA,cACA,cAGJ,4DACI,gBACA,eACA,cAIR,uBACI,iBACA","file":"Index.min.css"}

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.css

@@ -1,8 +1,34 @@
 .code-toolbar .line-highlight {
   margin-top: 1.5em !important;
   background: rgba(233, 237, 241, 0.34) !important;
-  padding: 1px !important; }
+  padding: 1px !important;
+}
 
-.input-group .input-group-text{
-    background-color: transparent!important;
-}
+.input-group .input-group-text {
+  background-color: transparent !important;
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+}
+.navigation .next-link, .navigation .prev-link {
+  display: inline-block;
+  max-width: 48%;
+}
+.navigation .next-link .desc, .navigation .prev-link .desc {
+  font-size: 16px;
+  color: #0D6EFD;
+  display: block;
+}
+.navigation .next-link .title, .navigation .prev-link .title {
+  font-weight: 600;
+  font-size: 18px;
+  color: #0B1621;
+}
+.navigation .next-link {
+  margin-left: auto;
+  text-align: right;
+}
+
+/*# sourceMappingURL=Index.css.map */

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.min.css

@@ -1 +1 @@
-.code-toolbar .line-highlight{margin-top:1.5em !important;background:rgba(233,237,241,.34) !important;padding:1px !important;} .input-group .input-group-text{background-color: transparent!important;}
+.code-toolbar .line-highlight{margin-top:1.5em !important;background:rgba(233,237,241,.34) !important;padding:1px !important}.input-group .input-group-text{background-color:rgba(0,0,0,0) !important}.navigation{display:flex;justify-content:space-between}.navigation .next-link,.navigation .prev-link{display:inline-block;max-width:48%}.navigation .next-link .desc,.navigation .prev-link .desc{font-size:16px;color:#0d6efd;display:block}.navigation .next-link .title,.navigation .prev-link .title{font-weight:600;font-size:18px;color:#0b1621}.navigation .next-link{margin-left:auto;text-align:right}/*# sourceMappingURL=Index.min.css.map */

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss

@@ -10,4 +10,31 @@
     .input-group-text{
         background-color: transparent!important;
     }
-}
+}
+
+.navigation {
+    display: flex;
+    justify-content: space-between;
+
+    .next-link, .prev-link {
+        display: inline-block;
+        max-width: 48%;
+
+        .desc {
+            font-size: 16px;
+            color: #0D6EFD;
+            display: block;
+        }
+
+        .title {
+            font-weight: 600;
+            font-size: 18px;
+            color: #0B1621;
+        }
+    }
+
+    .next-link {
+        margin-left: auto;
+        text-align: right;
+    }
+}