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

added filter options

Browse source
This commit is contained in:
supertiger1234 2019-09-05 20:19:27 +01:00
parent b398e5a360
commit 4acb26142c
1 changed files with 68 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,38 @@
<template>
<div class="search-header">
<div class="search-area">
<input type="text" :placeholder="`Search for ${name}`">
<div class="filter-area">
<div class="filter">
<div class="title">Filter:</div>
<div class="filter-item">
<div class="item">All</div>
<div class="item selected">Verified</div>
</div>
</div>
<div class="filter">
<div class="title">Sort By:</div>
<div class="filter-item">
<div class="item selected">Most Users</div>
<div class="item">Least Users</div>
<div class="item">Date Added</div>
</div>
</div>
</div>
<div class="search-area">
<input type="text" :placeholder="`Search for ${name}`" />
</div>
<div class="filter-area"></div>
</div>
</template>
<script>
export default {
props: [
'name'
]
}
props: ["name"],
data() {
return {
}
}
};
</script>
<style lang="scss" scoped>
@ -32,8 +52,49 @@ export default {
align-content: center;
flex-direction: column;
justify-content: center;
margin: auto;
margin-right: 0;
}
input {
border-radius: 5px;
}
.filter-area {
display: flex;
}
.filter {
margin-top: 2px;
user-select: none;
margin-left: 10px;
width: 200px;
.filter-item {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 57px;
}
.title {
font-size: 17px;
color: white;
border-bottom: solid 1px rgba(255, 255, 255, 0.575);
padding-left: 2px;
padding-right: 5px;
padding-bottom: 2px;
}
font-size: 15px;
.item {
background: rgba(0, 0, 0, 0.356);
color: white;
opacity: 0.5;
cursor: pointer;
margin: 2px;
transition: 0.3s;
&.selected {
opacity: 0.9;
}
&:hover {
opacity: 0.8;
}
}
}
</style>