Ch-ch-ch-ch-changes

controllers/backpack.js

@@ -1,19 +1,43 @@
 module.exports = function (app) {
 
   app.get('/claim', function (req, res, next) {
-    res.send('GET /claim')
+    res.render('claim.html');
   });
 
-  app.post('/claim', function (req, res, next) {
-    res.send('POST /claim');
+  app.get('/claim/:badgeName', function (req, res, next) {
+    return res.redirect('/badges/'+req.params.badgeName+'/claim');
   });
 
   app.get('/backpack', function (req, res, next) {
-    res.render('user/backpack.html');
+    var badges = [];
+
+    for (var i = 0; i < 7; ++i) {
+      badges.push({
+        thumbnail: '/media/images/badge.png',
+        description: 'Badge blah in voluptate velit...',
+        url: '/badges/ae784f'
+      });
+    }
+
+    res.render('user/backpack.html', {
+      items: badges
+    });
   });
 
   app.get('/favorites', function (req, res, next) {
-    res.render('user/bookmarks.html')
+    var badges = [];
+
+    for (var i = 0; i < 3; ++i) {
+      badges.push({
+        thumbnail: '/media/images/badge.png',
+        description: 'Badge blah in voluptate velit...',
+        url: '/badges/ae784f'
+      });
+    }
+
+    res.render('user/bookmarks.html', {
+      items: badges
+    })
   })
 
 };

controllers/program.js

@@ -1,7 +1,81 @@
 module.exports = function (app) {
 
-  app.get('/make', function (req, res, next) {
-    res.send('GET /make');
+  function getFilters() {
+    var filters = [],
+        requested;
+
+    if (arguments.length) {
+      requested = Array.prototype.splice.call(arguments, 0);
+    } else {
+      requested = ['programs', 'orgs', 'ages'];
+    }
+
+    requested.forEach(function(filter) {
+      switch (filter) {
+        case 'programs':
+        case 'program':
+          filters.push({
+            name: 'program',
+            label: 'Program',
+            options: {
+              science: 'Science',
+              technology: 'Technology',
+              engineering: 'Engineering',
+              art: 'Art',
+              math: 'Math'
+            }
+          });
+          break;
+        case 'orgs':
+        case 'org':
+          filters.push({
+            name: 'org',
+            label: 'Organisation',
+            options: {}
+          });
+          break;
+        case 'ages':
+        case 'age':
+          filters.push({
+            name: 'age',
+            label: 'Age Group',
+            options: {
+              'lt-13': 'Under 13',
+              '13-14': '13 to 14',
+              '15-16': '15 to 16',
+              '17-18': '17 to 18',
+              'gt-18': 'Over 18'
+            }
+          });
+          break;
+      }
+    });
+
+    return filters;
+  }
+
+  app.get('/programs', function (req, res, next) {
+    res.send('GET /programs');
+  });
+
+  app.get('/programs/science', function (req, res, next) {
+    res.send('SCIENCE!!')
+  });
+
+  app.get('/programs/technology', function (req, res, next) {
+    res.send('TECHNOLOGY!!!')
+  });
+
+  app.get('/programs/engineering', function (req, res, next) {
+    res.send('ENGINEERING!!!')
+  });
+
+  app.get('/programs/art', function (req, res, next) {
+    res.send('ART!!!')
+  });
+
+  app.get('/programs/math', function (req, res, next) {
+    res.send('MATH!!!')
   });
 
   app.param('badgeName', function (req, res, next, badgeName) {
@@ -9,32 +83,54 @@ module.exports = function (app) {
     next();
   });
 
-  app.get('/programs?/science', function (req, res, next) {
-    res.send('SCIENCE!!')
+  app.get('/badges', function (req, res, next) {
+    var badges = [];
+
+    for (var i = 0; i < 12; ++i) {
+      badges.push({
+        thumbnail: '/media/images/badge.png',
+        description: 'Badge blah in voluptate velit...',
+        url: '/badges/ae784f'
+      });
+    }
+
+    res.render('badges/list.html', {
+      filters: getFilters(),
+      items: badges
+    });
   });
 
-  app.get('/programs?/technology', function (req, res, next) {
-    res.send('TECHNOLOGY!!!')
+  app.get('/badges/:badgeName', function (req, res, next) {
+    res.render('badges/single.html');
   });
 
-  app.get('/programs?/engineering', function (req, res, next) {
-    res.send('ENGINEERING!!!')
+  app.get('/badges/:badgeName/claim', function (req, res, next) {
+    res.render('badges/claim.html');
   });
 
-  app.get('/programs?/art', function (req, res, next) {
-    res.send('ART!!!')
+  app.get('/badges/:badgeName/favorite', function (req, res, next) {
+    return res.redirect('/login', 303);
   });
 
-  app.get('/programs?/math', function (req, res, next) {
-    res.send('MATH!!!')
-  });
-
-  app.get('/programs?/:badgeName', function (req, res, next) {
-    res.send('GET /program/badge')
+  app.get('/badges/:badgeName/unfavorite', function (req, res, next) {
+    return res.redirect('/favorites', 303);
   });
 
   app.get('/orgs', function (req, res, next) {
-    res.send('GET /orgs')
+    var orgs = [];
+
+    for (var i = 0; i < 12; ++i) {
+      orgs.push({
+        thumbnail: '/media/images/org.png',
+        description: 'Organisation blah irure dolor...',
+        url: '/orgs/some-organisation'
+      });
+    }
+
+    res.render('orgs/list.html', {
+      filters: getFilters('programs', 'ages'),
+      items: orgs
+    });
   });
 
   app.param('orgName', function (req, res, next, orgName) {
@@ -42,7 +138,15 @@ module.exports = function (app) {
     next();
   });
 
-  app.get('/orgs?/:orgName', function (req, res, next) {
-    res.send('GET /org/name');
+  app.get('/orgs/:orgName', function (req, res, next) {
+    res.render('orgs/single.html');
+  });
+
+  app.get('/orgs/:orgName/favorite', function (req, res, next) {
+    return res.redirect('/login', 303);
+  });
+
+  app.get('/orgs/:orgName/unfavorite', function (req, res, next) {
+    return res.redirect('/login', 303);
   });
 };

static/media/css/core.css

@@ -111,6 +111,11 @@ figure.thumbnail {
 	margin-top: 5px;
 }
 
+.thumbnail > a {
+	display: block;
+	text-align: center;
+}
+
 form .divider {
 	display: block;
 	margin: 2em 0;

static/media/css/core.min.css

@@ -9,5 +9,6 @@ html,body{margin:0;padding:0;background:#EEE;}
 ul.row{list-style:none;}
 figure.thumbnail{margin:0;}
 .thumbnail img{margin-top:5px;}
+.thumbnail>a{display:block;text-align:center;}
 form .divider{display:block;margin:2em 0;text-align:center;position:relative;}form .divider::before{content:"";position:absolute;left:0;top:50%;width:100%;border-top:solid 1px #CCC;}
 form .divider em{background:#FFF;padding:0 1em;position:relative;}

static/media/less/core.less

@@ -113,6 +113,11 @@ figure.thumbnail {
 	margin-top: 5px;
 }
 
+.thumbnail > a {
+	display: block;
+	text-align: center;
+}
+
 form .divider {
 	display: block;
 	margin: 2em 0;

views/auth/login.html

@@ -19,9 +19,11 @@
 					<span class="help-block"><small><a href="/login/password">Forgot password?</a></small></span>
 				</div>
 			</div>
-			<div class="form-actions">
-				<p><button type="submit" class="btn">Log In</button></p>
-				<small>Don't have an account? <a href="/signup">Sign up.</a></small>
+			<div class="control-group">
+				<div class="controls">
+					<p><button type="submit" class="btn">Log In</button></p>
+					<small>Don't have an account? <a href="/signup">Sign up.</a></small>
+				</div>
 			</div>
 		</fieldset>
 	</form>

views/auth/parent.html

@@ -18,9 +18,11 @@
 					<input type="email" id="input-email" name="email" placeholder="e.g. user@example.com">
 				</div>
 			</div>
-			<div class="form-actions">
-				<p><button type="submit" class="btn">Sign Up</button></p>
-				<small>Already have an account? <a href="/login">Log in.</a></small><br>
+			<div class="control-group">
+				<div class="controls">
+					<p><button type="submit" class="btn">Sign Up</button></p>
+					<small>Already have an account? <a href="/login">Log in.</a></small>
+				</div>
 			</div>
 		</fieldset>
 	</form>

views/auth/password.html

@@ -11,9 +11,11 @@
 					<input type="text" id="input-username" name="username" placeholder="e.g. user@example.com">
 				</div>
 			</div>
-			<div class="form-actions">
-				<p><button type="submit" class="btn">Submit</button></p>
-				<small>Don't have an account? <a href="/signup">Sign up.</a></small>
+			<div class="control-group">
+				<div class="controls">
+					<p><button type="submit" class="btn">Submit</button></p>
+					<small>Don't have an account? <a href="/signup">Sign up.</a></small>
+				</div>
 			</div>
 		</fieldset>
 	</form>

views/auth/signup-child.html

@@ -12,8 +12,10 @@
 					<input type="email" id="input-email" name="email" placeholder="e.g. user@example.com">
 				</div>
 			</div>
-			<div class="form-actions">
-				<p><button type="submit" class="btn">Submit</button></p>
+			<div class="control-group">
+				<div class="controls">
+					<p><button type="submit" class="btn">Submit</button></p>
+				</div>
 			</div>
 		</fieldset>
 	</form>

views/auth/signup.html

@@ -108,10 +108,12 @@
 					</select>
 				</div>
 			</div>
-			<div class="form-actions">
-				<p><button type="submit" class="btn">Sign Up</button></p>
-				<small>Already have an account? <a href="/login">Log in.</a></small><br>
-				<small>Parents and guardians - <a href="/signup/parents">sign up here!</a></small>
+			<div class="control-group">
+				<div class="controls">
+					<p><button type="submit" class="btn">Sign Up</button></p>
+					<small>Already have an account? <a href="/login">Log in.</a></small><br>
+					<small>Parents and guardians - <a href="/signup/parents">sign up here.</a></small>
+				</div>
 			</div>
 		</fieldset>
 	</form>

views/badges/claim.html

@@ -0,0 +1,29 @@
+{% extends 'badges/layout.html' %}
+{% set pageTitle = 'Claim Some Badge' %}
+{% set user = {} %}
+
+{% block content %}
+	<div class="row">
+		<div class="span4">
+			<img src="/media/images/badge-large.png">
+		</div>
+		<div class="span8">
+			<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<form method="get" class="form-horizontal well">
+				<fieldset>
+					<div class="control-group">
+						<label class="control-label" for="input-code">Claim Code</label>
+						<div class="controls">
+							<input type="text" id="input-code" name="code" placeholder="e.g. AE198QPM">
+						</div>
+					</div>
+					<div class="control-group">
+						<div class="controls">
+							<button type="submit" class="btn">Claim this badge</button>
+						</div>
+					</div>
+				</fieldset>
+			</form>
+		</div>
+	</div>
+{% endblock %}

views/badges/layout.html

@@ -0,0 +1 @@
+{% extends 'layout.html' %}

views/badges/list.html

@@ -0,0 +1,7 @@
+{% extends 'filter.html' %}
+{% set pageTitle = 'Badges' %}
+
+{% block item_actions %}
+	{{ super() }}
+	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+{% endblock %}

views/badges/single.html

@@ -0,0 +1,71 @@
+{% extends 'badges/layout.html' %}
+{% set pageTitle = 'Some Badge' %}
+{% set user = {} %}
+
+{% block content %}
+	<div class="row">
+		<div class="span4">
+			<img src="/media/images/badge-large.png">
+		</div>
+		<div class="span8">
+			<p>From <a href="/orgs/some-organisation">Some Organisation</a>.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+			<p class="text-right">
+				<a href="/badges/ae784f/claim" class="btn">Claim this badge</a>
+				<a href="/badges/ae784f/favorite" class="btn"><i class="icon-heart"></i> Add to your favorites</a>
+			</p>
+		</div>
+	</div>
+	<h3><a href="/badges">Related Badges</a></h3>
+	<ul class="thumbnails">
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+	</ul>
+{% endblock %}

views/claim.html

@@ -0,0 +1,57 @@
+{% extends 'layout.html' %}
+{% set pageTitle = 'Claiming Badges' %}
+
+{% block content %}
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<h3><a href="/badges">Recent Badges</a></h3>
+<ul class="thumbnails">
+	<li class="span3">
+		<figure class="thumbnail">
+			<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+			<figcaption class="caption">
+				<p>Badge blah in voluptate velit...</p>
+				<p class="text-right">
+					<a href="/badges/ae784f" class="btn">Details</a>
+					<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+				</p>
+			</figcaption>
+		</figure>
+	</li>
+	<li class="span3">
+		<figure class="thumbnail">
+			<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+			<figcaption class="caption">
+				<p>Badge blah in voluptate velit...</p>
+				<p class="text-right">
+					<a href="/badges/ae784f" class="btn">Details</a>
+					<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+				</p>
+			</figcaption>
+		</figure>
+	</li>
+	<li class="span3">
+		<figure class="thumbnail">
+			<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+			<figcaption class="caption">
+				<p>Badge blah in voluptate velit...</p>
+				<p class="text-right">
+					<a href="/badges/ae784f" class="btn">Details</a>
+					<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+				</p>
+			</figcaption>
+		</figure>
+	</li>
+	<li class="span3">
+		<figure class="thumbnail">
+			<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+			<figcaption class="caption">
+				<p>Badge blah in voluptate velit...</p>
+				<p class="text-right">
+					<a href="/badges/ae784f" class="btn">Details</a>
+					<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+				</p>
+			</figcaption>
+		</figure>
+	</li>
+</ul>
+{% endblock %}

views/filter.html

@@ -0,0 +1,69 @@
+{% extends 'layout.html' %}
+{% if not items %}{% set items = [] %}{% endif %}
+
+{% block content %}
+	{% block filter %}
+		{% if filters %}
+			<div class="navbar">
+				<form class="navbar-inner navbar-form form-inline" method="get">
+					<span class="brand">Filter:</span>
+					<div class="pull-right">
+						{% for filter in filters %}
+							<label for="filter-{{ filter.name }}">{{ filter.label }}</label>
+							<select id="filter-{{ filter.name }}" name="{{ filter.name }}" class="input-medium">
+								<option></option>
+								{% for value, label in filter.options %}
+									<option value="{{ value }}"{% if filter.selected == value %} selected="selected"{% endif %}>{{ label }}</option>
+								{% endfor %}
+							</select>
+						{% endfor %}
+						<noscript>
+							<input type="submit" value="Update" class="btn">
+						</noscript>
+					</div>
+				</form>
+			</div>
+		{% endif %}
+	{% endblock %}
+	{% block list_wrapper %}
+		<ul class="thumbnails">
+			{% block list %}
+				{% for item in items %}
+					{% block item %}
+						<li class="span3">
+							{% if item.template %}
+								{% include item.template %}
+							{% else %}
+								<figure class="thumbnail">
+									<a href="{{ item.url }}"><img src="{{ item.thumbnail }}"></a>
+									<figcaption class="caption">
+										<p>{{ item.description }}</p>
+										{% block item_actions_wrapper %}
+											<p class="text-right">
+												{% block item_actions %}
+													<a href="{{ item.url }}" class="btn">Details</a>
+												{% endblock %}
+											</p>
+										{% endblock %}
+									</figcaption>
+								</figure>
+							{% endif %}
+						{% endblock %}
+					</li>
+				{% endfor %}
+			{% endblock %}
+		</ul>
+	{% endblock %}
+	{% block pagination %}
+		<nav class="pagination pagination-centered">
+			<ul>
+				<li class="disabled"><span>&laquo;</span></li>
+				<li class="disabled"><span>1</span></li>
+				<li><a href="#">2</a></li>
+				<li><a href="#">3</a></li>
+				<li><a href="#">4</a></li>
+				<li><a href="#">&raquo;</a></li>
+			</ul>
+		</nav>
+	{% endblock %}
+{% endblock %}

views/layout.html

@@ -14,6 +14,9 @@
 				<h1><a href="/">Chicago Summer of Learning</a></h1>
 				<nav id="navigation">
 					<ul>
+						<li class="badges"><a href="/badges">Badges</a></li>
+						<li class="claim"><a href="/claim">Claim</a></li>
+						<li class="orgs"><a href="/orgs">Organisations</a></li>
 						{% if user %}
 							<li class="backpack"><a href="/backpack">My Badges</a></li>
 							<li class="backpack"><a href="/favorites">My Favorites</a></li>

views/orgs/layout.html

@@ -0,0 +1 @@
+{% extends 'layout.html' %}

views/orgs/list.html

@@ -0,0 +1,7 @@
+{% extends 'filter.html' %}
+{% set pageTitle = 'Organisations' %}
+
+{% block item_actions %}
+	{{ super() }}
+	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+{% endblock %}

views/orgs/single.html

@@ -0,0 +1,68 @@
+{% extends 'orgs/layout.html' %}
+{% set pageTitle = 'Some Organisation' %}
+
+{% block content %}
+	<div class="row">
+		<div class="span4">
+			<img src="/media/images/org-large.png">
+		</div>
+		<div class="span8">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+			<p class="text-right">
+				<a href="/orgs/some-organisation/favorite" class="btn"><i class="icon-heart"></i> Add to your favorites</a>
+			</p>
+		</div>
+	</div>
+	<h3><a href="/badges">Recent Badges</a></h3>
+	<ul class="thumbnails">
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+		<li class="span3">
+			<figure class="thumbnail">
+				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<figcaption class="caption">
+					<p>Badge blah in voluptate velit...</p>
+					<p class="text-right">
+						<a href="/badges/ae784f" class="btn">Details</a>
+						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+					</p>
+				</figcaption>
+			</figure>
+		</li>
+	</ul>
+{% endblock %}

views/user/backpack.html

@@ -1,72 +1,17 @@
-{% extends 'user/layout.html' %}
-
+{% extends 'filter.html' %}
 {% set pageTitle = 'My Badges' %}
+{% set user = {} %}
 
-{% block content %}
-	<ul class="thumbnails">
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Share</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<a href="/claim">
-				<figure class="thumbnail">
-					<img src="/media/images/add-badge.png" class="img-circle">
-					<figcaption class="caption">
-						<p>Claim another badge!</p>
-					</figcaption>
-				</figure>
-			</a>
-		</li>
-	</ul>
+{% block list %}
+	{{ super() }}
+	<li class="span3">
+		<figure class="thumbnail">
+			<a href="/claim"><img src="/media/images/add-badge.png"></a>
+			<figcaption class="caption">
+				<p>Claim another badge!</p>
+				<p class="text-right"><a href="/claim" class="btn">+1</a></p>
+			</figcaption>
+		</figure>
+		</a>
+	</li>
 {% endblock %}

views/user/bookmarks.html

@@ -1,26 +1,8 @@
-{% extends 'user/layout.html' %}
-
+{% extends 'filter.html' %}
 {% set pageTitle = 'My Favorites' %}
+{% set user = {} %}
 
-{% block content %}
-	<ul class="thumbnails">
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Details</a></p>
-				</figcaption>
-			</figure>
-		</li>
-		<li class="span3">
-			<figure class="thumbnail">
-				<img src="/media/images/badge.png" class="img-circle">
-				<figcaption class="caption">
-					<p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
-					<p class="text-right"><a href="#" class="btn">Details</a></p>
-				</figcaption>
-			</figure>
-		</li>
-	</ul>
+{% block item_actions %}
+	{{ super() }}
+	<a class="btn" href="/badges/ae784f/unfavorite"><i class="icon-remove-circle"></i></a>
 {% endblock %}