improve filters

_assets/js/toe.js

@@ -2,7 +2,6 @@ $(function(){
 var toe = new Vue({
   el: '#toe',
   data: {
-    only_selected: true,
     filters: 'any',
     titans: [
       '4000', '4001', '4002', '4003',
@@ -37,7 +36,7 @@ var toe = new Vue({
       var t = this;
       var aFilteredMatches = t.matches.filter(function (match) {
         return (
-          t.only_selected === false &&
+          !t.selectedTitans.length &&
           (
             (t.filters == 'any' && match.enemypower < 1000000) ||
             (t.filters == 'only_lords' && match.enemypower > 1000000) ||
@@ -47,7 +46,7 @@ var toe = new Vue({
 
           ||
 
-          t.only_selected === true && t.getSelectedTitans() == t.getEnemyTeam(match.defBattle.attackers) &&
+          t.selectedTitans.length && t.getSelectedTitans() == t.getEnemyTeam(match.defBattle.attackers) &&
           (
             (t.filters == 'any' && match.enemypower < 1000000) ||
             ((t.filters == 'only_lords') && (match.enemypower > 1000000)) ||

_assets/sass/modules/_toe.scss

@@ -8,12 +8,43 @@
 }
 
 .toe {
+  &__filters {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: .2px;
+      display: block;
+      padding: 3px 12px;
+      line-height: 20px;
+      margin: 0 5px;
+      box-shadow: 0 0 0 1px #eee;
+      user-select: none;
+
+      &:hover {
+        box-shadow: 0 0 0 1px #333;
+      }
+    }
+
+    input {
+      display: none;
+
+      &:checked + span {
+        box-shadow: 0 0 0 2px #3a86ff;
+      }
+    }
+  }
+
   .titans {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     width: 200px;
-    margin: 0 auto 60px;
+    margin: 20px auto 60px;
 
     li {
       flex: 0 0 25%;

_layouts/toe.html

@@ -10,29 +10,24 @@
 
     {% raw %}
     <div id="toe" class="toe">
-      <label>
-        <input type="checkbox" v-model="only_selected" />
-        <span>Show only selected teams</span>
-      </label>
-
-      <br/>
-
-      <label>
-        <input type="radio" name="filter" value="any" v-model="filters" />
-        <span>All</span>
-      </label>
-      <label>
-        <input type="radio" name="filter" value="only_gt_600k" v-model="filters" />
-        <span>> 600k</span>
-      </label>
-      <label>
-        <input type="radio" name="filter" value="misses" v-model="filters" />
-        <span>< 50 points</span>
-      </label>
-      <label>
-        <input type="radio" name="filter" value="only_lords" v-model="filters" />
-        <span>Lords</span>
-      </label>
+      <div class="toe__filters">
+        <label>
+          <input type="radio" name="filter" value="any" v-model="filters" />
+          <span>All</span>
+        </label>
+        <label>
+          <input type="radio" name="filter" value="only_gt_600k" v-model="filters" />
+          <span>> 600k</span>
+        </label>
+        <label>
+          <input type="radio" name="filter" value="misses" v-model="filters" />
+          <span>< 50 points</span>
+        </label>
+        <label>
+          <input type="radio" name="filter" value="only_lords" v-model="filters" />
+          <span>Lords</span>
+        </label>
+      </div>
 
       <ul class="titans">
         <li v-for="titan in titans">