Labels! On the pattern list for better overview over all the different patterns

NooBxGockeL · NooBxGockeL · commit 24a2540f8171 · 2016-01-09T19:56:44.000+01:00
diff --git a/pages/patterns.html b/pages/patterns.html
@@ -7,6 +7,7 @@
 page-index: 3
 ---
 <div id="index" class="row">
+  <!-- MAIN -->
   <div class="col-sm-9">
     <div class="content-area">
       <!-- small button -->
@@ -24,28 +25,39 @@
         {% assign allPatterns = site.pages | where:"layout","pattern" | sort: 'title' %}
         <div>
           {% for page in allPatterns %}
-          <a class="list-item" href="{{ page.url | prepend: site.baseurl }}"
+          <div class="list-item" href="{{ page.url | prepend: site.baseurl }}"
           cats='All;{{ page.categories | join: ';' }}'
           tags='All;{{ page.tags | join: ';' }}'>
-          <h2>{{ page.title }}</h2>
-          </a>
+            <a href="{{ page.url | prepend: site.baseurl }}"><h2>{{ page.title }}</h2></a>
+            <span class="cats">
+                {% for cat in page.categories %}
+                <a href="javascript:;" class="cat-button" category="{{ cat }}">{{ cat }}</a>
+                {% endfor %}
+            </span>
+            <span class="tags">
+                {% for tag in page.tags %}
+                <a href="javascript:;" class="tag-button" tag="{{ tag }}">{{ tag }}</a>
+                {% endfor %}
+            </span>
+          </div>
 
           {% endfor %}
         </div>
       </div>
     </div>
   </div>
+  <!-- SIDEBAR -->
   <div class="col-sm-3">
     <div class="shadow-corner-curl hidden-xs">
       <div class="sidebar-list-header">
         Categories
       </div>
 
-      <a href="javascript:;" class="sidebar-list-item category" category="All">
+      <a href="javascript:;" class="sidebar-list-item cat-button" category="All">
         All<span class="my-badge"> {{ allPatterns | size }}</span>
       </a>
       {% for category in site.data.categories %}
-      <a href="javascript:;" class="sidebar-list-item category" category="{{ category.name }}">
+      <a href="javascript:;" class="sidebar-list-item cat-button" category="{{ category.name }}">
         {{ category.name }} <span class="my-badge">
           {% assign counter=0 %}
           {% for page in allPatterns %}
@@ -64,11 +76,11 @@ <h2>{{ page.title }}</h2>
         Tags
       </div>
 
-      <a href="javascript:;" class="sidebar-list-item tag" tag="All">
+      <a href="javascript:;" class="sidebar-list-item tag-button" tag="All">
         All<span class="my-badge"> {{ allPatterns | size }}</span>
       </a>
       {% for tag in site.data.tags %}
-      <a href="javascript:;" class="sidebar-list-item tag" tag="{{ tag.name }}">
+      <a href="javascript:;" class="sidebar-list-item tag-button" tag="{{ tag.name }}">
         {{ tag.name }} <span class="my-badge">
           {% assign counter=0 %}
           {% for page in allPatterns %}
diff --git a/static/js/index.js b/static/js/index.js
@@ -42,15 +42,14 @@ function categoryAndTagDisplay() {
     $('.post-list-body>div[post-tag!=All]').hide();
     */
     /*show category when click categories list*/
-    $('.sidebar-list-item.category').click(function() {
+    $('a.cat-button').click(function() {
         var category = $(this).attr('category'); //get category's name
         $('.list-item').not('[cats*=\'' + category + '\']').slideUp(200)
         $('.list-item[cats*=\'' + category + '\']').slideDown()
     });
     /*show category when click tags list*/
-    $('.sidebar-list-item.tag').click(function() {
+    $('a.tag-button').click(function() {
         var tag = $(this).attr('tag'); //get tag's name
-
         $('.list-item').not('[tags*=\'' + tag + '\']').slideUp(200)
         $('.list-item[tags*=\'' + tag + '\']').slideDown()
     });
