dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-24 00:51:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

made filter and sort options clickable

Browse source
This commit is contained in:
supertiger1234 2019-09-05 20:49:16 +01:00
parent 73f76a6b7b
commit cb637bbd64
1 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/app/Tabs/Explore/searchHeader.vue
View file

@ -4,16 +4,25 @@
<div class="filter"> <div class="filter">
<div class="title">Filter:</div> <div class="title">Filter:</div>
<div class="filter-item"> <div class="filter-item">
<div class="item">All</div> <div
<div class="item selected">Verified</div> class="item"
v-for="(filter, index) in filters"
:class="{selected: filterSelected === index}"
:key="filter.name"
@click="filterSelected = index"
>{{filter.name}}</div>
</div> </div>
</div> </div>
<div class="filter"> <div class="filter">
<div class="title">Sort By:</div> <div class="title">Sort By:</div>
<div class="filter-item"> <div class="filter-item">
<div class="item selected">Most Users</div> <div
<div class="item">Least Users</div> class="item"
<div class="item">Date Added</div> v-for="(sortBy, index) in sortBys"
:class="{selected: sortSelected === index}"
:key="sortBy.name"
@click="sortSelected = index"
>{{sortBy.name}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -28,9 +37,19 @@ export default {
props: ["name"], props: ["name"],
data() { data() {
return { return {
filters: [
} { name: "All", param: "All" },
{ name: "Verified", param: "verified" }
],
sortBys: [
{ name: "Alphabetical", param: "alphabetical" },
{ name: "Most Users", param: "most_users" },
{ name: "Least Users", param: "least_users" },
{ name: "Date Added", param: "date_added" }
],
filterSelected: 1,
sortSelected: 0
};
} }
}; };
</script> </script>
@ -92,7 +111,7 @@ input {
opacity: 0.9; opacity: 0.9;
} }
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
} }
} }
} }