Skip to content

E
edx-platform
Commit 71c9a2d4 by Brian Talbot
Options

certificates: moving Sass/UI naming conventions to documented standards

parent d7a5d24c
Showing with 244 additions and 245 deletions
lms/static/certificates/sass/_base.scss
...@@ -30,13 +30,13 @@ body { ...@@ -30,13 +30,13 @@ body {
// ==================== // ====================
// base: view // base: view
.wrapper--view { .wrapper-view {
background: $bg-view; background: $bg-view;
} }
// ==================== // ====================
[class^="content__"], [class^="content--"] { [class^="content-"]{
a { a {
@extend %link-copy; @extend %link-copy;
...@@ -78,6 +78,14 @@ strong { ...@@ -78,6 +78,14 @@ strong {
} }
// reset: lists // reset: lists
.list--actions, .list--docs, .list--steps, .list--controls, .list--fields, .list--help, .nav--wizard, .list--tips, .field--group { .list-actions,
.list-docs,
.list-steps,
.list-controls,
.list-fields,
.list-help,
.nav-wizard,
.list-tips,
.field-group {
@extend %ui-no-list; @extend %ui-no-list;
} }
lms/static/certificates/sass/elements/_footer.scss
// edX: Certificates - Footer // edX: Certificates - Footer
// ==================== // ====================
.wrapper--footer { .wrapper-footer {
padding: 0 ($baseline-h*2); padding: 0 ($baseline-h*2);
background: $bg-footer-main; background: $bg-footer-main;
color: $color-footer-main; color: $color-footer-main;
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
} }
} }
.footer--app { .footer-app {
@include outer-container; @include outer-container;
border-top: 2px solid $gray-l5; border-top: 2px solid $gray-l5;
margin-top: $baseline-v; margin-top: $baseline-v;
...@@ -24,98 +24,98 @@ ...@@ -24,98 +24,98 @@
a { a {
@extend %link-copy; @extend %link-copy;
} }
}
.copyright { .footer-app-copyright {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@include span-columns(4 of 12); @include span-columns(4 of 12);
@include media($bp-dm) { @include media($bp-dm) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
@include media($bp-m) { @include media($bp-m) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
}
} }
}
.nav--footer { .footer-app-nav {
@include span-columns(8 of 12); @include span-columns(8 of 12);
@include omega(); @include omega();
text-align: right; text-align: right;
@include media($bp-dm) {
@include fill-parent;
text-align: left;
}
@include media($bp-ds) {
@include fill-parent;
text-align: left;
}
@include media($bp-m) {
@include fill-parent;
text-align: left;
}
.list {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline-h*2);
&:last-child {
margin-right: 0;
}
@include media($bp-dm) { @include media($bp-dm) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
} }
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
} }
@include media($bp-m) { @include media($bp-m) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
} }
}
.nav-item {
@extend %t-action5;
display: inline-block;
margin-right: ($baseline-h/2);
@include media($bp-dm) {
@include font-size(14);
@include lh(14);
}
.list { @include media($bp-ds) {
display: inline-block; @include font-size(14);
vertical-align: middle; @include lh(14);
margin-right: ($baseline-h*2); display: block;
margin: 0 0 ($baseline-v/4) 0;
&:last-child {
margin-right: 0;
}
@include media($bp-dm) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-ds) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-m) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
} }
.nav__item { @include media($bp-m) {
@extend %t-action5; @include font-size(14);
display: inline-block; @include lh(14);
margin-right: ($baseline-h/2); display: block;
margin: 0 0 ($baseline-v/4) 0;
@include media($bp-dm) {
@include font-size(14);
@include lh(14);
}
@include media($bp-ds) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
@include media($bp-m) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
} }
} }
} }
lms/static/certificates/sass/elements/_header.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
// grid/layout // grid/layout
.wrapper--header { .wrapper-header {
@extend %ui-shadow-subtle-down; @extend %ui-shadow-subtle-down;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
padding: ($baseline-v) ($baseline-h*2); padding: ($baseline-v) ($baseline-h*2);
...@@ -18,12 +18,12 @@ ...@@ -18,12 +18,12 @@
} }
} }
.header--app { .header-app {
@include outer-container; @include outer-container;
} }
// masthead // masthead
.title--logo { .title-logo {
text-align: center; text-align: center;
.logo { .logo {
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
margin-right: ($baseline-h); margin-right: ($baseline-h);
} }
.title--sub { .title-sub {
@extend %ui-text-sr; @extend %ui-text-sr;
@extend %t-title-5; @extend %t-title-5;
display: inline-block; display: inline-block;
......
lms/static/certificates/sass/elements/_navigation.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@extend %no-list !optional; @extend %no-list !optional;
} }
.nav__item { .nav-item {
.action { .action {
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
} }
// archetype: nav - horizontal // archetype: nav - horizontal
%nav--inline { %nav-inline {
@extend %nav !optional; @extend %nav !optional;
.nav__item, .item { .nav-item, .item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -31,10 +31,10 @@ ...@@ -31,10 +31,10 @@
} }
// archetype: nav - vertical // archetype: nav - vertical
%nav--blocks { %nav-blocks {
@extend %nav !optional; @extend %nav !optional;
.nav__item { .nav-item {
display: block; display: block;
.action { .action {
...@@ -44,10 +44,10 @@ ...@@ -44,10 +44,10 @@
} }
// archetype: nav - tabs // archetype: nav - tabs
%nav--tabs { %nav-tabs {
@extend %nav !optional; @extend %nav !optional;
.nav__item { .nav-item {
.action { .action {
...@@ -56,10 +56,10 @@ ...@@ -56,10 +56,10 @@
} }
// archetype: nav - pagination // archetype: nav - pagination
%nav--pagination { %nav-pagination {
@extend %nav !optional; @extend %nav !optional;
.nav__item { .nav-item {
.action { .action {
...@@ -68,10 +68,10 @@ ...@@ -68,10 +68,10 @@
} }
// archetype: nav - dropdown // archetype: nav - dropdown
%nav--dropdown { %nav-dropdown {
@extend %nav !optional; @extend %nav !optional;
.nav__item { .nav-item {
.action { .action {
...@@ -82,9 +82,9 @@ ...@@ -82,9 +82,9 @@
// ==================== // ====================
// application: secondary navigation // application: secondary navigation
%nav--secondary { %nav-secondary {
.nav__item { .nav-item {
.action { .action {
......
lms/static/certificates/sass/views/_invalid.scss
// edX: Certificates - View: Invalid Certificate // edX: Certificates - View: Invalid Certificate
// ==================== // ====================
.view--invalid-certificate { .view-invalid-certificate {
background: $bg-view; background: $bg-view;
// layout // layout
.wrapper--view { .wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3); padding-bottom: ($baseline-v*3);
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
} }
.wrapper--content { .wrapper-content {
padding: $baseline-v ($baseline-h*2); padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) { @include media($bp-ds) {
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
} }
} }
.feedback__lead { .feedback-lead {
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
padding-bottom: ($baseline-v); padding-bottom: ($baseline-v);
border-bottom: 1px solid $gray-l5; border-bottom: 1px solid $gray-l5;
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
} }
} }
.feedback__support { .feedback-support {
@include span-columns(6 of 12); @include span-columns(6 of 12);
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
} }
} }
.feedback__warning { .feedback-warning {
@include span-columns(6 of 12); @include span-columns(6 of 12);
@include omega(); @include omega();
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
// ==================== // ====================
// supplemental content // supplemental content
.content--supplemental { .content-supplemental {
@include media($bp-dm) { @include media($bp-dm) {
} }
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
color: $gray-l2; color: $gray-l2;
} }
.list--actions { .list-actions {
margin-top: ($baseline-v); margin-top: ($baseline-v);
.action { .action {
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
} }
} }
.supplemental__how { .supplemental-how {
@extend %trans-size; @extend %trans-size;
@include span-columns(3 of 12); @include span-columns(3 of 12);
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
} }
} }
.supplemental__certificates { .supplemental-certificates {
@extend %trans-size; @extend %trans-size;
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
} }
} }
.supplemental__about { .supplemental-about {
@extend %trans-size; @extend %trans-size;
@include span-columns(6 of 12); @include span-columns(6 of 12);
...@@ -276,13 +276,9 @@ ...@@ -276,13 +276,9 @@
background: $edx-blue-l2; background: $edx-blue-l2;
} }
.certificate--type { .certificate-type {
color: $edx-blue-l2; color: $edx-blue-l2;
} }
// .content--supplemental .list--actions .action {
// @extend %btn-secondary;
// }
} }
// CASE: verified // CASE: verified
...@@ -305,11 +301,11 @@ ...@@ -305,11 +301,11 @@
} }
} }
.certificate--type { .certificate-type {
color: $edx-blue; color: $edx-blue;
.wrapper--img { .wrapper-img {
width: 200px; width: 200px;
border-radius: ($baseline-h*10); border-radius: ($baseline-h*10);
padding: ($baseline-v/2) ($baseline-h/2); padding: ($baseline-v/2) ($baseline-h/2);
......
lms/static/certificates/sass/views/_valid.scss
// edX: Certificates - View: Valid Certificate // edX: Certificates - View: Valid Certificate
// ==================== // ====================
.view--valid-certificate { .view-valid-certificate {
background: $bg-view; background: $bg-view;
// layout // layout
.wrapper--view { .wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3); padding-bottom: ($baseline-v*3);
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
} }
.wrapper--content { .wrapper-content {
padding: $baseline-v ($baseline-h*2); padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) { @include media($bp-ds) {
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
} }
// statement // statement
.accomplishment__statement { .accomplishment-statement {
@extend %trans-size; @extend %trans-size;
@include span-columns(8 of 12); @include span-columns(8 of 12);
@include pad(0 $baseline-h 0 0); @include pad(0 $baseline-h 0 0);
...@@ -124,12 +124,12 @@ ...@@ -124,12 +124,12 @@
border-right: none; border-right: none;
} }
[class^="copy__"] { [class^="copy-"] {
display: block; display: block;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
.copy__name { .copy-name {
@extend %t-title-2; @extend %t-title-2;
@extend %t-weight3; @extend %t-weight3;
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
} }
} }
.copy__course__org { .copy-course-org {
@extend %t-title-5; @extend %t-title-5;
@extend %t-weight2; @extend %t-weight2;
margin-bottom: 0; margin-bottom: 0;
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
} }
} }
.copy__course { .copy-course {
@include media($bp-ds) { @include media($bp-ds) {
margin-bottom: ($baseline-v/4); margin-bottom: ($baseline-v/4);
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
} }
} }
.copy__course__name { .copy-course-name {
@extend %t-title-2; @extend %t-title-2;
@extend %t-weight3; @extend %t-weight3;
@include lh(36); @include lh(36);
...@@ -189,11 +189,11 @@ ...@@ -189,11 +189,11 @@
} }
} }
.copy__recogniton { .copy-recogniton {
@extend %t-title-2; @extend %t-title-2;
} }
.copy__context { .copy-context {
@extend %t-copy-lead2; @extend %t-copy-lead2;
color: $gray-l2; color: $gray-l2;
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
} }
// metadata around accomplishment // metadata around accomplishment
.accomplishment__details { .accomplishment-details {
@extend %trans-size; @extend %trans-size;
@include span-columns(4 of 12); @include span-columns(4 of 12);
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
@include fill-parent; @include fill-parent;
} }
.list--metadata { .list-metadata {
@extend %ui-no-list; @extend %ui-no-list;
.item { .item {
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
} }
// specific metadata // specific metadata
.certificate--type { .certificate-type {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
...@@ -274,7 +274,7 @@ ...@@ -274,7 +274,7 @@
} }
} }
.certificate--id { .certificate-id {
.value { .value {
word-wrap: break-word; word-wrap: break-word;
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
// ==================== // ====================
// supplemental content // supplemental content
.content--supplemental { .content-supplemental {
@include media($bp-dm) { @include media($bp-dm) {
} }
...@@ -307,7 +307,7 @@ ...@@ -307,7 +307,7 @@
color: $gray-l2; color: $gray-l2;
} }
.list--actions { .list-actions {
margin-top: ($baseline-v); margin-top: ($baseline-v);
.action { .action {
...@@ -331,7 +331,7 @@ ...@@ -331,7 +331,7 @@
} }
} }
.supplemental__how { .content-supplemental-how {
@extend %trans-size; @extend %trans-size;
@include span-columns(3 of 12); @include span-columns(3 of 12);
...@@ -350,7 +350,7 @@ ...@@ -350,7 +350,7 @@
} }
} }
.supplemental__certificates { .content-supplemental-certificates {
@extend %trans-size; @extend %trans-size;
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
...@@ -368,7 +368,7 @@ ...@@ -368,7 +368,7 @@
} }
} }
.supplemental__about { .content-supplemental-about {
@extend %trans-size; @extend %trans-size;
@include span-columns(6 of 12); @include span-columns(6 of 12);
...@@ -395,13 +395,9 @@ ...@@ -395,13 +395,9 @@
background: $edx-blue-l2; background: $edx-blue-l2;
} }
.certificate--type { .certificate-type {
color: $edx-blue-l2; color: $edx-blue-l2;
} }
// .content--supplemental .list--actions .action {
// @extend %btn-secondary;
// }
} }
// CASE: verified // CASE: verified
...@@ -424,11 +420,11 @@ ...@@ -424,11 +420,11 @@
} }
} }
.certificate--type { .certificate-type {
color: $edx-blue; color: $edx-blue;
.wrapper--img { .wrapper-img {
width: 200px; width: 200px;
border-radius: ($baseline-h*10); border-radius: ($baseline-h*10);
padding: ($baseline-v/2) ($baseline-h/2); padding: ($baseline-v/2) ($baseline-h/2);
......
lms/static/certificates/sass/views/_validate.scss
// edX: Certificates - View: DIY Validation // edX: Certificates - View: DIY Validation
// ==================== // ====================
.view--validate-certificate { .view-validate-certificate {
background: $bg-view; background: $bg-view;
// layout // layout
.wrapper--view { .wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3); padding-bottom: ($baseline-v*3);
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
} }
.wrapper--content { .wrapper-content {
padding: $baseline-v ($baseline-h*2); padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) { @include media($bp-ds) {
...@@ -37,25 +37,25 @@ ...@@ -37,25 +37,25 @@
@extend %link-copy; @extend %link-copy;
} }
.title--lvl1 { .title-lvl1 {
@extend %t-title-3; @extend %t-title-3;
@extend %t-weight3; @extend %t-weight3;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
} }
.title--lvl2 { .title-lvl2 {
@extend %t-title-5; @extend %t-title-5;
@extend %t-weight3; @extend %t-weight3;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
} }
.title--lvl3 { .title-lvl3 {
@extend %t-title-6; @extend %t-title-6;
@extend %t-weight3; @extend %t-weight3;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
} }
.title--lvl4 { .title-lvl4 {
} }
} }
...@@ -106,10 +106,10 @@ ...@@ -106,10 +106,10 @@
} }
} }
.list--requirements { .list-requirements {
@extend %ui-no-list; @extend %ui-no-list;
@include fill-parent(); @include fill-parent();
counter-reset: instructions--counter; counter-reset: instructions-counter;
margin: $baseline-v 0; margin: $baseline-v 0;
.item { .item {
...@@ -140,8 +140,8 @@ ...@@ -140,8 +140,8 @@
&:before { &:before {
@extend %t-title-6; @extend %t-title-6;
@extend %t-weight3; @extend %t-weight3;
content: counter(instructions--counter); content: counter(instructions-counter);
counter-increment: instructions--counter; counter-increment: instructions-counter;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
max-width: 10%; max-width: 10%;
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
color: $gray-l3; color: $gray-l3;
} }
.requirement__label { .requirement-label {
@extend %t-title-6; @extend %t-title-6;
@extend %t-weight3; @extend %t-weight3;
display: inline-block; display: inline-block;
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
color: $gray-d4; color: $gray-d4;
} }
.requirement__details { .requirement-details {
display: block; display: block;
@include media($bp-m) { @include media($bp-m) {
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
} }
} }
.requirement--allitems { .requirement-allitems {
border-top-color: $edx-pink; border-top-color: $edx-pink;
} }
} }
...@@ -211,9 +211,9 @@ ...@@ -211,9 +211,9 @@
} }
} }
.list--instructions { .list-instructions {
@extend %ui-no-list; @extend %ui-no-list;
counter-reset: instructions--counter; counter-reset: instructions-counter;
.item { .item {
...@@ -233,8 +233,8 @@ ...@@ -233,8 +233,8 @@
&:before { &:before {
@extend %t-title-6; @extend %t-title-6;
@extend %t-weight4; @extend %t-weight4;
content: counter(instructions--counter); content: counter(instructions-counter);
counter-increment: instructions--counter; counter-increment: instructions-counter;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
max-width: 10%; max-width: 10%;
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
color: $gray-l4; color: $gray-l4;
} }
.instruction__details { .instruction-details {
@extend %wipe-last-child; @extend %wipe-last-child;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
...@@ -250,7 +250,7 @@ ...@@ -250,7 +250,7 @@
max-width: 85%; max-width: 85%;
} }
.instruction__image { .instruction-image {
@include fill-parent(); @include fill-parent();
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
...@@ -298,7 +298,7 @@ ...@@ -298,7 +298,7 @@
} }
} }
.list--actions { .list-actions {
margin-top: ($baseline-v); margin-top: ($baseline-v);
.action { .action {
......
lms/templates/certificates/certificate-base.html
...@@ -26,7 +26,10 @@ ...@@ -26,7 +26,10 @@
</head> </head>
<body class="view-certificate view-valid-certificate ${dir_rtl} ${document_body_class_append}" data-view="valid-certificate"> <body class="view-certificate view-valid-certificate ${dir_rtl} ${document_body_class_append}" data-view="valid-certificate">
${self.body()}
<div class="wrapper-view">
${self.body()}
</div>
<%include file="_assets-secondary.html" /> <%include file="_assets-secondary.html" />
</body> </body>
</html> </html>
lms/templates/certificates/invalid.html
...@@ -4,49 +4,47 @@ ...@@ -4,49 +4,47 @@
<%inherit file="certificate-base.html" /> <%inherit file="certificate-base.html" />
<div class="wrapper-view"> <%include file="_certificate-header.html" />
<%include file="_certificate-header.html" />
<hr class="divider" /> <hr class="divider" />
<div class="wrapper-content"> <div class="wrapper-content">
<section class="content content-main" role="main"> <section class="content content-main" role="main">
<div class="status status-invalid" id="validation-status"> <div class="status status-invalid" id="validation-status">
<h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2> <h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2>
</div> </div>
<div class="feedback"> <div class="feedback">
<div class="feedback-lead"> <div class="feedback-lead">
<h3 class="title">${_("This Certificate Does Not Exist")}</h3> <h3 class="title">${_("This Certificate Does Not Exist")}</h3>
<div class="copy"> <div class="copy">
<p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p> <p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p>
</div>
</div>
<div class="feedback-support">
<h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
<div class="copy">
<p>${_("Ensure that the ID number is an exact match of the ID number on the PDF or print certificate you are referencing.")}</p>
</div>
</div>
<div class="feedback-warning">
<h3 class="title">Please Note</h3>
<div class="copy">
<p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
</div>
</div>
</div> </div>
</section> </div>
<div class="feedback-support">
<h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
<hr class="divider" /> <div class="copy">
<p>${_("Ensure that the ID number is an exact match of the ID number on the PDF or print certificate you are referencing.")}</p>
</div>
</div>
<%include file="_certificate-supplemental.html" /> <div class="feedback-warning">
</div> <h3 class="title">Please Note</h3>
<div class="copy">
<p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
</div>
</div>
</div>
</section>
<hr class="divider" /> <hr class="divider" />
<%include file="_certificate-footer.html" /> <%include file="_certificate-supplemental.html" />
</div> </div>
<hr class="divider" />
<%include file="_certificate-footer.html" />
lms/templates/certificates/valid.html
...@@ -4,62 +4,60 @@ ...@@ -4,62 +4,60 @@
<%inherit file="certificate-base.html" /> <%inherit file="certificate-base.html" />
<div class="wrapper--view"> <%include file="_certificate-header.html" />
<%include file="_certificate-header.html" />
<hr class="divider" />
<hr class="divider" />
<div class="wrapper-content">
<div class="wrapper-content">
<section class="content content-main" role="main">
<section class="content content-main" role="main"> <div class="status status-valid" id="validation-status">
<div class="status status-valid" id="validation-status"> <h2 class="title title-lvl2">
<h2 class="title title-lvl2"> ${document_banner}
${document_banner} <span class="sr">:</span>
<span class="sr">:</span> </h2>
</h2> </div>
<article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment">
<div class="accomplishment-statement">
<p class="copy">
<span class="copy-name">${accomplishment_copy_name}</span>
<span class="copy-context">${accomplishment_copy_description_full}</span>
<span class="copy-course">
<span class="copy-course-org">${accomplishment_copy_course_org}</span>
<span class="copy-course-name">${accomplishment_copy_course_name}</span>
</span>
<span class="copy-context">${accomplishment_copy_course_description}</span>
</p>
</div> </div>
<div class="accomplishment-details">
<article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment"> <h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3>
<div class="accomplishment-statement"> <ul class="list list-metadata">
<p class="copy"> <li class="item certificate-type">
<span class="copy-name">${accomplishment_copy_name}</span> <span class="label">${_("Certificate Type")}</span>
<span class="copy-context">${accomplishment_copy_description_full}</span> <span class="value">
<span class="copy-course"> ${certificate_type_title}
<span class="copy-course-org">${accomplishment_copy_course_org}</span> <span class="explanation">${certificate_type_description} </span>
<span class="copy-course-name">${accomplishment_copy_course_name}</span>
</span> </span>
<span class="copy-context">${accomplishment_copy_course_description}</span> </li>
</p> <li class="item certificate-id">
</div> <span class="label">${certificate_id_number_title}</span>
<div class="accomplishment-details"> <span class="value">${certificate_id_number}</span>
<h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3> </li>
<ul class="list list-metadata"> <li class="item certificate-date">
<li class="item certificate-type"> <span class="label">${certificate_date_issued_title}</span>
<span class="label">${_("Certificate Type")}</span> <span class="value">${certificate_date_issued}</span>
<span class="value"> </li>
${certificate_type_title} </ul>
<span class="explanation">${certificate_type_description} </span> </div>
</span> </article>
</li> </section>
<li class="item certificate-id">
<span class="label">${certificate_id_number_title}</span>
<span class="value">${certificate_id_number}</span>
</li>
<li class="item certificate-date">
<span class="label">${certificate_date_issued_title}</span>
<span class="value">${certificate_date_issued}</span>
</li>
</ul>
</div>
</article>
</section>
<hr class="divider" />
<%include file="_certificate-supplemental.html" />
</div>
<hr class="divider" /> <hr class="divider" />
<%include file="_certificate-footer.html" /> <%include file="_certificate-supplemental.html" />
</div> </div>
<hr class="divider" />
<%include file="_certificate-footer.html" />
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