Merge pull request #16 from ednapiranha/teach

refactor mediaGallery to support multiple pages; bug 870982

public/js/base/mediaGallery.js

@@ -61,15 +61,25 @@ define(['jquery'],
         makeContainer = $makeContainer[0],
         randSize = 'large';
 
+    // If we're not in mobile view, we want to display multiple sizes for
+    // the home page and the medium size for the teach page.
     if (!isMobile) {
-      if (countLarge > 0) {
-        randSize = 'large';
-        countLarge --;
-      } else if (countMedium > 0) {
-        randSize = 'medium';
-        countMedium --;
-      } else {
-        randSize = 'small';
+      switch( $body[0].id ) {
+        case 'index':
+          if (countLarge > 0) {
+            randSize = 'large';
+            countLarge --;
+          } else if (countMedium > 0) {
+            randSize = 'medium';
+            countMedium --;
+          } else {
+            randSize = 'small';
+          }
+          break;
+
+        case 'teach':
+          randSize = 'medium';
+          break;
       }
     }
 
@@ -142,13 +152,14 @@ define(['jquery'],
           var $stickyBanner = $('<div class="make internal" id="banner-join">Join the Webmaker Revolution!</div>');
           $mainGallery.append( $stickyBanner );
 
-          wm.doSearch( 'featured', limit, searchCallback );
+          wm.doSearch( ['featured'], limit, searchCallback );
           packery.stamp( $stickyBanner[0] );
           packery.layout();
           break;
 
         case 'teach':
           // TODO: teach page search
+          wm.doSearch( ['featured', 'teach'], limit, searchCallback );
           break;
       }
     }

views/index.html

@@ -1,21 +1,8 @@
 {% extends "layout.html" %}
+
+{% include 'macros.html' %}
+
 {% block title %}Home{% endblock %}
 {% block body %}
-  <div class="main-gallery">
-    <div class="gutter-sizer"></div>
-    <div class="grid-sizer"></div>
-  </div>
-  <div class="make clone-item"></div>
-  <div class="make-back clone-item">
-    <h3 class="title"></h3>
-    <p>by <span class="author"></span></p>
-    <p><span class="description"></span></p>
-  </div>
-  <div class="event-back clone-item">
-    <h3 class="event-title"></h3>
-    <p><span class="date"></span></p>
-    <p><span class="place"></span></p>
-    <p><span class="description"></span></p>
-    <p>Organized by <span class="organizer"></span></p>
-  </div>
+  {{ gallery() }}
 {% endblock %}

views/macros.html

@@ -0,0 +1,19 @@
+{% macro gallery() %}
+  <div class="main-gallery">
+    <div class="gutter-sizer"></div>
+    <div class="grid-sizer"></div>
+  </div>
+  <div class="make clone-item"></div>
+  <div class="make-back clone-item">
+    <h3 class="title"></h3>
+    <p>by <span class="author"></span></p>
+    <p><span class="description"></span></p>
+  </div>
+  <div class="event-back clone-item">
+    <h3 class="event-title"></h3>
+    <p><span class="date"></span></p>
+    <p><span class="place"></span></p>
+    <p><span class="description"></span></p>
+    <p>Organized by <span class="organizer"></span></p>
+  </div>
+{% endmacro %}

views/teach.html

@@ -1,9 +1,8 @@
 {% extends "layout.html" %}
+
+{% include 'macros.html' %}
+
 {% block title %}Teach{% endblock %}
 {% block body %}
-
-  Teach stuff!!!!!!!!!
-
-{% endblock %}
-{% block scripts %}
+  {{ gallery() }}
 {% endblock %}