Merge pull request oppia#2959 from anthkris/page-heading-order

Fix part of oppia#2862: create logical heading order
itaditya · Jan 25, 2017 · 9a49103 · 9a49103
2 parents b9563ed + 4e7c940
commit 9a49103
Show file tree

Hide file tree

Showing 15 changed files with 146 additions and 88 deletions.
diff --git a/core/templates/dev/head/components/summary_tile/collection_summary_tile_directive.html b/core/templates/dev/head/components/summary_tile/collection_summary_tile_directive.html
@@ -4,7 +4,7 @@
       <div class="title-section" style="background-color: <[getThumbnailBgColor()]>;">
         <img class="collection-corner-image" ng-src="/assets/images/general/collection_corner.svg" alt="">
         <img class="thumbnail-image" ng-src="<[getThumbnailIconUrl()]>">
-        <h2 class="activity-title"><[getCollectionTitle()]></h2>
+        <h3 class="activity-title"><[getCollectionTitle()]></h3>
       </div>
 
       <div>

diff --git a/core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html b/core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html
@@ -3,10 +3,10 @@
     <a ng-href="<[getExplorationLink()]>" target="<[openInNewWindow ? '_blank' : '_self']>">
       <div class="title-section" style="background-color: <[getThumbnailBgColor()]>;">
         <img class="thumbnail-image" ng-src="<[getThumbnailIconUrl()]>">
-        <h2 class="activity-title protractor-test-exp-summary-tile-title">
+        <h3 class="activity-title protractor-test-exp-summary-tile-title">
           <span ng-if="isWindowLarge"><[getExplorationTitle()|truncate:40]></span>
           <span ng-if="!isWindowLarge"><[getExplorationTitle()|truncate:40]></span>
-        </h2>
+        </h3>
 
         <!-- Note that if this is ng-if instead, the avatar area will not detect a mouseover and the tile will behave incorrectly. -->
         <div ng-show="isWindowLarge && avatarsList.length > 0" class="exploration-summary-avatars" ng-show="avatarsList.length > 0">
@@ -84,7 +84,7 @@ <h2 class="activity-title protractor-test-exp-summary-tile-title">
   </md-card>
 </script>
 
-<style> 
+<style>
   .oppia-activity-summary-tooltip .tooltip.right {
     bottom: -10px;
     min-width: 200px;

diff --git a/core/templates/dev/head/css/oppia.css b/core/templates/dev/head/css/oppia.css
@@ -3824,6 +3824,7 @@ md-card.preview-conversation-skin-supplemental-card {
   color: white;
   font-family: "Capriola", "Roboto", Arial, sans-serif;
   font-size: 1em;
+  font-weight: normal;
   line-height: 1.2em;
   margin: 12px;
   padding: 0;

diff --git a/core/templates/dev/head/domain/collection/CollectionNodeObjectFactory.js b/core/templates/dev/head/domain/collection/CollectionNodeObjectFactory.js
@@ -103,6 +103,11 @@ oppia.factory('CollectionNodeObjectFactory', [
         explorationSummaryBackendObject);
     };
 
+    CollectionNode.prototype.getCapitalizedObjective = function() {
+      return this._explorationSummaryObject.objective.charAt(0).toUpperCase() +
+              this._explorationSummaryObject.objective.slice(1);
+    };
+
     // Static class methods. Note that "this" is not available in static
     // contexts. This function takes a JSON object which represents a backend
     // collection node python dict.

diff --git a/core/templates/dev/head/pages/about/about.html b/core/templates/dev/head/pages/about/about.html
@@ -40,6 +40,7 @@ <h1>Oppia: education for all</h1>
         <div class="about-tab-container">
           <div class="about oppia-about-tab-content oppia-about-visible-content">
             <div class="oppia-static-card-content oppia-static-card-content-narrow">
+              <h2>About Oppia</h2>
               <div class="pull-right">
                 <em>Oppia "O-pee-yah" (Finnish) - "to learn"</em>
               </div>

diff --git a/core/templates/dev/head/pages/collection_player/collection_player.html b/core/templates/dev/head/pages/collection_player/collection_player.html
@@ -73,13 +73,13 @@
   <div ng-controller="CollectionPlayer">
     <background-banner></background-banner>
     <div ng-if="collection" class="oppia-collection-player-tiles-container">
-      <h2 ng-if="!collectionPlaythrough.hasFinishedCollection()" class="oppia-page-heading">
+      <h1 ng-if="!collectionPlaythrough.hasFinishedCollection()" class="oppia-page-heading">
         <span ng-if="!collectionPlaythrough.hasStartedCollection()" class="oppia-collection-player-title-font">Begin <[collection.getTitle()]>:</span>
         <span ng-if="collectionPlaythrough.hasStartedCollection()">Continue <[collection.getTitle()]>:</span>
-      </h2>
-      <h2 ng-if="collectionPlaythrough.hasFinishedCollection()" class="oppia-page-heading">
+      </h1>
+      <h1 ng-if="collectionPlaythrough.hasFinishedCollection()" class="oppia-page-heading">
         <span>You have finished the collection! Feel free to replay any explorations below.</span>
-      </h2>
+      </h1>
 
       <div ng-if="collection" class="oppia-exploration-list-table">
 
@@ -103,12 +103,9 @@ <h2 ng-if="collectionPlaythrough.hasFinishedCollection()" class="oppia-page-head
               </a>
             </td>
             <td class="hidden-md hidden-sm hidden-xs oppia-exploration-list-table-item">
-              <a ng-href="/explore/<[node.getExplorationId()]>"
-                 ng-mouseover="updateExplorationPreview(node.getExplorationId())"
-                 ng-mouseleave="togglePreviewCard()"
-                 class="oppia-dashboard-list-summary">
-                <[node.getExplorationSummaryObject().objective]>
-              </a>
+              <p>
+                <[node.getCapitalizedObjective()]>
+              </p>
             </td>
           </tr>
         </table>
@@ -136,7 +133,7 @@ <h2 ng-if="collectionPlaythrough.hasFinishedCollection()" class="oppia-page-head
                                     is-community-owned="summaryToPreview.community_owned"
                                     style="position: absolute; left: 75px; top: 30px; z-index: 10;">
           <exploration-summary-tile/>
-          
+
         </div>
       </div>
     </div>

diff --git a/core/templates/dev/head/pages/contact/contact.html b/core/templates/dev/head/pages/contact/contact.html
@@ -28,7 +28,7 @@ <h1>Get Involved!</h1>
         Thanks for your interest in helping out with the Oppia project!
       </p>
 
-      <h3>We're all volunteers</h3>
+      <h2 class="oppia-contact-h2">We're all volunteers</h2>
       <p>
         We're a team of volunteers around the world who want to improve access
         to high-quality education. Currently, we're working on building scalable
@@ -42,7 +42,7 @@ <h3>We're all volunteers</h3>
         <a href="mailto:[email protected]" class="inline-links">[email protected]</a>.
       </p>
 
-      <h3>How Oppia is different from other learning platforms</h3>
+      <h2 class="oppia-contact-h2">How Oppia is different from other learning platforms</h2>
       <p>
         There is lots of educational research that suggests that active learning
         and targeted feedback lead to large learning gains, and providing support
@@ -166,6 +166,13 @@ <h3>Security</h3>
   </div>
   <div class="oppia-footer-padding-below-banner">
   </div>
+  <style>
+    h2.oppia-contact-h2 {
+      font-size: 1.17em;
+      font-weight: bold;
+      text-align: left;
+    }
+  </style>
 {% endblock %}
 
 {% block footer%}

diff --git a/core/templates/dev/head/pages/donate/donate.html b/core/templates/dev/head/pages/donate/donate.html
@@ -20,37 +20,14 @@
 {% block content %}
   <div class="oppia-page-card oppia-static-content" ng-controller="Donate">
     <div class="oppia-donation-card-content-wide">
-      <div class="oppia-donate-info">
-        <div style="height: 0; margin: 60px auto 0px auto; width: 70%; padding-bottom: 56.25%; position: relative;">
-          <iframe title="Meet Oppia's Contributors" width="100%"
-                  height="100%" src="https://www.youtube.com/embed/OConyxG7HaM"
-                  frameborder="0" allowfullscreen
-                  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-          </iframe>
-        </div>
-        <h6 style="text-align: center;"><em>Hear from our Oppia community</em></h6>
-        <div style="margin: 0 auto; width: 70%;">
-          <p style="font-size: 0.825em;">
-            In 2012, Oppia started with a simple idea: to improve the education of
-            students around the world while improving the quality of teaching.
-            This vision has since turned into an educational platform with over
-            8,000 explorations that are used by almost 250,000 users worldwide.
-          </p>
-          <p style="font-size: 0.825em;">
-            Please donate to The Oppia Foundation, a registered 501(c)(3) nonprofit,
-            and join us in bringing the joys of teaching and learning to people
-            everywhere.
-          </p>
-        </div>
-      </div>
       <div class="oppia-donate-options">
         <div ng-if="windowIsNarrow">
-          <h2 style="color: #fff; margin-top: 60px;">Donate to the</h2>
-          <h2 style="color: #fff; margin-top: 10px;">Oppia Foundation</h2>
+          <h1 class="oppia-donate-h1">Donate to the <br>
+          Oppia Foundation</h1>
         </div>
         <div ng-if="!windowIsNarrow">
-          <h2 style="color: #fff; margin-top: 60px;">Donate to</h2>
-          <h2 style="color: #fff; margin-top: 10px;">The Oppia Foundation</h2>
+          <h1 class="oppia-donate-h1">Donate to <br>
+          The Oppia Foundation</h1>
         </div>
         <div style="text-align: center;">
           <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-submit="onDonateThroughPayPal()">
@@ -77,8 +54,47 @@ <h2 style="color: #fff; font-size: 20px; margin-bottom: 20px; margin-top: 20px;"
           <img ng-src="<[donateImgUrl]>" alt="Server costs, student outreach, marketing">
         </div>
       </div>
+      <div class="oppia-donate-info">
+        <div style="height: 0; margin: 60px auto 0px auto; width: 70%; padding-bottom: 56.25%; position: relative;">
+          <iframe title="Meet Oppia's Contributors" width="100%"
+                  height="100%" src="https://www.youtube.com/embed/OConyxG7HaM"
+                  frameborder="0" allowfullscreen
+                  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+          </iframe>
+        </div>
+        <h3 class="oppia-donate-h3"><em>Hear from our Oppia community</em></h3>
+        <div style="margin: 0 auto; width: 70%;">
+          <p style="font-size: 0.825em;">
+            In 2012, Oppia started with a simple idea: to improve the education of
+            students around the world while improving the quality of teaching.
+            This vision has since turned into an educational platform with over
+            8,000 explorations that are used by almost 250,000 users worldwide.
+          </p>
+          <p style="font-size: 0.825em;">
+            Please donate to The Oppia Foundation, a registered 501(c)(3) nonprofit,
+            and join us in bringing the joys of teaching and learning to people
+            everywhere.
+          </p>
+        </div>
+      </div>
+
     </div>
   </div>
+  <style>
+    h1.oppia-donate-h1 {
+      color: #fff;
+      font-size: 1.5em;
+      margin-top: 60px;
+      text-align: center;
+      line-height: 1.7em;
+    }
+    h3.oppia-donate-h3 {
+      font-size: .75em;
+      font-weight: normal;
+      margin: 2.33em 0;
+      text-align: center;
+    }
+  </style>
 {% endblock %}
 
 {% block footer_js %}

diff --git a/core/templates/dev/head/pages/error/error.html b/core/templates/dev/head/pages/error/error.html
@@ -21,7 +21,7 @@
 
     <div class="oppia-wide-panel oppia-error-wide-container">
       <div class="oppia-wide-panel-content protractor-test-error-container">
-        <h4>
+        <h1 class="oppia-error-h1">
           {% if code == 400 %}
             <span translate="I18N_ERROR_HEADER_400"></span>
             - Bad Request
@@ -35,27 +35,36 @@ <h4>
             <span translate="I18N_ERROR_HEADER_500"></span>
             - System Error
           {% endif %}
-        </h4>
+        </h1>
 
         <br>
 
         <img ng-src="<[oopsMintImgUrl]>" alt="Oops!" width="299" height="142"/>
-        <p><h3>
+        <p>
           {% if code == 400 %}
-            <h3 translate="I18N_ERROR_MESSAGE_400"></h3>
+            <h2 class="oppia-error-h2" translate="I18N_ERROR_MESSAGE_400"></h2>
           {% elif code == 401 %}
-            <h3 translate="I18N_ERROR_MESSAGE_401"></h3>
+            <h2 class="oppia-error-h2" translate="I18N_ERROR_MESSAGE_401"></h2>
           {% elif code == 404 %}
-            <h3 translate="I18N_ERROR_MESSAGE_404"></h3>
+            <h2 class="oppia-error-h2" translate="I18N_ERROR_MESSAGE_404"></h2>
           {% elif code == 500 %}
-            <h3 translate="I18N_ERROR_MESSAGE_500"></h3>
+            <h2 class="oppia-error-h2" translate="I18N_ERROR_MESSAGE_500"></h2>
           {% endif %}
         </p>
         <p><span translate="I18N_ERROR_NEXT_STEPS" translate-values="{issueTrackerUrl: 'https://github.com/oppia/oppia/issues/new', homeUrl: '/'}"></span></p>
       </div>
     </div>
-
   </div>
+  <style>
+    .oppia-error-h1 {
+      font-size: 1em;
+      margin: 1.33em 0;
+    }
+    .oppia-error-h2 {
+      font-size: 1.17em;
+      font-weight: 700;
+    }
+  </style>
 {% endblock %}
 
 {% block footer_js %}

diff --git a/core/templates/dev/head/pages/exploration_player/exploration_player.html b/core/templates/dev/head/pages/exploration_player/exploration_player.html
@@ -68,7 +68,7 @@
   <ul class="nav navbar-nav oppia-navbar-breadcrumb" ng-controller="LearnerViewBreadcrumb">
     <li>
       <span class="oppia-navbar-breadcrumb-separator"></span>
-      <span class="protractor-test-exploration-header oppia-exploration-header" itemprop="description">{{exploration_title}}</span>
+      <h1 class="oppia-exploration-h1"><span class="protractor-test-exploration-header oppia-exploration-header" itemprop="description">{{exploration_title}}</span></h1>
     </li>
     <li ng-click="showInformationCard()" tooltip="<['I18N_PLAYER_INFO_TOOLTIP' | translate]>" tooltip-placement="bottom" style="cursor: pointer;" class="protractor-test-exploration-info-icon">
       <i class="material-icons oppia-navbar-breadcrumb-icon" style="font-size: 20px;">&#xE88E;</i>
@@ -122,7 +122,14 @@ <h3>Suggest a Change</h3>
       <attribution-guide></attribution-guide>
     {% endif %}
   </div>
-
+  <style>
+    .oppia-exploration-h1 {
+      color: #ffffff;
+      display: inline;
+      font-size: 1em;
+      font-weight: normal;
+    }
+  </style>
   {% include 'components/attribution_guide/attribution_guide_directive.html' %}
   {% include 'components/embed_modal/embed_exploration_modal_directive.html' %}
   {% include 'components/gadget/gadget_directive.html' %}

diff --git a/core/templates/dev/head/pages/footer.html b/core/templates/dev/head/pages/footer.html
@@ -1,7 +1,7 @@
 <div class="oppia-footer-padding">
 </div>
 
-<footer class="oppia-footer">
+<footer class="oppia-footer" role="contentinfo">
   <div class="oppia-footer-container">
     <div class="row">
       <div class="col-sm-3">

diff --git a/core/templates/dev/head/pages/get_started/get_started.html b/core/templates/dev/head/pages/get_started/get_started.html
@@ -22,15 +22,15 @@ <h1>Get Started!</h1>
 
   <background-banner></background-banner>
   <div class="oppia-page-card oppia-static-content oppia-static-content-below-banner">
-    <div class="oppia-static-card-content oppia-static-card-content-narrow">
+    <div class="oppia-static-card-content oppia-static-card-content-narrow oppia-get-started">
 
       <p>
         Creating an exploration is easy and free. Share your knowledge with
         students around the world, and get feedback you can use to improve
         your exploration's effectiveness.
       </p>
 
-      <h3>Choose a Topic</h3>
+      <h2>Choose a Topic</h2>
       <p>All you need to get started is a topic you want to teach. You can
         create an exploration about any topic, large or small. The ideal size
         of topic for an exploration is one that you would cover in a single
@@ -39,7 +39,7 @@ <h3>Choose a Topic</h3>
       </p>
 
 
-      <h3>Create Your Exploration</h3>
+      <h2>Create Your Exploration</h2>
       <p>
         When you have chosen a topic, just click ‘Create’, and log in with your Google account.
         If you don't have a Google account, you can <a href="https://accounts.google.com/SignUp" target="new">create one here</a>.
@@ -63,14 +63,14 @@ <h3>Create Your Exploration</h3>
         More information about creating explorations can be found <a href="https://oppia.github.io/#/CreatingAnExploration" target="new">here</a>.
       </p>
 
-      <h3>Publish Your Exploration</h3>
+      <h2>Publish Your Exploration</h2>
       <p>
         Once you've created your exploration and you're ready for learners to see it, click the
         'Publish' button at the top of the page.  This will make your exploration available to
         learners around the world!
       </p>
 
-      <h3>Share Your Exploration</h3>
+      <h2>Share Your Exploration</h2>
       <p>
         After you publish the exploration, you can share it via a
         link, or even <a href="https://oppia.github.io/#/EmbeddingAnExploration" target="new">embed
@@ -79,7 +79,7 @@ <h3>Share Your Exploration</h3>
 
       <!-- todo: make it easy to get the right link to share, update this doc with that info -->
 
-      <h3>Improve Your Exploration</h3>
+      <h2>Improve Your Exploration</h2>
       <p>
         When learners go through your exploration, they can send you feedback to alert you to problems
         or to share ideas for making it better.
@@ -92,7 +92,7 @@ <h3>Improve Your Exploration</h3>
         step, or "go deeper" by asking another question.
       </p>
 
-      <h3>Get Involved</h3>
+      <h2>Get Involved</h2>
       <p>
         To get involved in the Oppia
         project and help us bring about our mission of free, high-quality
@@ -105,6 +105,13 @@ <h3>Get Involved</h3>
   </div>
   <div class="oppia-footer-padding-below-banner">
   </div>
+  <style>
+    .oppia-get-started h2 {
+      font-size: 1.17em;
+      font-weight: bold;
+      text-align: left;
+    }
+  </style>
 {% endblock %}
 
 {% block footer%}