Use masonry on tutorials page (#225)

WasabiFan · web-flow · commit 641c3aae71c6 · 2016-09-05T13:06:12.000-07:00
* Use masonry on tutorials page Fixes #222 * Use self-closing div on tutorials page
diff --git a/docs/tutorials/index.html b/docs/tutorials/index.html
@@ -1,22 +1,16 @@
 ---
 title: Tutorials
 excerpt: "Tutorials on a wide range of ev3dev functionality, including networking, motor control, and usage of extra hardware."
+include_masonry: "true"
 ---
 
 {% assign tutorials=site.pages | where: "category", "tutorials" | sort: "subject" | group_by: "subject" %}
 
-{% assign col = 0 %}
-<div class="row">
+<div class="row masonry-container" data-masonry='{ "itemSelector": ".tutorial-panel", "columnWidth": ".grid-sizer", "percentPosition": true }'>
+    <div class="grid-sizer col-xs-12 col-sm-6 col-md-6"/>
     {% for group in tutorials %}
-        {% if group.name != "" %}
-            {% if col == 2 %}
-                </div>
-                <div class="row">
-                {% assign col = 0 %}
-            {% endif %}
-            {% assign col = col | plus: 1 %}
-            
-            <div class="col-lg-6">
+        {% unless group.name == "" %}
+            <div class="col-xs-12 col-sm-6 col-md-6 tutorial-panel">
                 <div class="panel panel-default rounded-panel" id="group-{{ group.name | downcase | replace: ' ','-' }}">
                     <div class="panel-heading">{{ group.name }}</div>
                     <div class="panel-body">
@@ -34,6 +28,6 @@
                     </div>
                 </div>
             </div>
-        {% endif %}
+        {% endunless %}
     {% endfor %}
 </div>
diff --git a/javascripts/style-helpers.js b/javascripts/style-helpers.js
@@ -4,7 +4,7 @@ $(document).ready(function () {
     $('#markdown-toc').wrap('<div class="well pull-right" />');
     $('#markdown-toc').addClass('list-unstyled');
 
-    $('#project-thumbnail-grid').imagesLoaded().progress(function() {
-        $('#project-thumbnail-grid').masonry('layout');
+    $('.masonry-container').imagesLoaded().progress(function() {
+        $('.masonry-container').masonry('layout');
     })
 })
diff --git a/projects/index.html b/projects/index.html
@@ -16,7 +16,7 @@
     <a class="alert-link" href="/docs/tutorials/adding-new-project/">Create a page and send us a pull request</a>.
 </div>
 
-<div class="row" id="project-thumbnail-grid" data-masonry='{ "itemSelector": ".project-thumbnail-container", "columnWidth": ".grid-sizer", "percentPosition": true }'>
+<div class="row masonry-container" id="project-thumbnail-grid" data-masonry='{ "itemSelector": ".project-thumbnail-container", "columnWidth": ".grid-sizer", "percentPosition": true }'>
     <div class="grid-sizer col-xs-12 col-sm-6 col-md-4"></div>
     {% for post in site.posts %}
         {% if post.categories contains "projects" %}
