Commit d7a5d24c by Brian Talbot

certificates: moving HTML to documented standards

parent f8b835f2
<div class="wrapper--footer"> <div class="wrapper-footer">
<footer class="footer--app" role="contentinfo" id="company-info"> <footer class="footer-app" role="contentinfo" id="company-info">
<div class="copyright"> <div class="footer-app-copyright">
<p>${copyright_text}</p> <p>${copyright_text}</p>
</div> </div>
<nav class="nav--footer"> <nav class="footer-app-nav">
<ul class="list list--legal"> <ul class="list list-legal">
<li class="nav__item"> <li class="nav-item">
<a class="action" href="${company_tos_url}">${company_tos_urltext}</a> <a class="action" href="${company_tos_url}">${company_tos_urltext}</a>
</li> </li>
<li class="nav__item"> <li class="nav-item">
<a class="action" href="${company_privacy_url}">${company_privacy_urltext}</a> <a class="action" href="${company_privacy_url}">${company_privacy_urltext}</a>
</li> </li>
</ul> </ul>
......
<div class="wrapper--header"> <div class="wrapper-header">
<header class="header--app" role="banner"> <header class="header-app" role="banner">
<h1 class="title title--logo"> <h1 class="title title-logo">
<span class="logo"> <span class="logo">
<a href="${logo_url}"><img class="img--logo" src="${logo_src}" alt="${logo_alt}" /></a> <a href="${logo_url}"><img class="logo-img" src="${logo_src}" alt="${logo_alt}" /></a>
</span> </span>
<span class="title title--sub">${logo_subtitle}</span> <span class="title title-sub">${logo_subtitle}</span>
</h1> </h1>
</header> </header>
</div> </div>
...@@ -2,32 +2,32 @@ ...@@ -2,32 +2,32 @@
<%! import mako.runtime %> <%! import mako.runtime %>
<% mako.runtime.UNDEFINED = '' %> <% mako.runtime.UNDEFINED = '' %>
<aside class="content content--supplemental" role="complimentary" id="validation-info"> <aside class="content content-supplemental" role="complimentary" id="validation-info">
<div class="supplemental__about"> <div class="content-supplemental-about">
<h2 class="title">${company_about_title}</h2> <h2 class="title">${company_about_title}</h2>
<div class="copy"> <div class="copy">
<p>${company_about_description}</p> <p>${company_about_description}</p>
</div> </div>
<ul class="list list--actions"> <ul class="list list-actions">
<li class="item item--action"> <li class="item item-action">
<a class="action action--primary action--moreinfo" href="${company_about_url}">${company_about_urltext}</a> <a class="action action-primary action-moreinfo" href="${company_about_url}">${company_about_urltext}</a>
</li> </li>
</ul> </ul>
</div> </div>
<!-- TODO: determine if Open edX needs verification techniques and if so how to support? --> <!-- TODO: determine if Open edX needs verification techniques and if so how to support? -->
<div class="supplemental__how"> <div class="content-supplemental-how">
<h2 class="title">${certificate_verify_title}</h2> <h2 class="title">${certificate_verify_title}</h2>
<div class="copy"> <div class="copy">
<p>${certificate_verify_description}</p> <p>${certificate_verify_description}</p>
</div> </div>
<ul class="list list--actions"> <ul class="list list-actions">
<li class="item item--action"> <li class="item item-action">
<a class="action action--moreinfo" href="${certificate_verify_url}">${certificate_verify_urltext}</a> <a class="action action-moreinfo" href="${certificate_verify_url}">${certificate_verify_urltext}</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="supplemental__certificates"> <div class="content-supplemental-certificates">
<h2 class="title">${certificate_info_title}</h2> <h2 class="title">${certificate_info_title}</h2>
<div class="copy"> <div class="copy">
<p>${certificate_info_description}</p> <p>${certificate_info_description}</p>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<%include file="_assets-primary.html" /> <%include file="_assets-primary.html" />
</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()} ${self.body()}
<%include file="_assets-secondary.html" /> <%include file="_assets-secondary.html" />
</body> </body>
......
...@@ -4,27 +4,27 @@ ...@@ -4,27 +4,27 @@
<%inherit file="certificate-base.html" /> <%inherit file="certificate-base.html" />
<div class="wrapper--view"> <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> </div>
<div class="feedback__support"> <div class="feedback-support">
<h3 class="title">${_("Looking for a Particular Certificate?")}</h3> <h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
<div class="copy"> <div class="copy">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<div class="feedback__warning"> <div class="feedback-warning">
<h3 class="title">Please Note</h3> <h3 class="title">Please Note</h3>
<div class="copy"> <div class="copy">
<p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p> <p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
......
...@@ -9,43 +9,43 @@ ...@@ -9,43 +9,43 @@
<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> </div>
<article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment"> <article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment">
<div class="accomplishment__statement"> <div class="accomplishment-statement">
<p class="copy"> <p class="copy">
<span class="copy__name">${accomplishment_copy_name}</span> <span class="copy-name">${accomplishment_copy_name}</span>
<span class="copy__context">${accomplishment_copy_description_full}</span> <span class="copy-context">${accomplishment_copy_description_full}</span>
<span class="copy__course"> <span class="copy-course">
<span class="copy__course__org">${accomplishment_copy_course_org}</span> <span class="copy-course-org">${accomplishment_copy_course_org}</span>
<span class="copy__course__name">${accomplishment_copy_course_name}</span> <span class="copy-course-name">${accomplishment_copy_course_name}</span>
</span> </span>
<span class="copy__context">${accomplishment_copy_course_description}</span> <span class="copy-context">${accomplishment_copy_course_description}</span>
</p> </p>
</div> </div>
<div class="accomplishment__details"> <div class="accomplishment-details">
<h3 class="title title--lvl2 sr">${accomplishment_more_title}</h3> <h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3>
<ul class="list list--metadata"> <ul class="list list-metadata">
<li class="item certificate--type"> <li class="item certificate-type">
<span class="label">${_("Certificate Type")}</span> <span class="label">${_("Certificate Type")}</span>
<span class="value"> <span class="value">
${certificate_type_title} ${certificate_type_title}
<span class="explanation">${certificate_type_description} </span> <span class="explanation">${certificate_type_description} </span>
</span> </span>
</li> </li>
<li class="item certificate--id"> <li class="item certificate-id">
<span class="label">${certificate_id_number_title}</span> <span class="label">${certificate_id_number_title}</span>
<span class="value">${certificate_id_number}</span> <span class="value">${certificate_id_number}</span>
</li> </li>
<li class="item certificate--date"> <li class="item certificate-date">
<span class="label">${certificate_date_issued_title}</span> <span class="label">${certificate_date_issued_title}</span>
<span class="value">${certificate_date_issued}</span> <span class="value">${certificate_date_issued}</span>
</li> </li>
......
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