fix(widget): revert row-based project card view back to masonry

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()
         });
 

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"

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;
 }

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") }}

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 := "" }}