Added pattern statistics to the website, fixes iluwatar#465

Category and Tag count to the right of their headings and the pattern count at the bottom of the page

Author: NooBxGockeL

_includes/sidebar.html

@@ -11,6 +11,9 @@
         <label for="checkbox_allcats">
             Categories
         </label>
+        <span class="amount-badge">
+            {{ site.data.categories | size }}
+        </span>
     </div>
 
     {% for category in sortedCats %}
@@ -46,6 +49,9 @@
         <label for="checkbox_alltags">
             Tags
         </label>
+        <span class="amount-badge">
+            {{ site.data.tags | size }}
+        </span>
     </div>
 
     <!-- All / None Buttons -->

pages/patterns.html

@@ -8,10 +8,10 @@
 
 {% assign allPatterns = site.pages | where:"layout","pattern" | sort: 'title' %}
 <div id="patterns" class="row">
-<!-- SIDEBAR -->
-<div class="col-md-3 col-md-push-9">
-    {% include sidebar.html allItems=allPatterns %}
-</div>
+    <!-- SIDEBAR -->
+    <div class="col-md-3 col-md-push-9">
+        {% include sidebar.html allItems=allPatterns %}
+    </div>
     <!-- MAIN -->
     <div class="col-md-9 col-md-pull-3">
         <div class="content-area">
@@ -43,3 +43,8 @@
         </div>
     </div>
 </div>
+<div class="pattern-statistics row">
+    <div class="col-md-9">
+        Currently showing <span id="current-pattern-count-showing">{{ allPatterns | size }}</span> Patterns of {{ allPatterns | size }} Patterns total
+    </div>
+</div>

static/css/index.scss

@@ -203,22 +203,16 @@ a {
         background-color: $base06;
         color: $base03;
     }
-    .amount-badge {
-        font-size: 12px;
-        font-weight: bold;
-        color: $base16-blue;
-        border: 1px solid $base16-blue;
-        //background-color: $base05;
-        //padding: 0 0 1px 0;
-        border-radius: 5px;
-        float: right;
-        width: 32px;
-        text-align: center;
-    }
-    /*&:hover .amount-badge {
-        @include transition(0.4s ease);
-        @include transform(rotate(360deg) scale(1.2));
-    }*/
+}
+.amount-badge {
+    font-size: 12px;
+    font-weight: bold;
+    color: $base16-blue;
+    border: 1px solid $base16-blue;
+    border-radius: 5px;
+    float: right;
+    width: 32px;
+    text-align: center;
 }
 
 .checkbox label::before {
@@ -574,3 +568,9 @@ h6:hover .header-link {
     top: 45px !important;
     right: 45px !important;
 }
+
+.pattern-statistics {
+  color: $base02;
+  font-style: italic;
+  text-align: center;
+}

static/js/search.js

@@ -141,6 +141,9 @@ function updateResults() {
         } else if (text.length > 2) {
             intersectionQuery = EMPTY_QUERY;
         }
+        // update the pattern counter
+        $('#current-pattern-count-showing').text(intersectionQuery.length);
+
         var diffQuery = $('.list-item').not(intersectionQuery);
         /* further narrow down to only REAL changes */
         diffQuery = diffQuery.filter(':visible');