some code cleanup & wrapped sections in <main> with <section> tags

mmmavis · May 28, 2015 · 26068a0 · 26068a0
1 parent 7f591c6
commit 26068a0
Show file tree

Hide file tree

Showing 12 changed files with 344 additions and 332 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,14 +14,15 @@ to [Semantic Versioning](http://semver.org/).
   - Skip navigation has been added at the top of the page.
 
 ### Changed
+- The homepage has been refreshed to better inform
+the site vistors what they can do on the site.
 - The `dist` dir is now cleaned up frequently during
   development, ensuring that old files don't stay
   around for too long.
 - `lib/changelog.js bump` now makes it easier to issue
   new releases of the site.
 - The dev version modal now links to the latest release
   of the site if the current git revision is unavailable.
-- New homepage design
 
 ### Removed
 - `gulp-html-prettify` is no longer listed as a dependency

diff --git a/components/icon-buttons.jsx b/components/icon-buttons.jsx
@@ -2,14 +2,12 @@ var React = require('react');
 
 var IconButtons = React.createClass({
   render: function() {
-    var links = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
-    var classes;
     return (
       <div className="row icon-buttons">
         {
-          links.map(function(link, i){
+           React.Children.map(this.props.children, function(iconButton){
             return(
-              <div className="col-sm-4 col-md-4 col-lg-4" key={i}>{link}</div>
+              <div className="col-sm-4 col-md-4 col-lg-4">{iconButton}</div>
             )
           })
         }

diff --git a/components/icon-links.jsx b/components/icon-links.jsx
@@ -11,19 +11,21 @@ var IconLinks = React.createClass({
     var links = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
     var classes;
     return (
-      <div className="row icon-links">
-        {
-          links.map(function(link, i){
-            // we either have 2 or 3 icons in a IconLinks row
-            classes = (links.length === 2 && i === 0) ?
-                      "col-sm-4 col-md-4 col-lg-4 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" :
-                      "col-sm-4 col-md-4 col-lg-4";
-            return(
-              <div className={classes} key={i}>{link}</div>
-            )
-          })
-        }
-      </div>
+      <section>
+        <div className="row icon-links">
+          {
+            links.map(function(link, i){
+              // we either have 2 or 3 icons in a IconLinks row
+              classes = (links.length === 2 && i === 0) ?
+                        "col-sm-4 col-md-4 col-lg-4 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" :
+                        "col-sm-4 col-md-4 col-lg-4";
+              return(
+                <div className={classes} key={i}>{link}</div>
+              )
+            })
+          }
+        </div>
+      </section>
     );
   }
 });

diff --git a/less/common.less b/less/common.less
@@ -54,7 +54,10 @@ main {
 }
 
 section {
-  padding: 2.5rem;
+  padding: 1.5rem;
+  @media screen and (min-width: @screen-md-min) {
+    padding: 2.5rem;
+  }
 }
 
 a.bold-link {
@@ -155,7 +158,7 @@ html.no-js .no-js-warning {
 
 .caret-list {
   list-style-type: none;
-  padding-left: 2rem;
+  padding-left: 0;
   li {
     &:before {
       content: "\f363";

diff --git a/less/components/page.less b/less/components/page.less
@@ -40,7 +40,10 @@ a.skip-to-content:focus {
     }
 
     .intro {
-      padding: 2.5rem 0 0 2.5rem;
+      padding: 0 2.5rem;
+      h1 {
+        margin-bottom: 3rem;
+      }
       p, h2 {
         text-align: center;
         @media screen and (min-width: @screen-sm-min) {

diff --git a/pages/about.jsx b/pages/about.jsx
@@ -10,25 +10,23 @@ var config = require('../lib/config');
 var Intro = React.createClass({
   render: function () {
     return (
-        <div>
-          <h1>About Mozilla Learning Networks</h1>
-          <section className="intro">
-            <Illustration width={226} height={226}
-            className="img-circle"
-            src1x="/img/pages/about/hive-nyc-summer-quest.jpg"
-            alt="HiveLearningNYC 2014 Hive NYC Summer Quest Maker Party">
-              <p>We want more people to see themselves as citizens of the web. Mozilla Learning Networks offers programs and a global community dedicated to helping people learn the most important skills of our age: <em>the ability to read, write and participate in the digital world.</em></p>
-            </Illustration>
-          </section>
-        </div>
+      <section className="intro">
+        <h1>About Mozilla Learning Networks</h1>
+        <Illustration width={226} height={226}
+        className="img-circle"
+        src1x="/img/pages/about/hive-nyc-summer-quest.jpg"
+        alt="HiveLearningNYC 2014 Hive NYC Summer Quest Maker Party">
+          <p>We want more people to see themselves as citizens of the web. Mozilla Learning Networks offers programs and a global community dedicated to helping people learn the most important skills of our age: <em>the ability to read, write and participate in the digital world.</em></p>
+        </Illustration>
+      </section>
     );
   }
 });
 
 var OurFocus = React.createClass({
   render: function () {
     return (
-        <section className="row list-with-illust">
+        <section className="list-with-illust">
           <Illustration width={199} height={199}
           src1x="/img/pages/about/about-illustration.svg"
           alt="A graphic showing an illustration of a person, a book, some gears, a map pin, and a square acedemic cap">
@@ -60,7 +58,7 @@ var OurFocus = React.createClass({
 var OurGoal = React.createClass({
   render: function () {
     return (
-        <section className="row page-end our-goal">
+        <section className="page-end our-goal">
           <ImageTag alt="A stylised icon of a city"
               className="center-block" src1x="/img/pages/about/icon-city.png"
               src2x="/img/pages/about/[email protected]" width={292} height={102} />

diff --git a/pages/activities.jsx b/pages/activities.jsx
@@ -230,6 +230,8 @@ var ActivitiesPage = React.createClass({
               description="In this activity, learners create a remix of a Wikimedia page as they think critically about the intersection of gender, culture, technology and identity."
             />
             <CCLicenseNote/>
+          </section>
+          <section>
             <h2>More resources</h2>
             <p>
               Hive Learning Networks are city-based communities of educators who champion digital skills and web literacy through connected learning. Visit each city's portfolio to find more inspiration, resources and projects for teaching and learning.

diff --git a/pages/clubs-toolkit.jsx b/pages/clubs-toolkit.jsx
@@ -10,18 +10,16 @@ var config = require('../lib/config');
 var ToolkitIntro = React.createClass({
   render: function () {
     return (
-      <div>
+      <section className="intro">
         <h1>Clubs Toolkit</h1>
-        <section className="intro">
-          <Illustration
-          height={204} width={204}
-          src1x="/img/pages/clubs-toolkit/svg/icon-toolkit.svg"
-          alt="icon toolkit"
-          className="img-circle">
-            <h2>Get ready to start your club! Here are some best practices and resources to help you grow your local group.</h2>
-          </Illustration>
-        </section>
-      </div>
+        <Illustration
+        height={204} width={204}
+        src1x="/img/pages/clubs-toolkit/svg/icon-toolkit.svg"
+        alt="icon toolkit"
+        className="img-circle">
+          <h2>Get ready to start your club! Here are some best practices and resources to help you grow your local group.</h2>
+        </Illustration>
+      </section>
     );
   }
 });