From 92c7617ace5f4cb0015a2c5913e49242335fcb72 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Mon, 18 Feb 2019 20:28:49 +0000
Subject: [PATCH] fix(widget): revert row-based project card view back to
 masonry

---
 assets/js/academic.js                  |  7 ++++++-
 data/assets.toml                       |  8 ++++----
 layouts/partials/css/academic.css      | 23 +++++++++++++++++++++++
 layouts/partials/project_li_card.html  |  2 +-
 layouts/partials/widgets/projects.html |  2 +-
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/assets/js/academic.js b/assets/js/academic.js
index a562ef1f..d90d7ba7 100644
--- a/assets/js/academic.js
+++ b/assets/js/academic.js
@@ -385,9 +385,11 @@
     $('.projects-container').each(function(index, container) {
       let $container = $(container);
       let $section = $container.closest('section');
-      let layout = 'masonry';
+      let layout;
       if ($section.find('.isotope').hasClass('js-layout-row')) {
         layout = 'fitRows';
+      } else {
+        layout = 'masonry';
       }
 
       $container.imagesLoaded(function() {
@@ -395,6 +397,9 @@
         $container.isotope({
           itemSelector: '.isotope-item',
           layoutMode: layout,
+          masonry: {
+            gutter: 20
+          },
           filter: $section.find('.default-project-filter').text()
         });
 
diff --git a/data/assets.toml b/data/assets.toml
index fde56442..4c5f3dd0 100644
--- a/data/assets.toml
+++ b/data/assets.toml
@@ -24,12 +24,12 @@
   sri = "sha256-GhM+5JHb6QUzOQPXSJLEWP7R73CbkisjzK5Eyij4U9w="
   url = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/%s/MathJax.js?config=TeX-AMS_CHTML-full"
 [js.isotope]
-  version = "3.0.4"
-  sri = "sha512-VDBOIlDbuC4VWxGJNmuFRQ0Li0SKkDpmGyuhAG5LTDLd/dJ/S0WMVxriR2Y+CyPL5gzjpN4f/6iqWVBJlht0tQ=="
+  version = "3.0.6"
+  sri = "sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
   url = "https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/%s/isotope.pkgd.min.js"
 [js.imagesLoaded]
-  version = "4.1.3"
-  sri = "sha512-umsR78NN0D23AzgoZ11K7raBD+R6hqKojyBZs1w8WvYlsI+QuKRGBx3LFCwhatzBunCjDuJpDHwxD13sLMbpRA=="
+  version = "4.1.4"
+  sri = "sha256-lqvxZrPLtfffUl2G/e7szqSvPBILGbwmsGE1MKlOi0Q="
   url = "https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/%s/imagesloaded.pkgd.min.js"
 [js.autotrack]
   version = "2.4.1"
diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 58cba87b..440aa671 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -1267,10 +1267,33 @@ article .article-metadata {
   margin-bottom: 2rem;
 }
 
+.project-card {
+  position: relative;
+  width: calc(33.3% - 2*20px); /* Fluid 3 columns (inc. 20px gutter) */
+}
+@media screen and (max-width: 1199px) {
+  .project-card {
+    width: calc(50% - 20px); /* Fluid 2 columns (inc. 20px gutter) */
+  }
+}
+@media screen and (max-width: 768px) {
+  .project-card {
+    width: 100%; /* 1 column */
+  }
+}
+
 .project-item {
   margin-bottom: 1.5rem;
 }
 
+.project-card.project-item {
+  margin: 0 0 20px 0; /* Set to Isotope's gutter size */
+}
+
+.project-card .card {
+  margin: 0; /* Remove default card margin and use Isotope gutter */
+}
+
 .project-showcase .project-item {
   margin-bottom: 3rem;
 }
diff --git a/layouts/partials/project_li_card.html b/layouts/partials/project_li_card.html
index 201ac6dc..25c3309d 100644
--- a/layouts/partials/project_li_card.html
+++ b/layouts/partials/project_li_card.html
@@ -7,7 +7,7 @@
 {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
 {{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
 
-<div class="col-12 col-md-6 col-lg-4 project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
+<div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
   <div class="card">
     {{ with $resource }}
     {{ $image := .Resize (printf "550x q90 %s") }}
diff --git a/layouts/partials/widgets/projects.html b/layouts/partials/widgets/projects.html
index 1693b810..d1e8c39b 100644
--- a/layouts/partials/widgets/projects.html
+++ b/layouts/partials/widgets/projects.html
@@ -63,7 +63,7 @@
       {{ end }}
     {{ end }}
 
-    <div class="row {{ if or $page.Params.filter (eq $page.Params.view 1) }}isotope projects-container{{end}} {{if eq $page.Params.view 1}}js-layout-masonry{{else}}js-layout-row{{end}} {{ if eq $page.Params.view 2 }}project-showcase mt-5{{end}}">
+    <div class="{{ if or $page.Params.filter (eq $page.Params.view 3) }}isotope projects-container{{end}} {{if eq $page.Params.view 3}}js-layout-masonry{{else}}row js-layout-row{{end}} {{ if eq $page.Params.view 5 }}project-showcase mt-5{{end}}">
       {{ range $idx, $item := where $.Site.RegularPages "Type" ($page.Params.folder | default "project") }}
         {{ $link := $item.RelPermalink }}
         {{ $target := "" }}