Use Masonry tiling library on projects page

WasabiFan · WasabiFan · commit 109ae18c3e1b · 2016-08-10T18:57:58.000-07:00
diff --git a/_includes/head.html b/_includes/head.html
@@ -34,6 +34,10 @@
     <script src="/javascripts/jquery.loadTemplate-1.4.4.min.js"></script>
     <script src="/javascripts/respond.js"></script>
     <script src="/javascripts/ua-parser.min.js"></script>
+    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
+    {% if page.include_masonry %}
+    <script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
+    {% endif %}
 
     <!-- Caches data from requests to API endpoints -->
     <script src="/javascripts/api-cache.js"></script>
diff --git a/javascripts/style-helpers.js b/javascripts/style-helpers.js
@@ -3,4 +3,8 @@ $(document).ready(function () {
     $('dl').addClass('dl-horizontal');
     $('#markdown-toc').wrap('<div class="well pull-right" />');
     $('#markdown-toc').addClass('list-unstyled');
-})
+
+    $('#project-thumbnail-grid').imagesLoaded().progress(function() {
+        $('#project-thumbnail-grid').masonry('layout');
+    })
+})
diff --git a/projects/index.html b/projects/index.html
@@ -1,6 +1,7 @@
 ---
 title: Projects
 excerpt: "This is where we keep a collection of some of the projects that people are working on using ev3dev. We invite you to click through the links below to see what cool stuff ev3dev can do!"
+include_masonry: "true"
 ---
 
 <p class="lead">
@@ -15,21 +16,14 @@
     <a class="alert-link" href="/docs/tutorials/adding-new-project/">Create a page and send us a pull request</a>.
 </div>
 
-<div class="row">
-    {% assign col = 0 %}
+<div class="row" 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" %}
             {% unless post.id == '/projects/2014/03/21/Example-Project' %}
-                {% if col == 3 %}
-                    </div>
-                    <div class="row">
-                    {% assign col = 0 %}
-                {% endif %}
-                {% assign col = col | plus: 1 %}
-                
                 {% assign num_words = 60 %}
-                <div class="col-sm-6 col-md-4">
-                    <div class="thumbnail project-thumbnail-container">
+                <div class="col-xs-12 col-sm-6 col-md-4 project-thumbnail-container">
+                    <div class="thumbnail">
                         {% if post.youtube_video_id %}
                             {% assign num_words = 35 %}
                             <a href="{{ post.url }}">
