Added basic print button (#130)

Co-authored-by: Tom Whittington <[email protected]>

src/Dfe.ContentSupport.Web/Models/Mapped/CsPage.cs

@@ -11,6 +11,7 @@ public class CsPage
     public bool HasCitation { get; set; }
     public bool ShowVerticalNavigation { get; set; }
     public bool HasBackToTop { get; set; }
+    public bool HasPrint { get; set; }
     public List<CsContentItem> Content { get; set; } = null!;
     public DateTime? CreatedAt { get; init; }
     public DateTime? UpdatedAt { get; init; }

src/Dfe.ContentSupport.Web/Services/ModelMapper.cs

@@ -25,6 +25,7 @@ public CsPage MapToCsPage(ContentSupportPage incoming)
             IsSitemap = incoming.IsSitemap,
             HasCitation = incoming.HasCitation,
             HasBackToTop = incoming.HasBackToTop,
+            HasPrint = incoming.HasPrint,
             Content = MapEntriesToContent(incoming.Content),
             ShowVerticalNavigation = incoming.ShowVerticalNavigation,
             CreatedAt = incoming.Sys.CreatedAt,

src/Dfe.ContentSupport.Web/ViewModels/ContentSupportPage.cs

@@ -14,6 +14,7 @@ public class ContentSupportPage : ContentBase
     public bool IsSitemap { get; init; }
     public bool HasCitation { get; init; }
     public bool HasBackToTop { get; init; }
+    public bool HasPrint { get; init; }
     public bool ShowVerticalNavigation { get; init; }
 
 }

src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml

@@ -28,19 +28,24 @@
 
         @foreach (var content in Model.Content)
         {
-            <partial name="_Content" model="@content" />
+            <partial name="_Content" model="@content"/>
         }
     </div>
 
     <div class="govuk-grid-column-full">
         @if (Model.HasCitation)
         {
-            <partial name="_Citation" model="Model" />
+            <partial name="_Citation" model="Model"/>
         }
 
         @if (Model.HasBackToTop)
         {
-            <partial name="_BackToTop" />
+            <partial name="_BackToTop"/>
+        }
+
+        @if (Model.HasPrint)
+        {
+            <partial name="_Print"/>
         }
     </div>
 </div>

src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml

@@ -0,0 +1,3 @@
+<div class="print-button">
+    <button class="govuk-link print-link-button" data-module="print-link" onclick="window.print()">Print this page</button>
+</div>

src/Dfe.ContentSupport.Web/wwwroot/css/cands-site.css

@@ -345,7 +345,7 @@ dl.gem-c-metadata__list {
     }
 
     .dfe-vertical-nav__section--nested .dfe-vertical-nav__section-item::before {
-        content: "—";
+        content: "�";
         margin-left: -20px;
         color: #505a5f;
     }
@@ -401,3 +401,22 @@ dl.gem-c-metadata__list {
         .dfe-vertical-nav__section .dfe-vertical-nav__section.dfe-vertical-nav__section-item--current .dfe-vertical-nav__link {
             font-weight: 700;
         }
+
+.print-link-button {
+    background: url(/assets/icon-print.png) no-repeat 10px 50%;
+    background-size: 16px 18px;
+    padding: 10px 10px 10px 36px;
+    border: 1px solid #b1b4b6;
+    color: #1d70b8;
+    cursor: pointer;
+    margin: 0;
+    margin-bottom: 15px;
+    font-weight: 400;
+    font-size: 14px;
+    font-size: 0.875rem;
+    line-height: 1.1429;
+}
+
+.print-button {
+    margin-top: 2rem;
+}