From 9b616a3d0c4fe250a5d39250102e68090f90c304 Mon Sep 17 00:00:00 2001 From: Codrin Pavel Date: Mon, 25 May 2020 02:28:38 +0300 Subject: [PATCH] improve filters --- _assets/js/toe.js | 5 ++--- _assets/sass/modules/_toe.scss | 33 ++++++++++++++++++++++++++- _layouts/toe.html | 41 +++++++++++++++------------------- assets/js/main.min.js | 2 +- assets/sass/main.css | 2 +- 5 files changed, 54 insertions(+), 29 deletions(-) diff --git a/_assets/js/toe.js b/_assets/js/toe.js index e65dda9..8c9c10a 100644 --- a/_assets/js/toe.js +++ b/_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)) || diff --git a/_assets/sass/modules/_toe.scss b/_assets/sass/modules/_toe.scss index 9500df6..5196fb8 100644 --- a/_assets/sass/modules/_toe.scss +++ b/_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%; diff --git a/_layouts/toe.html b/_layouts/toe.html index 2806ec7..711cc93 100644 --- a/_layouts/toe.html +++ b/_layouts/toe.html @@ -10,29 +10,24 @@ {% raw %}
- - -
- - - - - +
+ + + + +