Fix search on all projects page

_includes/javascript.html

@@ -1,26 +1,4 @@
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-<script src="/assets/js/minigrid.min.js"></script>
-<script>
-  (function(){
-    var grid;
-    function init() {
-      if (document.querySelector('.projects') !== null) {
-        grid = new Minigrid({
-          container: '.projects',
-          item: '.project',
-          gutter: 15
-        });
-        grid.mount();
-        window.addEventListener('load', update);
-        window.addEventListener('resize', update);
-      }
-    }
-    function update() {
-      grid.mount();
-    }
-    document.addEventListener('DOMContentLoaded', init);
-  })();
-</script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

_includes/projects.html

@@ -1,20 +1,20 @@
-<ul class="projects">
+<ul class="projects{%if include.limit <= 3 or include.projects.size <= 3 %} three{% endif %}">
     {% for project in include.projects limit:include.limit %}
     <li class="project">
         <dl>
             <dt class="name">Name</dt>
-            <dd class="name"><a href="{{ project.url }}">{{ project.title }}</a></dd>
+            <dd class="name"><a class="name-data" href="{{ project.url }}">{{ project.title }}</a></dd>
             {% if project.thumbnail %}
                 <dt class="image">Image</dt>
                 <dd class="image"><img width="270" src="/assets/images/projects/{{ project.hackday }}/{{ project.thumbnail }}"></dd>
             {% endif %}
             <dt class="summary">Summary</dt>
-            <dd class="summary">{{ project.summary }}</dd>
+            <dd class="summary summary-data">{{ project.summary }}</dd>
             {% if include.hide_team == true %}
                 <dt class="team"><span>Team</span></dt>
             {%endif%}
             {% if project.team.size > 0 and include.hide_team != true %}
-                <dt class="team"><span>Team</span></dt>
+                <dt class="team team-data" members="{{ project.team | join: ' ' }}"><span>Team</span></dt>
                 {% for member in project.team %}
                     {% if member contains '@' %}
                     <dd class="team"><a href="https://twitter.com/{{ member | remove_first: "@" }}" target="_blank">{{ member }}</a></dd>

_sass/local-styles/_layout.scss

@@ -14,6 +14,21 @@ hr {
     clear: both;
 }
 
+.browsehappy {
+    margin: 0;
+    top: 0px;
+    z-index: 100;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    background: yellow;
+    border: 4px solid #eac302;
+    border-width: 4px 0;
+    font-size: 24px;
+    padding: 20px;
+}
+
 .content, .header div, .title-card div, .body, .metadata{
     max-width: 960px; //1170px;
     margin: 0 auto;

_sass/local-styles/_projects.scss

@@ -12,23 +12,49 @@
 }
 
 ul.projects {
-    width: auto;
+    //width: auto;
+    width: (300 * 3px) + (15 * 2px);
+
+    &.three {
+        column-width: inherit;
+        columns: unset;
+        li {
+            margin: 1px 0 15px 15px;
+            &:first-child {
+                margin-left: 0px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 980px){
+        //column-count: 2;
+        width: (300 * 2px) + 15px;
+    }
+    @media screen and (max-width: 680px){
+        //column-count: 1;
+        width: 300px;
+    }
 }
 
 .projects {
     list-style: none;
     margin: 0 auto;
     padding: 0;
     text-align: center;
+    //column-count: 3;
+    column-gap: 15px;
+    column-width: 300px;
+    column-fill: balance;
     li {
         text-align: left;
-        display: block; //inline-block breaks minigrid
+        display: inline-block;
         vertical-align: top;
         padding: 0;
-        margin: -1em 15px 15px 0px;
+        margin: 1px 15px 15px 0;
         width: 300px;
         //border: 1px solid lightgrey;
         box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+        break-inside: avoid;
     }
     dl {
         padding: 0 15px;
@@ -51,7 +77,7 @@ ul.projects {
     }
     dd.summary {
         text-align: left;
-        font-size: 0.85em; 
+        font-size: 0.85em;
     }
     dt.team {
         &::before {
@@ -92,4 +118,14 @@ ul.projects {
             display: none;
         }
     }
+}
+
+#project-list .fuzzy-search {
+    width: calc(100% - 30px);
+    margin: 20px 15px;
+    box-sizing: border-box;
+    padding: 10px;
+    font-size: 1.1em;
+    border: 0;
+    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
 }

projects.html

@@ -9,22 +9,24 @@
     URL: "http://paulclarke.com"
     Licence: "CC BY-NC"
 ---
-
-<div class="project-list">
-<input class="search" placeholder="Search" />
-<button class="sort" data-sort="name">
-  Sort by name
-</button>
-
+<div id="project-list">
+<input type="search" class="fuzzy-search" placeholder="Search" />
 {% assign projects = site.projects | sort: 'title' %}
 {% include projects.html projects=projects %}
 </div>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
+<script src="/assets/js/list.min.js"></script>
 <script>
 var options = {
-  valueNames: [ 'name-data', 'summary-data' ]
+  valueNames: [ 'name-data', 'summary-data', { name: 'team-data', attr: 'members' } ],
+  listClass: "projects"
 };
-
 var userList = new List('project-list', options);
+/*userList.on("searchComplete", function(){
+  if (userList.visibleItems.length <= 3) {
+    userList.list.setAttribute("class", "projects three");
+  } else {
+    userList.list.setAttribute("class", "projects");
+  }
+});*/
 </script>