TD-6095- Modified CSS to fix certificate view.

Author: Auldrin-Possa

DigitalLearningSolutions.Web/Styles/learningPortal/selfassessmentcertificate.scss

@@ -99,22 +99,22 @@
   width: 100%;
 }
 
-.pg-2 {
+.certificate .pg-2 {
   background-color: white;
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100%;
   max-width: 210mm;
   min-height: 297mm;
   margin: 0;
   position: relative;
   background: white;
 }
 
-.pg-2 .body {
+.certificate .pg-2 .body {
   padding: 50px;
+  flex: 1;
 }
 
 .activity {
@@ -126,6 +126,7 @@
 
 .activity p, ul {
   width: 100%;
+  word-break: break-word;
 }
 
 .activity ul {
@@ -157,12 +158,6 @@
   .certificate .pg-1 {
     width: 100%;
   }
-
-
-
-  .pg-2 {
-    width: 100%;
-  }
 }
 
 .certificate h1 {
@@ -378,18 +373,21 @@
   .certificate .nhsuk-u-margin-bottom-2 {
     margin-bottom: 8px !important;
   }
- }
+}
+
 @media screen and (max-width: 767px) {
   .certificate {
-    width: 95%;
+    width: 100%;
     justify-content: space-around;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     -webkit-print-color-adjust: exact;
   }
+
   .certificate .pg-1 {
-    width: 95%;
+    width: 100%;
   }
+
   .pg-2 {
-    width: 95%;
+    width: 100%;
   }
 }

DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/CompetencySelfAssessmentCertificate.cshtml

@@ -11,7 +11,7 @@
         padding: 0 0;
     }
 
-    .nhsuk-width-container {
+    .nhsuk-grid-row {
         margin: 0;
     }
 
@@ -49,8 +49,8 @@
             {
                 <li class="nhsuk-breadcrumb__item">
                     <a class="nhsuk-breadcrumb__link trigger-loader " asp-controller="LearningPortal"
-                   asp-action="SelfAssessmentOverview" asp-route-vocabulary="@Model.VocabPlural"
-                   asp-route-selfAssessmentId="@Model.CompetencySelfAssessmentCertificates.SelfAssessmentID">
+                       asp-action="SelfAssessmentOverview" asp-route-vocabulary="@Model.VocabPlural"
+                       asp-route-selfAssessmentId="@Model.CompetencySelfAssessmentCertificates.SelfAssessmentID">
                         &lt; Back
                     </a>
                 </li>
@@ -59,9 +59,9 @@
             {
                 <li class="nhsuk-breadcrumb__item">
                     <a class="nhsuk-breadcrumb__link trigger-loader" asp-controller="Supervisor"
-                   asp-action="ReviewDelegateSelfAssessment"
-                   asp-route-supervisorDelegateId="@Model.LoggedInSupervisorDelegateId"
-                   asp-route-candidateAssessmentId="@Model.CompetencySelfAssessmentCertificates.CandidateAssessmentID">
+                       asp-action="ReviewDelegateSelfAssessment"
+                       asp-route-supervisorDelegateId="@Model.LoggedInSupervisorDelegateId"
+                       asp-route-candidateAssessmentId="@Model.CompetencySelfAssessmentCertificates.CandidateAssessmentID">
                         &lt; Back
                     </a>
                 </li>
@@ -76,15 +76,15 @@
             <h1>Certificate</h1>
 
             <h2>@Model.CompetencySelfAssessmentCertificates.SelfAssessment - @Model.CompetencySelfAssessmentCertificates.LearnerName </h2>
-             @if (Model.Vocabulary == "Proficiencies")
+            @if (Model.Vocabulary == "Proficiencies")
             {
                 <a class="nhsuk-button "
-                asp-controller="LearningPortal"
-               asp-route-candidateAssessmentId="@Model.CompetencySelfAssessmentCertificates.CandidateAssessmentID"
-               asp-action="DownloadCertificate"
-               role="button">
-                Download certificate
-            </a>
+                   asp-controller="LearningPortal"
+                   asp-route-candidateAssessmentId="@Model.CompetencySelfAssessmentCertificates.CandidateAssessmentID"
+                   asp-action="DownloadCertificate"
+                   role="button">
+                    Download certificate
+                </a>
             }
             @if (Model.Vocabulary == "ProfileAssessment")
             {
@@ -99,9 +99,9 @@
         </div>
         <div class="certificate nhsuk-grid-column-full">
             <partial name="_SelfAssessmentCertificateFirstPage.cshtml" model=Model />
-            <br /><br />
+            <br />
             <partial name="_SelfAssessmentCertificateSecondPage.cshtml" model=Model />
-        
+
         </div>
     </div>
 </div>