Merge remote-tracking branch 'upstream/v2.0' into v2.0

themes/webmaker/views/public/404.html

@@ -0,0 +1,28 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+  </div>
+  <div class="media card">
+    <!-- <img class="img badge" src=""> -->
+    <div class="bd">
+      <hgroup>
+        <h1>Not Found</h1>
+      </hgroup>
+      <p>Sorry, we couldn't find the page you were looking for.<p>
+      <p>
+        If you are looking to claim a badge, <a href="/claim">head over
+        to the claim page</a>
+      <p>
+      <p>
+        If you want to see the list of availible badges, try going to
+        the <a href="/">badge listing</a>
+      <p>
+    </div>
+  </div>
+{% endblock %}

themes/webmaker/views/public/500.html

@@ -0,0 +1,23 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+  </div>
+  <div class="media card">
+    <!-- <img class="img badge" src=""> -->
+    <div class="bd">
+      <hgroup>
+        <h1>Oh no! Something went wrong</h1>
+      </hgroup>
+      <p>
+        There was a problem trying to do whatever you just tried to
+        do. Please try again later.
+      <p>
+    </div>
+  </div>
+{% endblock %}

themes/webmaker/views/public/all.html

@@ -0,0 +1,40 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+    <div class="span10">
+      <strong>Webmaker Badges are here!</strong>
+      <p>
+        Badges are digital records of skills, achievements and participation. Now you can earn Webmaker Badges to recognize the skills that you learn while making awesome webmaking projects, as well as for participating in the Webmaker community and events.
+      </p>
+      <p>
+        Head over to <a href="https://thimble.webmaker.org">Thimble</a>, pick a project and sign in to start earning!
+      </p>
+    </div>
+  </div>
+  {% for badge in badges %}
+  <div class="media card">
+    <img class="img badge" src="{{ badge.relativeUrl('image')}}">
+    <div class="bd">
+      <hgroup>
+        <h1>{{ badge.name }}</h1>
+      </hgroup>
+      <dl class="dl-horizontal narrow-dt">
+        <dt>Description:</dt>
+        <dd>
+          {% if badge.criteria.content %}
+            {{ badge.criteria.content | markdown }}
+          {% else %}
+            {{ badge.description | stupidSafe }}
+          {% endif %}
+        </dd>
+      </dl>
+    </div>
+  </div>
+  {% endfor %}
+{% endblock %}

themes/webmaker/views/public/claim.html

@@ -0,0 +1,30 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+  </div>
+  <div class="media card">
+    <div class="bd">
+      <hgroup>
+        <h3>What's your claim code?</h3>
+      </hgroup>
+      <p class="notice">Spaces, dashes and lettercase don't matter, just type in the words</p>
+
+      <form method="post" class="claim-form" action="">
+        {% if missing %}
+          <p><strong class="error">Sorry, could not find a badge with that code.</strong></p>
+        {% endif %}
+
+        <input id="name" type="hidden" name="csrf" value="{{ csrf }}">
+        <input tabindex="1" type="text" name="code" placeholder="Enter your claim code" class="input" value="{{ code | default('') | e }}">
+        <input tabindex="2" type="submit" value="Get your badge!" class="button">
+      </form>
+
+    </div>
+  </div>
+{% endblock %}

themes/webmaker/views/public/confirm-claim.html

@@ -0,0 +1,41 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+  </div>
+  <div class="media card">
+    <img class="img badge" src="{{ badge.relativeUrl('image')}}">
+    <div class="bd">
+      <hgroup>
+        <h1>{{ badge.name }}</h1>
+      </hgroup>
+      <dl class="dl-horizontal narrow-dt">
+        <dt>Description:</dt>
+        <dd>
+          {% if badge.criteria.content %}
+            {{ badge.criteria.content | markdown }}
+          {% else %}
+            {{ badge.description | stupidSafe }}
+          {% endif %}
+        </dd>
+      </dl>
+      <hr>
+
+      <form method="post" action="/claim/confirm" class="confirm-form js-confirm-form">
+        <input type="hidden" name="csrf" value="{{ csrf }}">
+        <input type="hidden" name="code" value="{{ code }}">
+        <input tabindex="1" type="email" name="email" placeholder="you@example.org" class="input js-email-input" required>
+        <input tabindex="2" type="submit" value="Claim your badge" class="button js-submit-button">
+      </form>
+    </div>
+  </div>
+
+  <script src="https://beta.openbadges.org/issuer.js"></script>
+  <script src="/js/claim-award.js"></script>
+{% endblock %}
+

themes/webmaker/views/public/criteria.html

@@ -0,0 +1,29 @@
+{% extends "public/layout.html" %}
+{% block head %}
+  <link rel="stylesheet" href="/stylesheets/criteria.css">
+{% endblock %}
+{% block body %}
+  <div class="row">
+    <div class="span7">
+      <h2>Mozilla Webmaker Badges</h2>
+    </div>
+  </div>
+  <div class="media card">
+    <img class="img badge" src="{{ badge.relativeUrl('image')}}">
+    <div class="bd">
+      <hgroup>
+        <h1>{{ badge.name }}</h1>
+      </hgroup>
+      <dl class="dl-horizontal narrow-dt">
+        <dt>Description:</dt>
+        <dd>
+          {% if badge.criteria.content %}
+            {{ badge.criteria.content | markdown }}
+          {% else %}
+            {{ badge.description | stupidSafe }}
+          {% endif %}
+        </dd>
+      </dl>
+    </div>
+  </div>
+{% endblock %}

themes/webmaker/views/public/layout.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Mozilla Webmaker Badges</title>
+  <link rel="stylesheet" href="/stylesheets/opensans/stylesheet.css">
+  <link rel="stylesheet" href="/stylesheets/webmaker.css">
+  <link href="//www.mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet">
+  <!--[if lt IE 9]>
+  <script src="/js/html5shiv.js"></script>
+  <![endif]-->
+   <script src="/js/jquery.min.js"></script>
+  {% block head %}{% endblock %} 
+</head>
+<body>
+  <div class="wrapper bg-stone">
+    <header>
+      <div class="container">
+        <div class="logo">
+          <a href="#">
+            <img src="/img/header_logo.png" alt="Mozilla Webmaker Logo">
+          </a>
+        </div>
+        <a href="http://www.mozilla.org/" id="tabzilla">Mozilla</a>
+        <nav role="navigation">
+          <ul>
+            <li class="active">
+              <a href="#">Badges</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <section>
+      <div class="container">
+      {% block body %}{% endblock %}
+      </div>
+    </section>
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="span2">
+            <h2><img src="/img/footer-logo.png" alt="Webmaker Logo"></h2>
+          </div>
+          <nav class="span2">
+            <h3>About</h3>
+            <ul>
+                <li><a href="https://www.webmaker.org/en-US/about/">About Us</a></li>
+                <li><a href="mailto:mozparty@mozilla.org">Contact Us</a></li>
+                <li><a href="http://www.mozilla.org/en-US/privacy-policy.html">Privacy Policy</a></li>
+                <li><a href="http://www.mozilla.org/en-US/about/legal.html">Legal Notices</a></li>
+            </ul>
+          </nav>
+          <nav class="span2">
+            <h3>Connect with us</h3>
+            <ul>
+                <li><a href="http://twitter.com/mozilla/">Twitter</a></li>
+                <li><a href="https://www.facebook.com/mozilla/">Facebook</a></li>
+            </ul>
+          </nav>
+          <nav class="span2">
+            <h3>Make something</h3>
+            <ul>
+                <li><a href="https://www.webmaker.org/en-US/projects/">Projects</a></li>
+                <li><a href="https://www.webmaker.org/en-US/tools/">Tools</a></li>
+                <li><a href="https://www.webmaker.org/en-US/events/">Events</a></li>
+            </ul>
+          </nav>
+          <nav class="span2">
+            <h3>Support our work</h3>
+            <ul>
+                <li><a href="https://donate.mozilla.org/page/contribute/join-mozilla?source=join_link">Donate</a></li>
+                <li><a href="https://mozillalabs.com/en-US/">Contribute</a></li>
+                <li><a href="https://donate.mozilla.org/page/contribute/firefoxtshirt">Buy a t-shirt</a></li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="//www.mozilla.org/tabzilla/media/js/tabzilla.js"></script> 
+  {% block scripts %}{% endblock %} 
+</body>
+</html>

views/public/404.html

@@ -1,28 +1,14 @@
 {% extends "public/layout.html" %}
-{% block head %}
-  <link rel="stylesheet" href="/stylesheets/criteria.css">
-{% endblock %}
+{% block title %}Not Found{% endblock %}
 {% block body %}
-  <div class="row">
-    <div class="span7">
-      <h2>Mozilla Webmaker Badges</h2>
-    </div>
-  </div>
-  <div class="media card">
-    <!-- <img class="img badge" src=""> -->
-    <div class="bd">
-      <hgroup>
-        <h1>Not Found</h1>
-      </hgroup>
-      <p>Sorry, we couldn't find the page you were looking for.<p>
-      <p>
-        If you are looking to claim a badge, <a href="/claim">head over
-        to the claim page</a>
-      <p>
-      <p>
-        If you want to see the list of availible badges, try going to
-        the <a href="/">badge listing</a>
-      <p>
-    </div>
-  </div>
+  <h1>Not Found</h1>
+  <p>Sorry, we couldn't find the page you were looking for.<p>
+  <p>
+    If you are looking to claim a badge, <a href="/claim">head over
+    to the claim page</a>
+  <p>
+  <p>
+    If you want to see the list of availible badges, try going to
+    the <a href="/">badge listing</a>
+  <p>
 {% endblock %}

views/public/500.html

@@ -1,23 +1,9 @@
 {% extends "public/layout.html" %}
-{% block head %}
-  <link rel="stylesheet" href="/stylesheets/criteria.css">
-{% endblock %}
+{% block title %}Oh no! Something went wrong{% endblock %}
 {% block body %}
-  <div class="row">
-    <div class="span7">
-      <h2>Mozilla Webmaker Badges</h2>
-    </div>
-  </div>
-  <div class="media card">
-    <!-- <img class="img badge" src=""> -->
-    <div class="bd">
-      <hgroup>
-        <h1>Oh no! Something went wrong</h1>
-      </hgroup>
-      <p>
-        There was a problem trying to do whatever you just tried to
-        do. Please try again later.
-      <p>
-    </div>
-  </div>
+  <h1>Oh no! Something went wrong</h1>
+  <p>
+    There was a problem trying to do whatever you just tried to
+    do. Please try again later.
+  <p>
 {% endblock %}

views/public/all.html

@@ -1,30 +1,15 @@
 {% extends "public/layout.html" %}
-{% block head %}
-  <link rel="stylesheet" href="/stylesheets/criteria.css">
-{% endblock %}
+{% block title %}All Badges{% endblock %}
 {% block body %}
+  <h1>All Badges</h1>
+  {% for badge in badges %}
   <div class="row">
-    <div class="span7">
-      <h2>Mozilla Webmaker Badges</h2>
-    </div>
-    <div class="span10">
-      <strong>Webmaker Badges are here!</strong>
-      <p>
-        Badges are digital records of skills, achievements and participation. Now you can earn Webmaker Badges to recognize the skills that you learn while making awesome webmaking projects, as well as for participating in the Webmaker community and events.
-      </p>
-      <p>
-        Head over to <a href="https://thimble.webmaker.org">Thimble</a>, pick a project and sign in to start earning!
-      </p>
+    <div class="span3">
+      <img src="{{ badge.relativeUrl('image')}}">
     </div>
-  </div>
-  {% for badge in badges %}
-  <div class="media card">
-    <img class="img badge" src="{{ badge.relativeUrl('image')}}">
-    <div class="bd">
-      <hgroup>
-        <h1>{{ badge.name }}</h1>
-      </hgroup>
-      <dl class="dl-horizontal narrow-dt">
+    <div class="span9">
+      <h4 class="media-heading">{{ badge.name }}</h4>
+      <dl>
         <dt>Description:</dt>
         <dd>
           {% if badge.criteria.content %}
@@ -36,5 +21,6 @@ <h1>{{ badge.name }}</h1>
       </dl>
     </div>
   </div>
+  <br>
   {% endfor %}
 {% endblock %}