Merge pull request #612 from mgballard/master

Cleanup! And mobile visual adjustments.

controllers/backpack.js

@@ -339,19 +339,19 @@ module.exports = function (app) {
 
   app.get('/favorites/:view?', function (req, res, next) {
     var badge = {
-      thumbnail: '/media/images/badge.png',
+      thumbnail: '/media/img/badge.png',
       description: 'Badge blah in voluptate velit...',
       url: '/badges/ae784f'
     };
 
     var org = {
-      thumbnail: '/media/images/org.png',
+      thumbnail: '/media/img/org.png',
       description: 'Organization blah irure...',
       url: '/orgs/some-organization'
     };
 
     var program = {
-      thumbnail: '/media/images/program.png',
+      thumbnail: '/media/img/program.png',
       description: 'Program blah sed eiusmod...',
       url: '/programs/ae784f'
     };

controllers/learn.js

@@ -43,15 +43,15 @@ module.exports = function(app) {
     var items = [];
 
     var itemOptions = [{
-      thumbnail: '/media/images/org.png',
+      thumbnail: '/media/img/org.png',
       description: 'Organization blah irure...',
       url: '/explore/orgs/some-organization'
     },{
-      thumbnail: '/media/images/program.png',
+      thumbnail: '/media/img/program.png',
       description: 'Program blah sed eiusmod...',
       url: '/explore/programs/some-program'
     },{
-      thumbnail: '/media/images/activity.png',
+      thumbnail: '/media/img/activity.png',
       description: 'Activity id est laborum...',
       url: '/explore/activities/some-activity'
     }];

controllers/program.js

@@ -373,7 +373,7 @@ module.exports = function (app) {
 
     for (var i = 0; i < 12; ++i) {
       orgs.push({
-        thumbnail: '/media/images/org.png',
+        thumbnail: '/media/img/org.png',
         description: 'Organization blah irure...',
         url: '/orgs/some-organization'
       });

static/media/css/core.css

@@ -18,6 +18,9 @@ h4,
 p {
   font-family: 'Open Sans', sans-serif;
 }
+.row-fluid [class*="span"] {
+  margin-left: 0px;
+}
 #main {
   padding-top: 45px;
   padding-bottom: 25px;
@@ -408,6 +411,9 @@ nav.pagination ul li a {
     border-left: none;
     border-right: none;
   }
+  .navbar .nav li {
+    text-align: center;
+  }
   /*mobile footer*/
   .footer .upper {
     padding-top: 15px;
@@ -453,6 +459,11 @@ nav.pagination ul li a {
 #menu-login-form {
   padding: 10px;
   text-align: left;
+  line-height: 20px;
+}
+#menu-login-form .help-block {
+  margin-bottom: 0px;
+  margin-top: 5px;
 }
 #menu-login-form button {
   display: block;

static/media/css/jquery.fancybox.css

@@ -76,7 +76,7 @@
 }
 
 #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
-	background-image: url('../images/fancybox_sprite.png');
+	background-image: url('../img/fancybox_sprite.png');
 }
 
 #fancybox-loading {
@@ -94,7 +94,7 @@
 #fancybox-loading div {
 	width: 44px;
 	height: 44px;
-	background: url('../images/fancybox_loading.gif') center center no-repeat;
+	background: url('../img/fancybox_loading.gif') center center no-repeat;
 }
 
 .fancybox-close {
@@ -114,7 +114,7 @@
 	height: 100%;
 	cursor: pointer;
 	text-decoration: none;
-	background: transparent url('../images/blank.gif'); /* helps IE */
+	background: transparent url('../img/blank.gif'); /* helps IE */
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 	z-index: 8040;
 }
@@ -175,7 +175,7 @@
 	overflow: hidden;
 	display: none;
 	z-index: 8010;
-	background: url('../images/fancybox_overlay.png');
+	background: url('../img/fancybox_overlay.png');
 }
 
 .fancybox-overlay-fixed {

static/media/js/custom_logic.js

@@ -1,57 +1,45 @@
 $(document).ready(function(){
 
 var mob = 0;
-
 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) mob = 1
 
 	$('.show-tooltip').tooltip();
 
 	/*landing page overrides*/
 	if($('body.home').length != 0) {
-		var vidLink = $('<a href="#">watch video</a>').click(function(){
-			if($('#i_vid').length == 0) {
-				var bkgFade = $('<div id="bkg_fade" style="display:none;"></div>');
-				var vidWrap = $('<div id="i_vid_wrap" style="display:none;"></div>');
-				var vidClose = $('<a id="cl_i_vid" href="#">Close</a>').click(function(){
-					$('#i_vid_wrap').fadeOut(function(){
-						$(this).parent().fadeOut(function(){
-							$(this).remove();
+		if(!mob) {
+			var vidLink = $('li.video').click(function(){
+				if($('#i_vid').length == 0) {
+					var bkgFade = $('<div id="bkg_fade" style="display:none;"></div>');
+					var vidWrap = $('<div id="i_vid_wrap" style="display:none;"></div>');
+					var vidClose = $('<a id="cl_i_vid" href="#">Close</a>').click(function(){
+						$('#i_vid_wrap').fadeOut(function(){
+							$(this).parent().fadeOut(function(){
+								$(this).remove();
+							});
 						});
+						return false;
 					});
+					$('body').prepend($(bkgFade).fadeIn(function() {
+						$(this).append(vidWrap.append('<iframe id="i_vid" width="640" height="360" src="http://www.youtube.com/embed/6WwpwtYNsNk?autoplay=1&feature=player_detailpage" frameborder="0" allowfullscreen></iframe>', vidClose)).find('#i_vid_wrap').fadeIn();
+					}));
+				}
+				return false;
+			});	
+		}
+	} 
+	/*non-landing page mobile overrides*/
+	else {
+			/*sliding menu for movile devices*/
+			if(mob) { 
+				var dynWrap = $('<div id="dynWrap" style="display:none;"></div>');
+				var dynList = $('<li id="dyn"></li>');
+				var dynLink = $('<a href="#" title="">Menu</a>').click(function(){
+					$('#dynWrap').slideToggle();
 					return false;
 				});
-				$('body').prepend($(bkgFade).fadeIn(function() {
-					$(this).append(vidWrap.append('<iframe id="i_vid" width="640" height="360" src="http://www.youtube.com/embed/6WwpwtYNsNk?autoplay=1&feature=player_detailpage" frameborder="0" allowfullscreen></iframe>', vidClose)).find('#i_vid_wrap').fadeIn();
-				}));
-			}
-			return false;
-		});
-
-		/*landing page mobile overrides*/
-		if(mob) {
-			vidLink = '<a href="http://www.youtube.com/v/6WwpwtYNsNk">watch video</a>';
-		}
-		$('li.claim').after($('<li class="video"></li>').append(vidLink));
-		$('li.log-in').before($('.about'));
-
-		/*landing page menu text*/
-		$('li.claim a').append('<span> badges</span>');
-		$('li.learn a').append('<span> your city,</span>');
-		$('li.badges a').append('<span> Badges and</span>');
-		$('li.about a').append('<span> the program</span>')
-		$('li.challenges a').append('<span> your future.</span>');
-	} else {
-		
-		/*non-landing page mobile overrides*/
-		if(mob) { 
-			var dynWrap = $('<div id="dynWrap" style="display:none;"></div>');
-			var dynList = $('<li id="dyn"></li>');
-			var dynLink = $('<a href="#" title="">Menu</a>').click(function(){
-				$('#dynWrap').slideToggle();
-				return false;
-			});
-			$('ul.nav').prepend(dynList.append(dynLink), dynWrap);
-			$('ul.nav li').each(function(){
+				$('ul.nav').prepend(dynList.append(dynLink), dynWrap);
+				$('ul.nav li').each(function(){
 				if ($(this).attr("id") != "dyn") {
         			$(this).appendTo("#dynWrap");
     			}

static/media/less/core.less

@@ -14,6 +14,9 @@ html, body {
 html, body, h1, h2, h3, h4, p {
 	font-family:'Open Sans', sans-serif;
 }
+.row-fluid [class*="span"] {
+	margin-left:0px;
+}
 
 #main {
 	padding-top: 45px;
@@ -414,6 +417,9 @@ and (max-width : 599px) {
   				}
   			}
   		}
+  		.nav li {
+			text-align:center;
+		}
   	}
 /*mobile footer*/
  	.footer {
@@ -466,6 +472,11 @@ and (max-width : 599px) {
 #menu-login-form {
 	padding:10px;
 	text-align:left;
+	line-height:20px;
+	.help-block {
+		margin-bottom:0px;
+		margin-top:5px;
+	}
 
 	button {
 		display: block;

views/auth/login.html

@@ -6,7 +6,7 @@
 {% block content %}
 	<form class="form-horizontal row-fluid" method="post">
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-username">Email or Username</label>
 				<div class="controls">

views/auth/password-reset.html

@@ -6,7 +6,7 @@
 {% block content %}
 	<form class="form-horizontal row-fluid" method="post">
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-username">Email or Username</label>
 				<div class="controls">

views/auth/password.html

@@ -6,7 +6,7 @@
 {% block content %}
 	<form class="form-horizontal row-fluid" method="post">
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-username">Email or Username</label>
 				<div class="controls">

views/auth/signup-guardian.html

@@ -7,7 +7,7 @@
 	<form class="form-horizontal row-fluid" method="post">
 		<p class="lead">Create an account below to confirm and activate your child's Chicago Summer of Learning account and start the learning and earning!</p>
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-email">Email</label>
 				<div class="controls">

views/auth/signup-next-child.html

@@ -6,7 +6,7 @@
 {% block content %}
 	<form class="form-horizontal row-fluid" method="post">
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-email">Your Name</label>
 				<div class="controls">

views/auth/signup-next.html

@@ -6,7 +6,7 @@
 {% block content %}
 	<form class="form-horizontal row-fluid" method="post">
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-email">Your Name</label>
 				<div class="controls">

views/auth/signup.html

@@ -8,7 +8,7 @@
 	<form class="form-horizontal row-fluid" method="post">
 		<p class="lead">Explore badges you can earn and level up for citywide challenges. Create an account to get started!</p>
 		<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-		<fieldset class="span6 well">
+		<fieldset class="span12 well">
 			<div class="control-group">
 				<label class="control-label" for="input-username">Username</label>
 				<div class="controls">

views/badges/claim.html

@@ -5,7 +5,7 @@
 {% block content %}
     <div class="row">
         <div class="span4">
-            <img src="/media/images/badge-large.png">
+            <img src="/media/img/badge-large.png">
         </div>
         <div class="span8">
             <p>To claim the badge you've earned, enter the "claim code" written on the paper badge you received from your teacher, counselor or mentor.</p>

views/claim.html

@@ -30,7 +30,7 @@
 
     <h3>Already have a claim code?</h3>
     <form method="get" class="form-horizontal row-fluid">
-      <fieldset class="span6 well">
+      <fieldset class="span12 well">
         <div class="control-group">
           <label class="control-label" for="input-code">Claim Code</label>
           <div class="controls">

views/home.html

@@ -1,29 +1,3 @@
 {% extends 'layout.html' %}
 {% set bodyClass = 'home' %}
 {% set pageTitle = 'What are awesome things to do in Chicago this Summer?' %}
-
-{% block content %}
-<div class="row-fluid">
-	<div class="span4">
-		<a class="poster" href="/explore">
-			<img src="/media/img/icon_learn.png" alt="">
-		</a>
-		<h3 class="text-center">Learn</h3>
-		<p>Participate, play and learn! Find fun and rewarding stuff to do at organizations around the city, or online! There are even city-wide games that you can participate in this summer.</p>
-	</div>
-	<div class="span4">
-		<a class="poster" href="/earn">
-			<img src="/media/img/icon_badges.png" alt="">
-		</a>
-		<h3 class="text-center">Earn</h3>
-		<p>Get recognized for the cool things you do over the summer - earn digital badges that capture your work and show them off at your school or to employers in the fall.</p>
-	</div>
-	<div class="span4">
-		<a class="poster" href="/challenges">
-			<img src="/media/img/icon_challenges.png" alt="">
-		</a>
-		<h3 class="text-center">Level Up</h3>
-		<p>If you keep earning badges, you can unlock access to more cool stuff, including city-wide challenges and a summer party where you can showcase your work!</p>
-	</div>
-</div>
-{% endblock %}

views/layout.html

@@ -7,7 +7,7 @@
         <title>CSOL{% block title %}{% if pageTitle %} | {{ pageTitle }}{% endif %}{% endblock %}</title>
         <link rel="stylesheet" href="/media/bootstrap/css/bootstrap.css">
         <link rel="stylesheet" href="/media/css/core.css">
-        <link rel="icon" type="image/png" href="/media/images/favicon.png">
+        <link rel="icon" type="image/png" href="/media/img/favicon.png">
         <script type="text/javascript" src="//use.typekit.net/nht7hbp.js"></script>
         <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
         <!--[if lt IE 9]>
@@ -25,17 +25,22 @@
                             <div class="nav-wrap">
                                 <ul class="nav">
                                     <li class="learn{% if navItem == 'learn' %} active{% endif %}">
-                                        <a href="/explore">Explore</a>
+                                        <a href="/explore">Explore{% if bodyClass == 'home' %}<span> your city,</span>{% endif %}</a>
                                     </li>
                                     <li class="badges{% if navItem == 'badges' %} active{% endif %}">
-                                        <a href="/earn">Earn</a>
+                                        <a href="/earn">Earn{% if bodyClass == 'home' %}<span> badges and</span>{% endif %}</a>
                                     </li>
                                     <li class="challenges{% if navItem == 'challenges' %} active{% endif %}">
-                                        <a href="/challenges">Level Up</a>
+                                        <a href="/challenges">Level Up{% if bodyClass == 'home' %}<span> your future.</span>{% endif %}</a>
                                     </li>
                                     <li class="claim{% if navItem == 'claim' %} active{% endif %}">
                                         <a href="/claim">Claim</a>
                                     </li>
+                                    {% if bodyClass == 'home' %}
+                                        <li class="video">
+                                            <a href="http://www.youtube.com/v/6WwpwtYNsNk">Watch Video</a>
+                                        </li>
+                                    {% endif %}
                                     {% if user %}
                                         {% if user.type == 'learner' %}
                                             <li class="dropdown backpack{% if navItem == 'backpack' %} active{% endif %}">
@@ -74,8 +79,8 @@
                                                 <label for="menu-login-password">Password:</label>
                                                 <input type="password" id="menu-login-password" name="password" required="required">
                                                 <button type="submit" class="btn">Submit</button>
-                                                <small>Don't have an account? <a href="/signup">Sign up.</a></small>
-                                                <span class="help-block"><small><a href="/login/password">Forgot password?</a></small></span>
+                                                <small>Don't have an account? <a href="/signup">Sign up.</a>
+                                                <span class="help-block"><a href="/login/password">Forgot password?</a></span></small>
                                             </form>
                                         </li>
                                     {% endif %}
@@ -154,7 +159,7 @@
 
         {% block modal %}{% endblock %}
 
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script src="/media/js/jquery.min.js"></script>
         <script src="/media/bootstrap/js/bootstrap.js"></script>
         <script src="/media/js/custom_logic.js"></script>
         {% if _messages.modal %}

views/learn/activity/single.html

@@ -17,7 +17,7 @@
 	<ul class="thumbnails">
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<a href="/badges/ae784f"><img src="/media/img/badge.png"></a>
 				<figcaption class="caption">
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
@@ -28,7 +28,7 @@
 		</li>
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<a href="/badges/ae784f"><img src="/media/img/badge.png"></a>
 				<figcaption class="caption">
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
@@ -39,7 +39,7 @@
 		</li>
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<a href="/badges/ae784f"><img src="/media/img/badge.png"></a>
 				<figcaption class="caption">
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
@@ -50,7 +50,7 @@
 		</li>
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/badges/ae784f"><img src="/media/images/badge.png"></a>
+				<a href="/badges/ae784f"><img src="/media/img/badge.png"></a>
 				<figcaption class="caption">
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">

views/orgs/single.html

@@ -4,7 +4,7 @@
 {% block content %}
 	<div class="row">
 		<div class="span4">
-			<img src="/media/images/org-large.png">
+			<img src="/media/img/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>
@@ -17,7 +17,7 @@
 	<ul class="thumbnails">
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/programs/ae784f"><img src="/media/images/program.png"></a>
+				<a href="/programs/ae784f"><img src="/media/img/program.png"></a>
 				<figcaption class="caption">
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">
@@ -28,7 +28,7 @@
 		</li>
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/programs/ae784f"><img src="/media/images/program.png"></a>
+				<a href="/programs/ae784f"><img src="/media/img/program.png"></a>
 				<figcaption class="caption">
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">
@@ -39,7 +39,7 @@
 		</li>
 		<li class="span3">
 			<figure class="thumbnail">
-				<a href="/programs/ae784f"><img src="/media/images/program.png"></a>
+				<a href="/programs/ae784f"><img src="/media/img/program.png"></a>
 				<figcaption class="caption">
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">

views/user/applications.html

@@ -26,7 +26,7 @@
   {{ super() }}
   <li class="span3">
     <figure class="thumbnail">
-      <a href="/claim"><img src="/media/images/add-badge.png"></a>
+      <a href="/claim"><img src="/media/img/add-badge.png"></a>
       <figcaption class="caption">
         <p>Claim another badge!</p>
         <p class="text-right"><a href="/claim" class="btn">+1</a></p>