ux improvements to the telegraf filters

assets/js/telegraf-filters.js

@@ -6,7 +6,13 @@ function countTag(tag) {
 function getFilterCounts() {
   $('#plugin-filters label').each(function() {
     var tagName = $('input', this).attr('name');
-    $(this).attr('data-count', '(' + countTag(tagName) + ')');
+    var tagCount = countTag(tagName);
+    $(this).attr('data-count', '(' + tagCount + ')');
+    if (tagCount <= 0) {
+      $(this).fadeTo(200, 0.25);
+    } else {
+      $(this).fadeTo(400, 1.0);
+    }
   })
 }
 

assets/styles/layouts/article/_telegraf-plugins.scss

@@ -95,24 +95,19 @@
 
 #plugin-filters {
   display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+  align-items: flex-start;
 
   .filter-category {
-    flex: 1 1 0;
-    max-width: 33%;
-    margin: 0 1.25rem 1.25rem 0 ;
+    flex: 1 1 150px;
+    margin: 0 1.25rem 1.25rem 0;
   }
 
-  input[type='checkbox'] {
-    margin: .1rem .3rem 0 0;
-    padding: 0;
-    vertical-align: top;
-  }
   label {
     display: block;
-    margin: .5rem 0;
+    margin: .55rem 0;
     color: $article-text;
+    position: relative;
 
     &:after {
       content: attr(data-count);
@@ -121,6 +116,47 @@
       opacity: .5;
     }
   }
+
+  .checkbox {
+    display: inline-block;
+    height: 1.15em;
+    width: 1.15em;
+    background: rgba($article-text, .05);
+    margin-right: .3rem;
+    vertical-align: text-top;
+    border-radius: $radius;
+    cursor: pointer;
+    border: 1.5px solid rgba($article-text, .2);
+    user-select: none;
+  }
+
+  input[type='checkbox'] {
+    margin-right: -1.1rem ;
+    padding: 0;
+    vertical-align: top;
+    opacity: 0;
+    cursor: pointer;
+
+    & + .checkbox:after {
+      content: "";
+      display: block;
+      position: absolute;
+      height: .5rem;
+      width: .5rem;
+      border-radius: 50%;
+      background: $article-link;
+      top: .35rem;
+      left: .32rem;
+      opacity: 0;
+      transform: scale(2);
+      transition: all .2s;
+    }
+
+    &:checked + .checkbox:after {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////

data/telegraf_plugin_filters.yml

@@ -10,9 +10,7 @@ filters:
       - Linux
       - macOS
       - Windows
-  - category: Recently added
+  - category: Status
     values:
       - New
-  - category: Placeholder
-    values:
-      - Placeholder
+      - Deprecated

layouts/shortcodes/telegraf/filters.html

@@ -6,6 +6,7 @@
     {{ range .values }}
       <label for="{{ lower . }}" data-count="(0)">
         <input type="checkbox" id="{{ lower . }}" name="{{ lower . }}">
+        <span class="checkbox"></span>
         {{ . }}
       </label>
     {{ end }}

layouts/shortcodes/telegraf/plugins.html

@@ -4,7 +4,7 @@
 {{ range (index .Site.Data.telegraf_plugins $type ) }}
   {{ $pluginTags := delimit .tags " " }}
   {{ $minorVer := replaceRE `\.[^.]*$` "" .introduced }}
-  <div class="plugin-card visible{{ if eq $minorVer $telegrafVersion }} new{{ end }}" id="{{ .id }}" data-tags="{{ $type }} {{ lower $pluginTags }} {{ if eq $minorVer $telegrafVersion }}new{{ end }}">
+  <div class="plugin-card visible{{ if eq $minorVer $telegrafVersion }} new{{ end }}" id="{{ .id }}" data-tags="{{ $type }} {{ lower $pluginTags }} {{ if eq $minorVer $telegrafVersion }}new{{ end }} {{ if .deprecated }}deprecated{{ end }} ">
     <div class="info">
       <h3 id="{{ .id }}">{{ .name }}</h3>
       <p class="meta">