adjust platform web cert print style to look like web rendering; fix signatory layouts

lms/static/certificates/sass/_components.scss

@@ -309,6 +309,7 @@
         .signatory-credentials {
 
             .role, .organization {
+                white-space: pre-line;
                 display: block;
             }
         }

lms/static/certificates/sass/_layouts.scss

@@ -276,7 +276,7 @@
             .signatory-signature {
                 display: block;
                 max-width: 100%;
-                height: rem(100);
+                max-height: rem(100);
                 padding: spacing-vertical(small) spacing-horizontal(small);
             }
         }

lms/static/certificates/sass/_print.scss

@@ -72,12 +72,14 @@
     }
 
     body {
-        margin: spacing-vertical(base) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
+        height: auto;
+        margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
         padding: 0;
     }
 
     .wrapper-view {
         margin-bottom: 0 !important;
+
     }
 }
 
@@ -178,8 +180,8 @@
     }
 
     .copy-micro {
-        font-size: font-size(x-small);
-        line-height: line-height(small);
+        font-size: font-size(xx-small);
+        line-height: line-height(x-small);
     }
 
     // accomplishment
@@ -204,46 +206,57 @@
             border: none !important;
         }
 
+        .wrapper-statement-and-signatories {
+            border-bottom: rem(2) solid palette(grayscale-cool, x-light);
+        }
+
         .accomplishment-statement {
             @extend %print-rendering-section;
-            @include text-align(left);
+            width: span(8);
+            margin: 0 auto;
         }
 
-        .accomplishment-course,
-        .accomplishment-recipient,
         .accomplishment-summary,
         .accomplishment-statement-detail {
-            width: 100% !important;
-            margin-left: 0;
-            margin-right: 0;
+            margin-bottom: spacing-vertical(mid-small);
         }
 
-        .wrapper-statement-and-signatories {
-            @include span(8 first);
+        .wrapper-orgs::after {
+            display: none;
         }
 
         .accomplishment-orgs {
-            @include span(4 last);
-            margin-bottom: 0;
+            margin-bottom: 0 !important;
             border-bottom: none !important;
             padding-bottom: 0 !important;
 
             .wrapper-organization {
-                @include gallery(2 of 4);
+                height: rem(48);
+                margin-top: spacing-vertical(mid-small) !important;
                 margin-bottom: spacing-vertical(mid-small) !important;
             }
+
+            .organization-logo {
+                max-width: 100%;
+                max-height: 80%;
+            }
         }
 
         .accomplishment-signatories {
             @extend %print-rendering-section;
             @include span(12 last);
 
-            .signatory {
-                @include gallery(3);
+            .signatory-credentials {
+                font-size: 8pt;
+                line-height: 1.3;
             }
 
             .signatory-signature {
-                // height: rem(60) !important;
+                height: spacing-vertical(small);
+                max-width: 100%;
+                margin-top: 0;
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
             }
 
             .signatory-name {
@@ -264,7 +277,7 @@
         }
     }
 
-    .wrapper-accomplishment-metadata {
+    .layout-accomplishment .wrapper-accomplishment-metadata {
         margin-bottom: 0;
     }
 

lms/templates/certificates/_accomplishment-rendering.html

@@ -51,7 +51,7 @@ course_mode_class = course_mode if course_mode else ''
 
                                     <h4 class="signatory-name hd-5">${signatory['name']}</h4>
                                     <p class="signatory-credentials copy copy-micro">
-                                        <span class="role">${signatory['title']|linebreaks}</span>
+                                        <span class="role">${signatory['title']}</span>
                                         <span class="organization">${signatory['organization']}</span>
                                     </p>
                                 </div>
@@ -69,7 +69,7 @@ course_mode_class = course_mode if course_mode else ''
                 <ul class="wrapper-orgs list-orgs">
                     <li class="wrapper-organization">
                         <div class="organization organization-edX">
-                            <img class="organization-logo" src="${static.url('/static/certificates/images/logo-edx.png')}" alt="${platform_name}">
+                            <img class="organization-logo" src="${logo_src}" alt="${platform_name}">
                         </div>
                     </li>