Massive design tweaks & add BSD sign up form

locale/en_US/makerparty.json

@@ -1,7 +1,6 @@
 {
   "===FIXME===": "===FIXEME=== ===FIXEME=== ===FIXEME=== ===FIXEME=== ===FIXEME===",
   "About Webmaker": "About Webmaker",
-  "Agreement PDF": "Agreement PDF",
   "Attend an Event": "Attend an Event",
   "Attend an Event Desc": "Join Maker Party by attending an event. Visit our <a href='https://events.webmaker.org'>events page</a> and see what's happening in your neighbourhood.",
   "Amazon": "Amazon",
@@ -43,7 +42,7 @@
   "Contact": "Contact",
   "Creativity Labs at Indiana University": "Creativity Labs at Indiana University",
   "Decoded": "Decoded",
-  "DIY.org Desc": "<b>DIY.org</b> made 250,000 projects with kids [where?]",
+  "DIY.org Desc": "<b>DIY.org</b> made 250,000 projects with kids worldwide.",
   "Partner Resource Package": "Partner Resource Package",
   "Donate": "Donate",
   "E-Skills": "E-Skills",
@@ -51,6 +50,7 @@
   "English": "English",
   "EPS": "EPS",
   "Events": "Events",
+  "Event Partner Guide": "Event Partner Guide",
   "EveryoneOn / Connect2Compete": "EveryoneOn / Connect2Compete",
   "Exposure Camp": "Exposure Camp",
   "Eyebeam": "Eyebeam",
@@ -99,7 +99,6 @@
   "MadLab": "MadLab",
   "Make Waves": "Make Waves",
   "Maker Education Initiative": "Maker Education Initiative",
-  "Maker Education Initiative Desc": "The <b>Maker Education Initiative</b> taught and trained [hundreds? of] teachers to [??]",
   "Maker Party": "Maker Party",
   "Maker Party 2013 Blog Posts": "Maker Party 2013 Blog Posts",
   "Maker Party History": "Maker Party History",
@@ -122,21 +121,23 @@
   "Partner Resource Package": "Partner Resource Package",
   "Partner Resource Package Desc": "The partner resource PDF contains everything you need to know to plan and throw a Maker Party event. The partner agreement outlines our expectations for event hosts.",
   "Partner with Mozilla to teach the web.": "Partner with Mozilla to teach the web.",
+  "Please enter your e-mail address.": "Please enter your e-mail address.",
+  "Please check this checkbox to proceed.": "Please check this checkbox to proceed.",
   "PNG": "PNG",
   "Previous Partners": "Previous Partners",
   "Previous Partners Desc": "From CERN’s Citizen Cyberspace Centre and the New York Hall of Science to Girls Learning Code and IndieWebCamp, our partners have embraced the collaborative the spirit of the web with hands-on learning in a fun and engaging atmosphere. Here’s a snapshot of previous partner involvement:",
   "Privacy Policy Checkbox": "I'm okay with you handling this info as you explain in your <a href='https://www.mozilla.org/privacy/policies/websites/' target='_blank'>privacy policy</a>.",
   "Promotional Partners": "Promotional Partners",
   "Promotional Partners Desc": "Support the effort to increase global web literacy by writing, taking photos, creating videos and helping us promote Maker Party on the web. We'll provide you with great content to share with your audience.",
+  "Promotional Partner Guide": "Promotional Partner Guide",
   "PyCon Canada": "PyCon Canada",
   "Read more": "Read more",
-  "Read more about the history of Maker Party.": "Read more about the history of Maker Party",
+  "More about the history of Maker Party": "More about the history of Maker Party",
   "Read the full blog post": "Read the full blog post",
   "Reel Works": "Reel Works",
   "Register Now!": "Register Now!",
   "Resources": "Resources",
-  "Resources Banner Desc": "Throwing a Maker Party event? We've got a fabulous resource guide [link to pdf] and fun graphics for you to print out, use on your blog or website, and add to your email invitations. Soon we'll post step-by-step instructions on finding a venue, choosing activities and promoting your event, plus we'll walk you through all the important details to consider for your big day.",
-  "Resource PDF": "Resource PDF",
+  "Resources Banner Desc": "Throwing a Maker Party event? We've got a fabulous <a href='https://amira.makes.org/thimble/LTc3NjQwNDk5Mg==/become-a-2014-maker-party-partner'>resource guide</a> and fun graphics for you to print out, use on your blog or website, and add to your email invitations. Soon we'll post step-by-step instructions on finding a venue, choosing activities and promoting your event, plus we'll walk you through all the important details to consider for your big day.",
   "See what people are saying about Maker Party": "See what people are saying about Maker Party",
   "Sesame Workshop: Joan Ganz Cooney Centre": "Sesame Workshop: Joan Ganz Cooney Centre",
   "Skillcrush": "Skillcrush",
@@ -146,7 +147,7 @@
   "Snapshot of Maker Party 2013 Paragraph 3": "<a href='https://popcorn.webmaker.org/'>Popcorn Maker</a> projects proved to be the most popular tool, and more than 35,000 Popcorn videos were created. <a href='https://thimble.webmaker.org/'>Thimble</a> was a hit as well, and more than 15,000 webpages were created or remixed with the easy-to-use tool.",
   "Snapshot of Maker Party 2013 Paragraph 4": "Maker Party received a lot of love from the media including a great video about Makers by <a href='http://about.tvo.org/blog/innovation-tvo/maker-movement-technology-based-cultural-phenomenon'>TVO</a> and a write-up in <a href='http://www.dazeddigital.com/artsandculture/article/17156/1/break-the-internet'>Dazed</a>.",
   "Sponsorship Partners": "Sponsorship Partners",
-  "Sponsorship Partners Desc": "===== FIXME =====",
+  "Sponsorship Partners Desc": "Your generous donation to Maker Party will help thousands of people around the world become creators, not just consumers of the web. Help us build the programing, train the mentors, and support our partners so people everywhere can gain the skills they need to skills to read, write, and participate effectively on the web. Be a hero for the open web and make an investment in the next generation of makers.",
   "StarDoll": "StarDoll",
   "TechMix": "TechMix",
   "TechnoCamps": "TechnoCamps",
@@ -173,7 +174,7 @@
   "Who can be a partner?": "Who can be a partner?",
   "Who can be a partner? Desc": "Anyone! Whether you're running events for a few individuals in your community, or you’re involved with an established organization hosting events for many people, we welcome your participation.",
   "Why Mozilla throws an annual Maker Party": "Why Mozilla throws an annual Maker Party",
-  "Why Mozilla throws an annual Maker Party Desc": "<a href='http://mozilla.org/''>Mozilla</a> believes the web is a global public resource that’s integral to modern life; it shapes how we learn, how we connect and how we communicate. But many of us don't understand its basic mechanics or what it means to be a citizen of the web. That’s why we’re so passionate about teaching web literacy through hands-on learning and making. Our goal is to help people move beyond simply consuming the web to understanding and creating it, so it remains open, accessible and ours.",
+  "Why Mozilla throws an annual Maker Party Desc": "<a href='http://mozilla.org/'>Mozilla</a> believes the web is a global public resource that’s integral to modern life; it shapes how we learn, how we connect and how we communicate. But many of us don't understand its basic mechanics or what it means to be a citizen of the web. That’s why we’re so passionate about teaching web literacy through hands-on learning and making. Our goal is to help people move beyond simply consuming the web to understanding and creating it, so it remains open, accessible and ours.",
   "Why partner?": "Why partner?",
   "Why partner? Desc": "Becoming a Maker Party partner is an opportunity to join a global movement to teach the mechanics, culture and citizenship of the web. Mozilla will support your participation every step of the way by assisting you with training, event guides, media resources, free gear for your events, promotion across Mozilla channels and more.",
   "Wordmark": "Wordmark",

public/js/ui.js

@@ -31,3 +31,67 @@ function autoRotatingQuotes(){
   rotate("quote-text");
   rotate("quote-source");
 }
+
+
+
+
+// Sign up to Get Maker Party Update
+
+$("#form-get-updates").submit(function(event){
+  event.preventDefault();
+  var form = $(this);
+  var validForm = validateSignUpForm();
+  console.log( "=== VALID FORM = " + validForm );
+  if (validForm) {
+
+    $.ajax({
+      url: form.attr("action"),
+      data: form.serialize(),
+      type: "POST",
+      crossDomain: true,
+      dataType: "json",
+      complete: function(jqXHR,textStatus){
+        // redirect to thank you page
+        window.location.href = "https://sendto.mozilla.org/page/st/maker-party-2014-save-the-date?action_code=FgxRWxYUOVIKQV0YAFcDTFM&td=TVHLTsMwEPwVKyeQmmD3FRouHBCIQwUSFyRA1sbZJBaOHflRURD_zoZWFMsH78x4Zz3-ynAAbbIqi70OOkQMUdtucd1NcKHckM2ymsBcORtBxTzqAUlOsMdGe1RRJm8OiOySbo5HWYMxLh4rN0a5mzibjJllwSWvjm1Cqv-XY-8s_umiIxfZaoMhq17eCNGdTaNsnR_kr5eYc7qlPEJE2Ux-cy6WOV_mYs34vFqVFV-fFHqU0DSeZOvLQpSbYl0WZXniU0AvoUM7ddq6T20MvF6sCs7OtqC0jS70V-zeRjSMAPbwxJ6Z4MXmivldNb8s-Dm7Q_XuXi9oDk5bsFuKqXUfhBA9WfUwRrKZ5hcUr0k0OeiwJ0Lbw7NWbb2EElSuVrzOhcBFvmmgzfm_Ra2mHCz8_sgW3tGzR_Bxz6YI2BPskMUe2Q09jLSDa5LBo_qQY_b9Aw";
+      }
+    });
+  }
+
+
+});
+
+function validateSignUpForm() {
+  var form = $("#form-get-updates");
+  var email = form.find("input[name=email]");
+  var checkbox = form.find("input[name=custom-2517]");
+  console.log(email.val());
+  var validEmail = validateEmail( email.val() );
+  console.log("valid email = " + validEmail);
+  console.log("valid checkbox = " + checkbox.is(":checked"));
+  if ( !validEmail ) {
+    displayError(email);
+  } else {
+    hideError(email);
+  }
+
+  if ( !checkbox.is(":checked") ) {
+    displayError(checkbox);
+  } else {
+    hideError(checkbox);
+  }
+  return form.find(".has-error").length == 0;
+}
+
+
+function validateEmail(email) {
+  var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return regex.test(email);
+}
+
+function displayError(elem) {
+  elem.parents(".form-field").addClass("has-error").find(".help-block").show();
+}
+
+function hideError(elem) {
+  elem.parents(".form-field").removeClass("has-error").find(".help-block").hide();
+}

public/less/style.less

@@ -96,6 +96,12 @@
   border-top: 1px solid @lightgrey;
 }
 
+.section-divider.hide-on-desktop-divider {
+  @media (min-width: @screen-sm-min) {
+    display: none;
+  }
+}
+
 .navbar {
   border: none;
 }
@@ -158,12 +164,13 @@ ul.nav-webmaker-logo {
 }
 
 .navbar-makerparty .navbar-toggle {
-  background: @mp-lightblue;
-  color: @mp-darkgreen;
+  background: transparent;
+  color: #fff;
 }
 
 .navbar-makerparty .navbar-toggle:hover {
-  background: @mp-lightyellow;
+  background: @mp-darkgreen;
+  border-color: @mp-darkgreen;
 }
 
 .mp-banner {
@@ -302,10 +309,18 @@ footer {
     }
   }
   #form-get-updates {
+    .help-block {
+      display: none;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    #email-container {
+      overflow: hidden;
+    }
     input[type="email"] {
       float: left;
       width: 80%;
-      width: calc( 100% - 10px );
+      width: calc( 100% - 15px );
       padding-left: 5px;
       margin: 0;
       border: none;
@@ -430,8 +445,17 @@ footer {
 }
 
 .why-throw {
-  img.side-illust {
-    width: 100%;
+  .side-illust {
+    @media (max-width: @screen-xs-max) {
+      .text-center;
+    }
+    img {
+      width: 100%;
+      @media (max-width: @screen-xs-max) {
+        width: 50%;
+        margin-top: -70px;
+      }
+    }
   }
   .wordmarks {
     a img {
@@ -533,7 +557,7 @@ footer {
 .partners {
   .banner {
     .mp-banner;
-    background-image: url('../img/makerparty_partners_header_yellow.jpg');
+    background-image: url('../img/makerparty_partners_alternative.jpg');
   }
 }
 
@@ -563,7 +587,7 @@ footer {
 
 .previous-partners {
   img {
-    width: 100%;
+    width: 80%;
   }
   ul {
     padding-left: 1em;
@@ -602,6 +626,7 @@ footer {
   }
 }
 
+.read-more-links,
 .blog-read-more {
   a::after {
     content: " »";

views/home.html

@@ -86,6 +86,11 @@
     </div>
   </div>
 
+  <div class="container">
+    <div class="section-divider hide-on-desktop-divider">
+    </div>
+  </div>
+
   <div class="big-section">
     <div class="container">
       <div class="row">
@@ -124,8 +129,8 @@
   <div class="big-section">
     <div class="container why-throw">
       <div class="row">
-        <div class="col-md-4 col-sm-4">
-          <img class="side-illust" src="img/makerparty_world_illustration.png" />
+        <div class="col-md-4 col-sm-4 side-illust">
+          <img src="img/makerparty_world_illustration.png" />
         </div>
         <div class="col-md-8 col-sm-8">
           <div class="row">

views/layout.html

@@ -89,21 +89,29 @@
   <div class="get-mp-updates">
     <div class="container">
       <div class="row">
-        <div class="col-md-2 col-sm-2">
+        <div class="col-md-2 col-sm-2 side-illust">
           <img src="img/makerparty_bullhorn@2x.png" id="bullhorn" />
         </div>
         <div class="col-md-10 col-sm-10">
           <div class="row">
-            <div class="col-md-4 col-sm-7">
+            <div class="col-md-4 col-sm-12">
               <h3>{{ gettext("Get Maker Party Updates") }}</h3>
             </div>
-            <div class="col-md-8">
-              <form id="form-get-updates">
-                <input type="email" class="form-control" placeholder="Sign up for email updates" required />
-                <button type="submit" class="btn btn-mp-green"><i class="fa fa-caret-right"></i></button>
-                <div id="pp-container">
-                  <input type="checkbox" name="privacy" id="privacy" />
-                  <span><small>{{ gettext("Privacy Policy Checkbox") | safe }}</small></span>
+            <div class="col-md-8 col-sm-12">
+              <form id="form-get-updates" method="POST" name="signup" action="https://sendto.mozilla.org/page/s/maker-party-2014-save-the-date">
+                <div class="form-field">
+                  <div id="email-container">
+                    <input type="email" name="email" class="form-control" placeholder="Sign up for email updates"  />
+                    <button type="submit" name="submit-btn" class="btn btn-mp-green"><i class="fa fa-caret-right"></i></button>
+                  </div>
+                  <div class="help-block"><small>{{ gettext("Please enter your e-mail address.") }}</small></div>
+                </div>
+                <div id="pp-container" class="form-field has-error">
+                  <div>
+                    <input type="checkbox" name="custom-2517" id="privacy" />
+                    <span><small>{{ gettext("Privacy Policy Checkbox") | safe }}</small></span>
+                  </div>
+                  <div class="help-block"><small>{{ gettext("Please check this checkbox to proceed.") }}</small></div>
                 </div>
               </form>
             </div>

views/partners.html

@@ -108,17 +108,15 @@
         </div>
         <div class="col-md-8 col-sm-6">
           <h2>{{ gettext("Previous Partners") }}</h2>
-          <h4>{{ gettext("Previous Partners Desc") }}</h4>
-          ===== FIXME =====
-          <ul>
+          <p>{{ gettext("Previous Partners Desc") }}</p>
+          <ul class="list">
             <li>{{ gettext("Black Girls Code Desc") | safe }}</li>
             <li>{{ gettext("MIT Media Lab Desc") | safe }}</li>
             <li>{{ gettext("DIY.org Desc") | safe }}</li>
-            <li>{{ gettext("Maker Education Initiative Desc") | safe }}</li>
             <li>{{ gettext("Girl Scout Troops Desc") | safe}}</li>
           </ul>
           <p class="read-more-links">
-            <a href="/history">{{ gettext("Read more about the history of Maker Party.") }}</a>
+            <a href="/history">{{ gettext("More about the history of Maker Party") }}</a>
           </p>
         </div>
       </div>

views/resources.html

@@ -18,7 +18,7 @@
       <div class="row">
         <div class="col-md-12">
           <h1>{{ gettext("Resources") }}</h1>
-          <p class="lead">{{ gettext("Resources Banner Desc") }}</p>
+          <p class="lead">{{ gettext("Resources Banner Desc") | safe }}</p>
         </div>
       </div>
     </div>
@@ -37,18 +37,18 @@
       <div class="row">
         <div class="col-md-3 col-sm-3 col-xs-6 asset">
           <div class="doc-preview">
-            <i class="fa fa-file-text-o"></i>
+            <a href="https://amira.makes.org/thimble/MzQ3NjY4NDgw/maker-party-promotional-partner"><i class="fa fa-file-text-o"></i></a>
           </div>
           <div class="download-links">
-            <a href=""><i class="fa fa-download"></i>{{ gettext("Resource PDF") }}</a>
+            <a href="https://amira.makes.org/thimble/MzQ3NjY4NDgw/maker-party-promotional-partner">{{ gettext("Promotional Partner Guide") }}</a>
           </div>
         </div>
         <div class="col-md-3 col-sm-3 col-xs-6 asset">
           <div class="doc-preview">
-            <i class="fa fa-file-text-o"></i>
+            <a href="https://amira.makes.org/thimble/LTc3NjQwNDk5Mg==/become-a-2014-maker-party-partner"><i class="fa fa-file-text-o"></i></a>
           </div>
           <div class="download-links">
-            <a href=""><i class="fa fa-download"></i>{{ gettext("Agreement PDF") }}</a>
+            <a href="https://amira.makes.org/thimble/LTc3NjQwNDk5Mg==/become-a-2014-maker-party-partner">{{ gettext("Event Partner Guide") }}</a>
           </div>
         </div>
         <div class="col-md-3 col-sm-3 col-xs-6 asset">