layout with isotope

_layouts/music.html

@@ -23,7 +23,7 @@ layout: default
   <div class="trackcontainer">
   
     <h1>{{ page.title }}</h1>
-    <p style="margin-bottom: 0px;">{{ page.tags }}<br />{{ page.date | date: '%Y - %B' }}
+    <p style="margin-bottom: 0px;">{% for c in page.categories %}{{ c }}{% unless forloop.last %}&nbsp;|&nbsp;{% endunless %}{% endfor %}<br />{{ page.date | date: '%Y - %B' }}
   
       <br />
       <span id="tracktime" style="font-weight: normal;">&nbsp;</span></p>

_sass/isotope.scss

@@ -47,118 +47,6 @@
   border-radius: 0 0.5em 0.5em 0;
 }
 
-/* ---- isotope ---- */
-
-.grid {
-
-  // border: 1px solid #333;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  max-width: 1180px;
-  margin: auto;
-}
-
-/* clear fix */
-.grid:after {
-  content: '';
-
-  clear: both;
-}
-
-/* ---- .element-item ---- */
-
-.element-item {
-  flex: 1 0 250px;
-  height: 600px;
-  width: 300px;
-  background-repeat: no-repeat;
-  background-color: #ff00ff;
-  background-position-x: center;
-  background-position-y: -20px;
-  background-size: 100%;
-  transition: .2s ease-in-out;
-  border-radius: 3px;
-  margin: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-self: flex-end;
-  justify-items: flex-start;
-  flex-direction: row-reverse;
-
-  .cartouche {
-    background-color: #f4f4f4;
-    width: 100%;
-    height: 50%;
-    border-radius: 3px;
-    padding: 0 0 0 0;
-  }
-  
-  h4, h5, p {
-    flex: 0 0 auto;
-    margin: 10px;
-    padding: 5px;
-    border-radius: 3px;
-
-
-  }
-  h4 {
-    font-size: 1.5em;
-    background-color: #fff;
-
-  }
-  h5 {
-    font-size: 1em;
-    background-color: #fff;
-  }
-  p, a {
-    font-size: 1em;
-  }
-  a.cta {
-    border-radius: 100px;
-    padding: 10px 20px;
-    background: linear-gradient(270deg, #ff00ff, #426a00);
-    background-size: 400% 400%;
-    color: #fff;
-    -webkit-animation: AnimationName 15s ease infinite;
-    -moz-animation: AnimationName 15s ease infinite;
-    animation: AnimationName 15s ease infinite;
-    font-weight: 700;
-    text-decoration: none;
-    transition: 1s ease;
-
-    
-    @-webkit-keyframes AnimationName {
-        0%{background-position:0% 50%}
-        50%{background-position:100% 50%}
-        100%{background-position:0% 50%}
-    }
-    @-moz-keyframes AnimationName {
-        0%{background-position:0% 50%}
-        50%{background-position:100% 50%}
-        100%{background-position:0% 50%}
-    }
-    @keyframes AnimationName {
-        0%{background-position:0% 50%}
-        50%{background-position:100% 50%}
-        100%{background-position:0% 50%}
-    }
-  }
-  a:hover.cta {
-    background: #fff;
-    color: #ff00ff;
-    text-shadow: none;
-  }
-}
-
-
-.element-item>* {
-  margin: 0;
-  padding: 0;
-}
 
 
 

music.html

@@ -21,16 +21,65 @@ image: /assets/img/world.svg
   
   
 </div>
+
+<div class="button-group filters-button-group">
+
+  <button class="button is-checked" data-filter="*">show all</button>
+
+  <!-- create categories array-->
+  {% assign categories_array = "" | split:"|" %}
+
+  <!--Add each unique 'my_collection' category to the array-->
+  {% for post in site.tracks %}
+  {% for category in post.categories %}
+  {% assign categories_array = categories_array | push: category | uniq %}
+  {% endfor %}
+  {% endfor %}
+
+  <!--Output the categories-->
+  {% for category in categories_array %}
+
+  <button class="button" data-filter=".{{ category }}">{{ category }}</button>
+  {% endfor %}
+</div>
+
 <div class="musiflex">
 
   {% for track in site.tracks reversed %}
-  <div id="{{ track.uid }}" class="trackcontainer">
+  <div id="{{ track.uid }}" style="min-width:300px;" class="element-item trackcontainer {% for key in track.categories %}{{ key }} {% endfor %}">
     <a href="{{ track.url }}">
       <div class="track" style="background-image:url({{ track.image }});"></div>
       <h3>{{ track.title }}</h3>
     </a>
-    <p>{{ track.tags }}</p>
+    <p>{% for c in track.categories %}{{ c }}{% unless forloop.last %},&nbsp;{% endunless %}{% endfor %}</p>
   </div>
   {% endfor %}
   <div>{% include cookiemonster.html %}</div>
 </div>
+
+<script>
+  // external js: isotope.pkgd.js
+
+  // init Isotope
+  var $grid = $('.musiflex').isotope({
+    itemSelector: '.element-item',
+    layoutMode: 'fitRows'
+  });
+  // filter functions
+
+  // bind filter button click
+  $('.filters-button-group').on('click', 'button', function () {
+    var filterValue = $(this).attr('data-filter');
+    // use filterFn if matches value
+
+    $grid.isotope({ filter: filterValue });
+  });
+  // change is-checked class on buttons
+  $('.button-group').each(function (i, buttonGroup) {
+    var $buttonGroup = $(buttonGroup);
+    $buttonGroup.on('click', 'button', function () {
+      $buttonGroup.find('.is-checked').removeClass('is-checked');
+      $(this).addClass('is-checked');
+    });
+  });
+</script>

musicindex.html

@@ -21,23 +21,24 @@ sitemap: false
 
   <button class="button" data-filter=".{{ category }}">{{ category }}</button>
   {% endfor %}
-
-
-
 </div>
 
 <div class="grid" style="display:flex;flex-wrap: wrap;">
   {% for resource in site.tracks %}
-      <div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}" style="flex 1 1 150px;">
+  <div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}"
-          <div class="cartouche filtered" style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
+    style="flex 1 1 150px;">
+    <div class="cartouche filtered"
+      style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
 
     </div>
     <div class="cartouche">
-                <p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow" class="btn"><strong>&#9998;</strong> Edit Resource</a></p>
+      <p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow"
+          class="btn"><strong>&#9998;</strong> Edit Resource</a></p>
       <h4>{{ resource.title }}</h4>
       <p>{{ resource.description | truncate: 65 }}</p>
       <p>{{ resource.media_type }}</p>
-              <p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs mer...</a></p>
+      <p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs
+          mer...</a></p>
     </div>
   </div>