diff --git a/lms/djangoapps/certificates/migrations/0020_certificatehtmlviewconfiguration_data.py b/lms/djangoapps/certificates/migrations/0020_certificatehtmlviewconfiguration_data.py index f8ec6c66b7..77a70a2013 100644 --- a/lms/djangoapps/certificates/migrations/0020_certificatehtmlviewconfiguration_data.py +++ b/lms/djangoapps/certificates/migrations/0020_certificatehtmlviewconfiguration_data.py @@ -19,7 +19,7 @@ class Migration(DataMigration): "company_privacy_url": "http://www.edx.org/edx-privacy-policy", "company_tos_url": "http://www.edx.org/edx-terms-service", "company_verified_certificate_url": "http://www.edx.org/verified-certificate", - "logo_src": "/static/certificates/images/logo-edx.svg", + "logo_src": "/static/certificates/images/logo-edx.png", "logo_url": "http://www.edx.org" }, "honor": { diff --git a/lms/djangoapps/certificates/tests/factories.py b/lms/djangoapps/certificates/tests/factories.py index aac6b2d5cc..8f5138a22d 100644 --- a/lms/djangoapps/certificates/tests/factories.py +++ b/lms/djangoapps/certificates/tests/factories.py @@ -56,7 +56,7 @@ class CertificateHtmlViewConfigurationFactory(DjangoModelFactory): "company_tos_url": "http://www.edx.org/edx-terms-service", "company_verified_certificate_url": "http://www.edx.org/verified-certificate", "document_stylesheet_url_application": "/static/certificates/sass/main-ltr.css", - "logo_src": "/static/certificates/images/logo-edx.svg", + "logo_src": "/static/certificates/images/logo-edx.png", "logo_url": "http://www.edx.org" }, "honor": { diff --git a/lms/static/certificates/images/ico-base.png b/lms/static/certificates/images/ico-base.png new file mode 100644 index 0000000000..62e610b6e3 Binary files /dev/null and b/lms/static/certificates/images/ico-base.png differ diff --git a/lms/static/certificates/images/ico-base.svg b/lms/static/certificates/images/ico-base.svg index b05769b33b..de9303bf38 100644 --- a/lms/static/certificates/images/ico-base.svg +++ b/lms/static/certificates/images/ico-base.svg @@ -1,39 +1,10 @@ - + - ico-base + Bitmap Created with Sketch. - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/lms/static/certificates/images/ico-distinguished.png b/lms/static/certificates/images/ico-distinguished.png new file mode 100644 index 0000000000..9563c7d1cc Binary files /dev/null and b/lms/static/certificates/images/ico-distinguished.png differ diff --git a/lms/static/certificates/images/ico-distinguished.svg b/lms/static/certificates/images/ico-distinguished.svg index 091957ef1c..4bd1c6da72 100644 --- a/lms/static/certificates/images/ico-distinguished.svg +++ b/lms/static/certificates/images/ico-distinguished.svg @@ -1,43 +1,10 @@ - + - ico-distinguished + Bitmap Created with Sketch. - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/lms/static/certificates/images/ico-honor.png b/lms/static/certificates/images/ico-honor.png new file mode 100644 index 0000000000..62e610b6e3 Binary files /dev/null and b/lms/static/certificates/images/ico-honor.png differ diff --git a/lms/static/certificates/images/ico-honor.svg b/lms/static/certificates/images/ico-honor.svg index b05769b33b..de9303bf38 100644 --- a/lms/static/certificates/images/ico-honor.svg +++ b/lms/static/certificates/images/ico-honor.svg @@ -1,39 +1,10 @@ - + - ico-base + Bitmap Created with Sketch. - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/lms/static/certificates/images/ico-verified.png b/lms/static/certificates/images/ico-verified.png new file mode 100644 index 0000000000..9563c7d1cc Binary files /dev/null and b/lms/static/certificates/images/ico-verified.png differ diff --git a/lms/static/certificates/images/ico-verified.svg b/lms/static/certificates/images/ico-verified.svg index 091957ef1c..4bd1c6da72 100644 --- a/lms/static/certificates/images/ico-verified.svg +++ b/lms/static/certificates/images/ico-verified.svg @@ -1,43 +1,10 @@ - + - ico-distinguished + Bitmap Created with Sketch. - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/lms/static/certificates/images/logo-edx.png b/lms/static/certificates/images/logo-edx.png new file mode 100644 index 0000000000..52c0c58d02 Binary files /dev/null and b/lms/static/certificates/images/logo-edx.png differ diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss index 07dc149e4b..3f76048e8e 100644 --- a/lms/static/certificates/sass/_build.scss +++ b/lms/static/certificates/sass/_build.scss @@ -42,6 +42,11 @@ // ------------------------------ @import 'views'; +// ------------------------------ +// #CONTEXTS +// ------------------------------ +@import 'print'; + // ------------------------------ // #SHAME // ------------------------------ diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index bda5244914..a29457069c 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/lms/static/certificates/sass/_components.scss @@ -270,14 +270,11 @@ // organizations .accomplishment-orgs { + @extend %rendering-section; .list-orgs { @extend %list-unstyled; } - - .organization-logo { - @include filter(grayscale(100%)); - } } .accomplishment-orgs-title { @@ -454,7 +451,8 @@ } } -// certificate - base +// certificate - base + honor +.certificate-honor, .certificate-base { .introduction { @@ -467,19 +465,20 @@ .accomplishment-rendering { + .accomplishment-type { + margin-top: 0; + } + // hide the fancy .accomplishment-signatories, .accomplishment-type-symbol { display: none; } - - .organization-logo { - @include filter(grayscale(100%)); - } } } -// certificate - distinguished +// certificate - distinguished + verified +.certificate-verified, .certificate-distinguished { .introduction { @@ -510,16 +509,6 @@ .deco-corner-br { @include triangle(20px, $cert-distinguished-color, down-left); } - - .organization-logo { - @include filter(grayscale(0%)); - } - } - - .accomplishment-type { - position: relative; - top: -(rem(50)); - margin-bottom: 0; } .accomplishment-rendering { diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index fb1a9ef5ec..0d31c7ec65 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/lms/static/certificates/sass/_layouts.scss @@ -33,9 +33,15 @@ @extend %layout; .logo { - width: span(2); + display: block; + @include size(rem(100) auto); margin: 0 auto; } + + .logo-img { + display: block; + width: 100%; + } } .header-app-title { @@ -185,7 +191,6 @@ } .accomplishment-orgs { - margin-bottom: 0; .wrapper-orgs { @include text-align(center); @@ -197,6 +202,7 @@ width: span(6); height: rem(100); @include margin-right(spacing-horizontal(base)); + margin-bottom: spacing-vertical(small); &:last-child { @include margin-right(0); @@ -218,7 +224,7 @@ .organization { @include size(100%); position: relative; - margin-bottom: spacing-vertical(small); + } .organization-logo { diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss new file mode 100644 index 0000000000..4e543dff14 --- /dev/null +++ b/lms/static/certificates/sass/_print.scss @@ -0,0 +1,325 @@ +// ------------------------------ +// // Open edX Certificates: Print Specific Styling + +// About: styling specific for print layouts. + +// #UTILITIES +// #BASE +// #LAYOUT +// #ELEMENTS +// #CASES + +// ------------------------------ +// #UTILITIES +// ------------------------------ + +// page set up - only available to modern browsers now +@page { + size : landscape; +} + +@media print { + + // helpers + %print-no-background { + background: none !important; + } + + %print-hide { + display: none !important; + } + + %print-black-on-white { + background: palette(grayscale, white-t) !important; + color: palette(grayscale, black-t) !important; + } + + %print-layout-wrapper { + padding: 0 !important; + } + + %print-rendering-section { + margin-bottom: spacing-vertical(small); + border-bottom: none !important; + padding-bottom: 0 !important; + + &:last-child { + border: none; + padding-bottom: 0; + } + } +} + +// ------------------------------ +// #BASE +// ------------------------------ +@media print { + + // prevent images from bleeding over the edge of the printed page + img { + max-width: 100% !important; + } + + // prevent large elements from being split across multiple pages + ul, img { + page-break-inside: avoid; + } + + // reset body/view properties + html, + body { + @extend %print-black-on-white; + } + + body { + margin: spacing-vertical(base) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important; + padding: 0; + } + + .wrapper-view { + margin-bottom: 0 !important; + } +} + +// force background images and colors +@media print and (color) { + * { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } +} + +// ------------------------------ +// #LAYOUT +// ------------------------------ +@media print { + + // hide elements not needed for print rendering + .wrapper-banner-user, + .wrapper-about, + .wrapper-footer, + .wrapper-header, + .wrapper-introduction, + .accomplishment-metadata-title, + .accomplishment-metadata .accomplishment-recipient, + .deco-corner, + .accomplishment-date .label { + @extend %print-hide; + } + + // remove layout wrappers' padding + .wrapper-introduction, + .wrapper-accomplishment-rendering, + .wrapper-accomplishment-metadata { + @extend %print-layout-wrapper; + } +} + +// ------------------------------ +// #ELEMENTS +// ------------------------------ +@media print { + + // headings + .hd-1 { + font-size: font-size(x-large); + line-height: line-height(x-large); + } + + .hd-2 { + font-size: font-size(large); + line-height: line-height(large); + } + + .hd-3 { + font-size: font-size(mid-large); + line-height: line-height(mid-large); + } + + .hd-4 { + font-size: font-size(base); + line-height: line-height(base); + } + + .hd-5 { + font-size: font-size(mid-small); + line-height: line-height(mid-small); + } + + .hd-6 { + font-size: font-size(small); + line-height: line-height(small); + } + + .hd-7 { + font-size: font-size(x-small); + line-height: line-height(small); + } + + // copy + .copy-lead { + font-size: font-size(base); + line-height: line-height(base); + } + + .copy-large { + font-size: font-size(base); + line-height: line-height(base); + } + + .copy-base { + font-size: font-size(small); + line-height: line-height(small); + } + + .copy-meta { + font-size: font-size(x-small); + line-height: line-height(small); + } + + .copy-micro { + font-size: font-size(x-small); + line-height: line-height(small); + } + + // accomplishment + .accomplishment-main { + @extend %print-no-background; + } + + .accomplishment-rendering { + top: 0 !important; + border: rem(1) solid palette(grayscale, light); + border-top: rem(2) solid $cert-base-color; + box-shadow: none; + padding: spacing-vertical(small) spacing-horizontal(mid-large); + + + .accomplishment-type { + margin-top: -(spacing-vertical(mid-large)); + } + + .accomplishment-type-symbol { + @include size(rem(75)); + border: none !important; + } + + .accomplishment-statement { + @extend %print-rendering-section; + @include text-align(left); + } + + .accomplishment-course, + .accomplishment-recipient, + .accomplishment-summary, + .accomplishment-statement-detail { + width: 100% !important; + margin-left: 0; + margin-right: 0; + } + + .wrapper-statement-and-signatories { + @include span(8 first); + } + + .accomplishment-orgs { + @include span(4 last); + margin-bottom: 0; + border-bottom: none !important; + padding-bottom: 0 !important; + + .wrapper-organization { + @include gallery(2 of 4); + margin-bottom: spacing-vertical(mid-small) !important; + } + } + + .accomplishment-signatories { + @extend %print-rendering-section; + @include span(12 last); + + .signatory { + @include gallery(3); + } + + .signatory-signature { + // height: rem(60) !important; + } + + .signatory-name { + font-size: font-size(x-small); + } + + .signatory-credentials { + margin-bottom: 0 !important; + } + + // CASE: > 4 signatures + &.has-many { + + .signatory { + @include gallery(2); + } + } + } + } + + .wrapper-accomplishment-metadata { + margin-bottom: 0; + } + + .accomplishment-metadata { + margin-bottom: 0; + + .wrapper-metadata { + @include clearfix(); + margin-bottom: 0; + + .metadata { + margin-bottom: 0; + border-bottom: none !important; + padding-bottom: 0 !important; + + .label, .value { + display: inline-block; + vertical-align: baseline; + font-size: font-size(x-small); + line-height: line-height(small); + } + + .label { + @include margin-right(spacing-horizontal(small)); + } + } + } + .accomplishment-id { + float: left; + width: 65% !important; + margin: 0 !important; + @include text-align(left); + } + + .accomplishment-date { + float: right; + width: 35% !important; + margin: 0 !important; + @include text-align(right); + } + + } +} + +// ------------------------------ +// #CASES +// ------------------------------ +// certificate - distinguished +@media print { + + .certificate-distinguished { + + .accomplishment-rendering { + border-top-color: $cert-distinguished-color; + } + } +} + diff --git a/lms/templates/certificates/_accomplishment-rendering.html b/lms/templates/certificates/_accomplishment-rendering.html index ac7597cb35..43cb82afa8 100644 --- a/lms/templates/certificates/_accomplishment-rendering.html +++ b/lms/templates/certificates/_accomplishment-rendering.html @@ -18,61 +18,66 @@ course_mode_class = course_mode if course_mode else ''
- + ${document_title}
-
-

- ${accomplishment_copy_name} - ${accomplishment_copy_description_full} +

+
+

+ ${accomplishment_copy_name} + ${accomplishment_copy_description_full} - - ${accomplishment_copy_course_org} - 101x: - ${accomplishment_course_title} - -

+ + ${accomplishment_copy_course_org} + 101x: + ${accomplishment_course_title} + +

-

${accomplishment_copy_course_description}

-
- % if mode != 'base': -
-

${_("Noted by")}

- -
-
    - % if certificate_data: - % for signatory in certificate_data.get('signatories', []): -
  • - ${signatory['name']} - -

    ${signatory['name']}

    -

    - ${signatory['title']} - ${signatory['organization']} -

    -
    • - % endfor - % endif -
+

${accomplishment_copy_course_description}

+ + % if mode != 'base': +
+

${_("Noted by")}

+ +
+
+ % if certificate_data: + % for signatory in certificate_data.get('signatories', []): +
+ ${signatory['name']} + +

${signatory['name']}

+

+ ${signatory['title']} + ${signatory['organization']} +

+
+ % endfor + % endif +
+
+
+ % endif
- % endif +

${_("Supported by the following organizations")}

-
    +
    • - +
      • + % if certificate_data and certificate_data.get('org_logo_path', ''):
    • -
      +
      • @@ -100,7 +105,7 @@ course_mode_class = course_mode if course_mode else ''
      -
      ${certificate_id_number_title}
      +
      ${certificate_id_number_title}:
      ${certificate_id_number}