From d7a5d24c1a9a8de3bec0387e218f522ec3d54da7 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 13 Mar 2015 14:23:56 -0400
Subject: [PATCH] certificates: moving HTML to documented standards

---
 .../certificates/_certificate-footer.html     | 14 ++++----
 .../certificates/_certificate-header.html     | 10 +++---
 .../_certificate-supplemental.html            | 20 +++++------
 .../certificates/certificate-base.html        |  2 +-
 lms/templates/certificates/invalid.html       | 16 ++++-----
 lms/templates/certificates/valid.html         | 34 +++++++++----------
 6 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/lms/templates/certificates/_certificate-footer.html b/lms/templates/certificates/_certificate-footer.html
index 61a22f1336..6dc665bcce 100644
--- a/lms/templates/certificates/_certificate-footer.html
+++ b/lms/templates/certificates/_certificate-footer.html
@@ -1,14 +1,14 @@
-<div class="wrapper--footer">
-  <footer class="footer--app" role="contentinfo" id="company-info">
-    <div class="copyright">
+<div class="wrapper-footer">
+  <footer class="footer-app" role="contentinfo" id="company-info">
+    <div class="footer-app-copyright">
       <p>${copyright_text}</p>
     </div>
-    <nav class="nav--footer">
-      <ul class="list list--legal">
-        <li class="nav__item">
+    <nav class="footer-app-nav">
+      <ul class="list list-legal">
+        <li class="nav-item">
           <a class="action" href="${company_tos_url}">${company_tos_urltext}</a>
         </li>
-        <li class="nav__item">
+        <li class="nav-item">
           <a class="action" href="${company_privacy_url}">${company_privacy_urltext}</a>
         </li>
       </ul>
diff --git a/lms/templates/certificates/_certificate-header.html b/lms/templates/certificates/_certificate-header.html
index 6109230edb..af5037cbcf 100644
--- a/lms/templates/certificates/_certificate-header.html
+++ b/lms/templates/certificates/_certificate-header.html
@@ -1,10 +1,10 @@
-<div class="wrapper--header">
-  <header class="header--app" role="banner">
-    <h1 class="title title--logo">
+<div class="wrapper-header">
+  <header class="header-app" role="banner">
+    <h1 class="title title-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 class="title title--sub">${logo_subtitle}</span>
+      <span class="title title-sub">${logo_subtitle}</span>
     </h1>
   </header>
 </div>
diff --git a/lms/templates/certificates/_certificate-supplemental.html b/lms/templates/certificates/_certificate-supplemental.html
index 946b9fe5d7..e92c8c286e 100644
--- a/lms/templates/certificates/_certificate-supplemental.html
+++ b/lms/templates/certificates/_certificate-supplemental.html
@@ -2,32 +2,32 @@
 <%! import mako.runtime %>
 <% mako.runtime.UNDEFINED = '' %>
 
-<aside class="content content--supplemental" role="complimentary"  id="validation-info">
-  <div class="supplemental__about">
+<aside class="content content-supplemental" role="complimentary"  id="validation-info">
+  <div class="content-supplemental-about">
     <h2 class="title">${company_about_title}</h2>
     <div class="copy">
       <p>${company_about_description}</p>
     </div>
-    <ul class="list list--actions">
-      <li class="item item--action">
-        <a class="action action--primary action--moreinfo" href="${company_about_url}">${company_about_urltext}</a>
+    <ul class="list list-actions">
+      <li class="item item-action">
+        <a class="action action-primary action-moreinfo" href="${company_about_url}">${company_about_urltext}</a>
       </li>
     </ul>
   </div>
 
   <!-- 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>
     <div class="copy">
       <p>${certificate_verify_description}</p>
     </div>
-    <ul class="list list--actions">
-      <li class="item item--action">
-        <a class="action action--moreinfo" href="${certificate_verify_url}">${certificate_verify_urltext}</a>
+    <ul class="list list-actions">
+      <li class="item item-action">
+        <a class="action action-moreinfo" href="${certificate_verify_url}">${certificate_verify_urltext}</a>
       </li>
     </ul>
   </div>
-  <div class="supplemental__certificates">
+  <div class="content-supplemental-certificates">
     <h2 class="title">${certificate_info_title}</h2>
     <div class="copy">
       <p>${certificate_info_description}</p>
diff --git a/lms/templates/certificates/certificate-base.html b/lms/templates/certificates/certificate-base.html
index 041bd52464..3ad2753a0e 100644
--- a/lms/templates/certificates/certificate-base.html
+++ b/lms/templates/certificates/certificate-base.html
@@ -25,7 +25,7 @@
         <%include file="_assets-primary.html" />
     </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()}
         <%include file="_assets-secondary.html" />
     </body>
diff --git a/lms/templates/certificates/invalid.html b/lms/templates/certificates/invalid.html
index 35d9d32759..bf75a6b6b5 100644
--- a/lms/templates/certificates/invalid.html
+++ b/lms/templates/certificates/invalid.html
@@ -4,27 +4,27 @@
 
 <%inherit file="certificate-base.html" />
 
-  <div class="wrapper--view">
+  <div class="wrapper-view">
     <%include file="_certificate-header.html" />
 
     <hr class="divider" />
 
-    <div class="wrapper--content">
+    <div class="wrapper-content">
 
-      <section class="content content--main" role="main">
-        <div class="status status--invalid" id="validation-status">
-          <h2 class="title title--lvl2">${_("This is an invalid certificate number")}</h2>
+      <section class="content content-main" role="main">
+        <div class="status status-invalid" id="validation-status">
+          <h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2>
         </div>
 
         <div class="feedback">
-          <div class="feedback__lead">
+          <div class="feedback-lead">
             <h3 class="title">${_("This Certificate Does Not Exist")}</h3>
             <div class="copy">
               <p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p>
             </div>
           </div>
 
-          <div class="feedback__support">
+          <div class="feedback-support">
             <h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
 
             <div class="copy">
@@ -32,7 +32,7 @@
             </div>
           </div>
 
-          <div class="feedback__warning">
+          <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>
diff --git a/lms/templates/certificates/valid.html b/lms/templates/certificates/valid.html
index 808cabd505..88d6413e15 100644
--- a/lms/templates/certificates/valid.html
+++ b/lms/templates/certificates/valid.html
@@ -9,43 +9,43 @@
 
   <hr class="divider" />
 
-  <div class="wrapper--content">
+  <div class="wrapper-content">
 
-    <section class="content content--main" role="main">
-      <div class="status status--valid" id="validation-status">
-        <h2 class="title title--lvl2">
+    <section class="content content-main" role="main">
+      <div class="status status-valid" id="validation-status">
+        <h2 class="title title-lvl2">
           ${document_banner}
           <span class="sr">:</span>
         </h2>
       </div>
 
       <article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment">
-        <div class="accomplishment__statement">
+        <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 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>
+            <span class="copy-context">${accomplishment_copy_course_description}</span>
           </p>
         </div>
-        <div class="accomplishment__details">
-          <h3 class="title title--lvl2 sr">${accomplishment_more_title}</h3>
-          <ul class="list list--metadata">
-            <li class="item certificate--type">
+        <div class="accomplishment-details">
+          <h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3>
+          <ul class="list list-metadata">
+            <li class="item certificate-type">
               <span class="label">${_("Certificate Type")}</span>
               <span class="value">
                 ${certificate_type_title}
                 <span class="explanation">${certificate_type_description} </span>
               </span>
             </li>
-            <li class="item certificate--id">
+            <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">
+            <li class="item certificate-date">
               <span class="label">${certificate_date_issued_title}</span>
               <span class="value">${certificate_date_issued}</span>
             </li>