Skip to content

E
edx-platform
Commit 33b7fbbb by Brian Talbot
Options

UX-2011: adding print-based styles for Open edX web certs

parent 77395bdf
Showing with 393 additions and 63 deletions
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": {
......
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": {
......
lms/static/certificates/images/ico-base.svg
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/certificates/images/ico-distinguished.svg
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/certificates/images/ico-honor.svg
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/certificates/images/ico-verified.svg
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/certificates/sass/_build.scss
......@@ -43,6 +43,11 @@
@import 'views';
// ------------------------------
// #CONTEXTS
// ------------------------------
@import 'print';
// ------------------------------
// #SHAME
// ------------------------------
@import 'overrides';
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 {
......
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 {
......
lms/static/certificates/sass/_print.scss 0 → 100644
// ------------------------------
// // 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;
}
}
}
lms/templates/certificates/_accomplishment-rendering.html
......@@ -18,61 +18,66 @@ course_mode_class = course_mode if course_mode else ''
<div class="accomplishment-type">
<span class="accomplishment-type-symbol">
<img class="src" src="/static/certificates/images/ico-${course_mode_class}.svg" alt="">
<img class="src" src="/static/certificates/images/ico-${course_mode_class}.png" alt="">
</span>
<span class="accomplishment-type-label hd-4">${document_title}</span>
</div>
<div class="accomplishment-statement">
<p class="accomplishment-statement-lead">
<strong class="accomplishment-recipient hd-1 emphasized">${accomplishment_copy_name}</strong>
<span class="accomplishment-summary copy copy-lead">${accomplishment_copy_description_full}</span>
<div class="wrapper-statement-and-signatories">
<div class="accomplishment-statement">
<p class="accomplishment-statement-lead">
<strong class="accomplishment-recipient hd-1 emphasized">${accomplishment_copy_name}</strong>
<span class="accomplishment-summary copy copy-lead">${accomplishment_copy_description_full}</span>
<span class="accomplishment-course hd-1 emphasized">
<span class="accomplishment-course-org">${accomplishment_copy_course_org} </span>
<span class="accomplishment-course-number">101x</span>:
<span class="accomplishment-course-name">${accomplishment_course_title}</span>
</span>
</p>
<span class="accomplishment-course hd-1 emphasized">
<span class="accomplishment-course-org">${accomplishment_copy_course_org} </span>
<span class="accomplishment-course-number">101x</span>:
<span class="accomplishment-course-name">${accomplishment_course_title}</span>
</span>
</p>
<p class="accomplishment-statement-detail copy copy-lead">${accomplishment_copy_course_description}</p>
</div>
% if mode != 'base':
<div class="accomplishment-signatories">
<h3 class="accomplishment-signatories-title hd-6 sr-only">${_("Noted by")}</h3>
<div class="wrapper-signatories">
<ul class="list-signatories">
% if certificate_data:
% for signatory in certificate_data.get('signatories', []):
<li class="signatory">
<img class="signatory-signature" src="${static.url(signatory['signature_image_path'])}" alt="${signatory['name']}">
<h4 class="signatory-name hd-5">${signatory['name']}</h4>
<p class="signatory-credentials copy copy-micro">
<span class="role">${signatory['title']}</span>
<span class="organization">${signatory['organization']}</span>
</p>
</li>
% endfor
% endif
</ul>
<p class="accomplishment-statement-detail copy copy-lead">${accomplishment_copy_course_description}</p>
</div>
% if mode != 'base':
<div class="accomplishment-signatories">
<h3 class="accomplishment-signatories-title hd-6 sr-only">${_("Noted by")}</h3>
<div class="wrapper-signatories">
<div class="list-signatories">
% if certificate_data:
% for signatory in certificate_data.get('signatories', []):
<div class="signatory">
<img class="signatory-signature" src="${static.url(signatory['signature_image_path'])}" alt="${signatory['name']}">
<h4 class="signatory-name hd-5">${signatory['name']}</h4>
<p class="signatory-credentials copy copy-micro">
<span class="role">${signatory['title']}</span>
<span class="organization">${signatory['organization']}</span>
</p>
</div>
% endfor
% endif
</div>
</div>
</div>
% endif
</div>
% endif
<div class="accomplishment-orgs">
<h3 class="accomplishment-orgs-title hd-6 sr-only">${_("Supported by the following organizations")}</h3>
<ul class="wrapper-orgs list-orgs list-orgs-4+">
<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.svg')}" alt="${platform_name}">
<img class="organization-logo" src="${static.url('/static/certificates/images/logo-edx.png')}" alt="${platform_name}">
</div>
</li>
% if certificate_data and certificate_data.get('org_logo_path', ''):
<li class="wrapper-organization">
<div class="organization organization-harvardX">
<div class="organization">
<img class="organization-logo" src="${static.url(certificate_data['org_logo_path'])}" alt="${platform_name}">
</div>
</li>
......@@ -100,7 +105,7 @@ course_mode_class = course_mode if course_mode else ''
</dd>
</dl>
<dl class="metadata accomplishment-id">
<dt class="label copy copy-meta">${certificate_id_number_title}</dt>
<dt class="label copy copy-meta">${certificate_id_number_title}:</dt>
<dd class="value copy copy-base">${certificate_id_number}</dd>
</dl>
<dl class="metadata accomplishment-date">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment