Merge pull request #10120 from edx/frances/fix/repo-cert-template-bugs

Platform Web Cert template fixes

cms/static/js/certificates/views/signatory_editor.js

@@ -172,7 +172,7 @@ function ($, _, Backbone, gettext,
             event.preventDefault();
             var upload = new FileUploadModel({
                 title: gettext("Upload signature image."),
-                message: gettext("Image must be 450px X 150px transparent PNG."),
+                message: gettext("Image must be in PNG format."),
                 mimeTypes: ['image/png']
             });
             var self = this;

cms/static/sass/views/_certificates.scss

@@ -536,6 +536,10 @@
       .signatory-image {
         margin-top: 20px;
       }
+
+      .signature-image {
+        max-width: 450px;
+      }
     }
 
     .signatory-panel-body label {

cms/templates/js/signatory-editor.underscore

@@ -41,7 +41,7 @@
                 <div class="signature-upload-wrapper">
                   <div class="signature-upload-input-wrapper">
                     <input id="signatory-signature-<%= signatory_number %>" class="collection-name-input input-text signatory-signature-input" name="signatory-signature-url" type="text" placeholder="<%= gettext("Path to Signature Image") %>" value="<%= signature_image_path %>"  aria-describedby="signatory-signature-<%= signatory_number %>-tip" readonly />
-                    <span id="signatory-signature-<%= signatory_number %>-tip" class="tip tip-stacked"><%= gettext("Image must be 450px X 150px transparent PNG") %></span>
+                    <span id="signatory-signature-<%= signatory_number %>-tip" class="tip tip-stacked"><%= gettext("Image must be in PNG format") %></span>
                   </div>
                   <button type="button" class="action action-upload-signature">Upload Signature Image</button>
                 </div>

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

 <%! from django.utils.translation import ugettext as _ %>
-<%! from django.template.defaultfilters import linebreaks %>
 <%namespace name='static' file='../static_content.html'/>
 <%
 course_mode_class = course_mode if course_mode else ''
@@ -51,7 +50,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 +68,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>