HeroWarsTools/external-tools-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improve filters

Browse Source
This commit is contained in:
Codrin Pavel
2020-05-25 02:28:38 +03:00
parent 2eb032192e
commit 9b616a3d0c
5 changed files with 54 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
_assets/js/toe.js
View File

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

33
_assets/sass/modules/_toe.scss
View File

@@ -8,12 +8,43 @@
} }
.toe { .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 { .titans {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
width: 200px; width: 200px;
margin: 0 auto 60px; margin: 20px auto 60px;
li { li {
flex: 0 0 25%; flex: 0 0 25%;

41
_layouts/toe.html
View File

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

2
assets/js/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
assets/sass/main.css
View File

File diff suppressed because one or more lines are too long