Add filtering for projects (addresses #51) + add fade animation

2026-10-12 22:14:08 +00:00 · 2016-11-14 03:30:04 +00:00
1 parent ee331055ef
commit 88205025ff
@@ -1,7 +1,21 @@
 +++
+# Tags: can be used for filtering projects.
+# Example: `tags = ["machine-learning", "deep-learning"]`
 tags = []
+
+# Project summary to display on homepage.
 summary = ""
+
+# Optional image to display on homepage.
+image_preview = ""
+
+# Optional image to display on project detail page.
 image = ""
-math = false
+
+# Optional external URL for project (replaces project detail page).
 external_link = ""
+
+# Does the project detail page use math formatting?
+math = false
+  
 +++
@@ -12,5 +12,26 @@ widget = "projects"
 # Order that this section will appear in.
 weight = 40

+# View.
+# Customize how projects are displayed.
+# Legend: 0 = list, 1 = cards.
+view = 1
+
+# Filter toolbar.
+# Add or remove as many filters (`[[filter]]` instances) as you like.
+# Use "*" tag to show all projects or an existing tag prefixed with "." to filter by specific tag.
+# To remove toolbar, delete/comment all instances of `[[filter]]` below.
+[[filter]]
+  name = "All"
+  tag = "*"
+  
+[[filter]]
+  name = "Deep Learning"
+  tag = ".deep-learning"
+
+[[filter]]
+  name = "Other"
+  tag = ".demo"
+
 +++

@@ -2,9 +2,9 @@
 client_name = ""
 date = "2016-04-27"
 image = ""
-image_preview = ""
+image_preview = "bubbles.jpg"
 summary = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-tags = []
+tags = ["deep-learning"]
 title = "Deep Learning"
 external_link = ""

@@ -2,9 +2,9 @@
 client_name = ""
 date = "2016-04-27"
 image = ""
-image_preview = ""
+image_preview = "boards.jpg"
 summary = "An example of linking directly to an external project website using `external_link`."
-tags = []
+tags = ["demo"]
 title = "External Project"
 external_link = "http://example.org"

@@ -2,6 +2,7 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
    <script src="{{ "/js/jquery-1.12.3.min.js" | relURL }}"></script>
    <script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
+    <script src="{{ "/js/isotope.pkgd.min.js" | relURL }}"></script>
    <script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
    {{ range .Site.Params.custom_js }}
    <script src="{{ "/js/" | relURL }}{{ . }}"></script>
@@ -15,36 +15,68 @@
      <div class="col-xs-12 col-md-8">
        {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}

-        <ul class="fa-ul">
-          {{ range where $.Data.Pages "Type" "project" }}
-          <li>
-            <span class="project-title">
-            {{ if .Content }}
-              <a href="{{ .Permalink }}">
-            {{ else }}
-              {{ with .Params.external_link }}<a href="{{ . }}">{{ end }}
-            {{ end }}
-            <i class="fa-li fa fa-files-o pub-icon" aria-hidden="true"></i>
-            {{ .Title }}
-            {{ if .Content }}</a>{{ else }}{{ with .Params.external_link }}</a>{{ end }}{{ end }}
-            </span>
-
-            {{ with .Params.summary }}<p class="project-summary">{{ . }}</p>{{ end }}
-
-            {{ if isset .Params "tags" }}
-            {{ $tagsLen := len .Params.tags }}
-            {{ if gt $tagsLen 0 }}
-            <div class="project-tags">
-              <i class="fa fa-tags"></i>
-              {{ range $k, $v := .Params.tags }}
-              {{ . }}{{ if lt $k (sub $tagsLen 1) }}, {{ end }}
+        <div class="project-toolbar">
+          <div id="filters">
+            <div class="btn-toolbar">
+              <div class="btn-group">
+              {{ range $page.Params.filter }}
+                <a href="#" data-filter="{{ .tag }}" class="btn btn-primary btn-large{{ if eq .tag "*" }} active{{ end }}">{{ .name }}</a>
              {{ end }}
+              </div>
            </div>
+          </div>
+        </div>
+
+        {{ if eq $page.Params.view 0 }}
+
+        <div id="container-projects" class="isotope">
+          <ul class="fa-ul" style="position: relative">
+
+            {{ range where $.Data.Pages "Type" "project" }}
+            <li class="project-item isotope-item {{ delimit .Params.tags " " }}">
+              <span class="project-title">
+              {{ if .Content }}
+              <a href="{{ .Permalink }}">
+              {{ else }}
+                {{ with .Params.external_link }}<a href="{{ . }}">{{ end }}
+              {{ end }}
+              <i class="fa-li fa fa-files-o pub-icon" aria-hidden="true"></i>
+              {{ .Title }}
+              {{ if .Content }}</a>{{ else }}{{ with .Params.external_link }}</a>{{ end }}{{ end }}
+              </span>
+              {{ with .Params.summary }}<p class="project-summary">{{ . }}</p>{{ end }}
+            </li>
            {{ end }}
-            {{ end }}
-          </li>
+
+          </ul>
+        </div>
+
+        {{ else }}
+
+        <div id="container-projects" class="row isotope">
+
+          {{ range $project := where $.Data.Pages "Type" "project" }}
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 project-item isotope-item {{ delimit .Params.tags " " }}">
+            <div class="card">
+              {{ with $project.Params.image_preview }}
+              <a href="{{ $project.Permalink }}" title="" class="card-image hover-overlay">
+                <img src="{{ "/img/" | relURL }}{{ . }}" alt="" class="img-responsive">
+              </a>
+              {{ end }}
+              <div class="card-text">
+                <h4><a href="{{ $project.Permalink }}">{{ .Title }}</a></h4>
+                <div class="card-desription">
+                  {{ with $project.Params.summary }}<p>{{ . }}</p>{{ end }}
+                </div>
+              </div>
+            </div>
+          </div>
          {{ end }}
-        </ul>
+
+        </div>
+
+        {{ end }}
+
      </div>
    </div>

@@ -113,6 +113,11 @@ video {
  display: block;
 }

+.img-responsive {
+  /* Extend Bootstrap declaration with centering. */
+  margin: 0 auto;
+}
+
 figcaption:before {
  font-weight: 700;
  text-transform: uppercase;
@@ -176,9 +181,20 @@ blockquote p:last-child {
 *  Home Sections
 **************************************************/

+@keyframes intro {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .home-section {
  background-color: rgb(255, 255, 255);
  padding: 110px 0 110px 0;
+  animation: intro 0.3s both;
+  animation-delay: 0.15s;
 }
@media screen and (max-width: 768px) {
  .home-section {
@@ -344,6 +360,11 @@ ul.share li:hover .fa {
 *  Blog Articles
 **************************************************/

+article {
+  animation: intro 0.3s both;
+  animation-delay: 0.15s;
+}
+
 .article-title {
  font-size: 1.75rem;
 }
@@ -497,6 +518,122 @@ ul.share li:hover .fa {
  color: #9c9c9c;
 }

+#container-projects {
+  display: block;
+  position: relative;
+  /*margin-top: 5rem;*/
+  overflow: hidden;
+}
+
+.project-toolbar{
+  margin-bottom: 2rem;
+}
+
+.project-item {
+  margin-bottom: 1.5rem;
+}
+
+.isotope-item {
+  transition-property: transform, opacity;
+  transition-duration: 0.8s;
+  z-index: 2;
+}
+
+.isotope-item:hover{
+  z-index: 3;
+}
+
+/*************************************************
+ *  Card component
+ **************************************************/
+
+.card {
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+  transition: all 0.2s ease-out;
+}
+
+.card .card-image {
+  display: block;
+  position: relative;
+  min-height: 100px;
+}
+
+.card h4 {
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.card h4 a {
+  color: #000;
+  border-bottom: solid 1px transparent;
+}
+
+.card h4 a:hover {
+  color: #000;
+  border-bottom: solid 1px #000;
+  text-decoration: none;
+}
+
+.card .card-text {
+  padding: 0.75rem 1rem 0.75rem;
+}
+
+.card .card-text p {
+  color: #999999;
+  font-size: 0.75rem;
+}
+
+.card p:last-child {
+  margin-bottom: 0;
+}
+
+.card .card-image.hover-overlay:before {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  content: " ";
+  opacity: 0;
+  transition: all 0.2s ease-out;
+}
+
+.card .card-image.hover-overlay:after {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  transform: translate(0, -50%);
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  font-family: 'FontAwesome';
+  content: '\f0c1';
+  text-align: center;
+  font-size: 3rem;
+  color: #666;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.card:hover .card-image.hover-overlay:before {
+  opacity: 0.8;
+}
+
+.card:hover .card-image.hover-overlay:after {
+  opacity: 0.6;
+}
+
 /*************************************************
 *  Contact
 **************************************************/
@@ -548,6 +685,7 @@ footer a#back_to_top i {

 .btn-primary {
  border-color: #0095eb;
+  background: #0095eb;
 }

 .btn-primary:hover,
@@ -558,6 +696,34 @@ footer a#back_to_top i {
  background: #0095eb;
 }

+/*************************************************
+ *  Toolbar Buttons
+ **************************************************/
+
+.btn-toolbar .btn {
+  font-size: 0.9rem;
+  padding: 10px 14px 9px;
+  border: none;
+}
+
+.btn-toolbar .btn:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.btn-toolbar .btn:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.btn-toolbar .btn.btn-primary:hover,
+.btn-toolbar .btn.btn-primary:focus {
+  background-color: rgba(0,149,235,0.6);
+}
+
+.btn-toolbar .btn.btn-primary:active,
+.btn-toolbar .btn.btn-primary.active {
+  background-color: rgba(0,89,175,1);
+}
+
 /*************************************************
 *  Button Outlines
 **************************************************/
@@ -89,6 +89,26 @@
    }
  });

+  /* ---------------------------------------------------------------------------
+   * Filter projects.
+   * --------------------------------------------------------------------------- */
+
+  var $container = $('#container-projects');
+
+  // Initialize Isotope.
+  $container.isotope({
+    itemSelector: '.isotope-item',
+    layoutMode: 'masonry'
+  });
+
+  // Filter items when filter link is clicked.
+  $('#filters a').click(function () {
+    var selector = $(this).attr('data-filter');
+    $container.isotope({filter: selector});
+    $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
+    return false;
+  });
+
  /* ---------------------------------------------------------------------------
   * On window load.
   * --------------------------------------------------------------------------- */
@@ -0,0 +1,12 @@
+/*!
+ * Isotope PACKAGED v3.0.1
+ *
+ * Licensed GPLv3 for open source use
+ * or Isotope Commercial License for commercial use
+ *
+ * http://isotope.metafizzy.co
+ * Copyright 2016 Metafizzy
+ */
+
+!function(t,e){"use strict";"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,s,a){function u(t,e,n){var o,s="$()."+i+'("'+e+'")';return t.each(function(t,u){var h=a.data(u,i);if(!h)return void r(i+" not initialized. Cannot call methods, i.e. "+s);var d=h[e];if(!d||"_"==e.charAt(0))return void r(s+" is not a valid method");var l=d.apply(h,n);o=void 0===o?l:o}),void 0!==o?o:t}function h(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new s(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(s.prototype.option||(s.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return u(this,t,e)}return h(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,s=t.console,r="undefined"==typeof s?function(){}:function(t){s.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var s=this._onceEvents&&this._onceEvents[t];o;){var r=s&&s[o];r&&(this.off(t,o),delete s[o]),o.apply(this,e),n+=r?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=-1==t.indexOf("%")&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;h>e;e++){var i=u[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s.isBoxSizeOuter=r=200==t(o.width),i.removeChild(e)}}function s(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var s=n(e);if("none"==s.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==s.boxSizing,l=0;h>l;l++){var f=u[l],c=s[f],m=parseFloat(c);a[f]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,y=a.paddingTop+a.paddingBottom,g=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,I=a.borderTopWidth+a.borderBottomWidth,z=d&&r,x=t(s.width);x!==!1&&(a.width=x+(z?0:p+_));var S=t(s.height);return S!==!1&&(a.height=S+(z?0:y+I)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(y+I),a.outerWidth=a.width+g,a.outerHeight=a.height+v,a}}var r,a="undefined"==typeof console?e:function(t){console.error(t)},u=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],h=u.length,d=!1;return s}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;i<e.length;i++){var n=e[i],o=n+"MatchesSelector";if(t[o])return o}}();return function(e,i){return e[t](i)}}),function(t,e){"function"==typeof define&&define.amd?define("fizzy-ui-utils/utils",["desandro-matches-selector/matches-selector"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("desandro-matches-selector")):t.fizzyUIUtils=e(t,t.matchesSelector)}(window,function(t,e){var i={};i.extend=function(t,e){for(var i in e)t[i]=e[i];return t},i.modulo=function(t,e){return(t%e+e)%e},i.makeArray=function(t){var e=[];if(Array.isArray(t))e=t;else if(t&&"number"==typeof t.length)for(vaLine truncated
+return t=a?function(t){return t&&a(r(t))}:function(t){return t&&r(t)}}function e(t,e){return t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&i.textContent}}return t}();d.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},l._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=a(e,this.options.sortAscending);this.filteredItems.sort(i),t!=this.sortHistory[0]&&this.sortHistory.unshift(t)}},l._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw new Error("No layout mode: "+t);return e.options=this.options[t],e},l._resetLayout=function(){e.prototype._resetLayout.call(this),this._mode()._resetLayout()},l._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},l._manageStamp=function(t){this._mode()._manageStamp(t)},l._getContainerSize=function(){return this._mode()._getContainerSize()},l.needsResizeLayout=function(){return this._mode().needsResizeLayout()},l.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},l.prepended=function(t){var e=this._itemize(t);if(e.length){this._resetLayout(),this._manageStamps();var i=this._filterRevealAdded(e);this.layoutItems(this.filteredItems),this.filteredItems=i.concat(this.filteredItems),this.items=e.concat(this.items)}},l._filterRevealAdded=function(t){var e=this._filter(t);return this.hide(e.needHide),this.reveal(e.matches),this.layoutItems(e.matches,!0),e.matches},l.insert=function(t){var e=this.addItems(t);if(e.length){var i,n,o=e.length;for(i=0;o>i;i++)n=e[i],this.element.appendChild(n.element);var s=this._filter(e).matches;for(i=0;o>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;o>i;i++)delete e[i].isLayoutInstant;this.reveal(s)}};var c=l.remove;return l.remove=function(t){t=o.makeArray(t);var e=this.getItems(t);c.call(this,t);for(var i=e&&e.length,n=0;i&&i>n;n++){var s=e[n];o.removeFrom(this.filteredItems,s)}},l.shuffle=function(){for(var t=0;t<this.items.length;t++){var e=this.items[t];e.sortData.random=Math.random()}this.options.sortBy="random",this._sort(),this._layout()},l._noTransition=function(t,e){var i=this.options.transitionDuration;this.options.transitionDuration=0;var n=t.apply(this,e);return this.options.transitionDuration=i,n},l.getFilteredItemElements=function(){return this.filteredItems.map(function(t){return t.element})},d});