17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finally I fixed the god damn navbar, tailwind to the rescue

Browse Source
This commit is contained in:
ajdj100
2023-05-24 07:24:31 -04:00
parent 03a82ca88a
commit 0f13944eb4
7 changed files with 39 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
17th Website/src/views/users.vue
View File

@@ -74,19 +74,25 @@ export default {
</select>
<Listbox v-model="unitFilter">
<ListboxButton class="lbButton">
{{ unitFilter.name }}
<Icon icon="carbon:caret-down" />
</ListboxButton>
<ListboxOptions class="lbOptions">
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
{{ unit.name }}
</ListboxOption>
</ListboxOptions>
<div class="relative">
<ListboxButton class="bg-gray-dark text-white px-5 rounded-md hover:bg-blue transition-all">
{{ unitFilter.name }}
<!-- <Icon icon="carbon:caret-down" /> -->
</ListboxButton>
<ListboxOptions class="bg-gray-dark last:rounded-b-md fixed text-white">
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
:disabled="unit.disabled" v-slot="{ active, selected }" class="ui-active:text-white">
<li :class="{ 'bg-blue': active }">
{{ unit.name }}
</li>
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
<!-- This button needs to get finished -->
<button @click="resetFilters()">Clear Filters</button>
<button @click="resetFilters()"
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s">Clear Filters</button>
</div>
</div>
@@ -113,9 +119,6 @@ export default {
</template>
<style>
@import '../assets/base.css';
.lbButton {
background-color: var(--background-secondary);
border: none;
@@ -128,14 +131,14 @@ export default {
position: absolute;
}
button {
/* button {
transition: all 0.2s ease-out;
cursor: pointer;
}
button:hover {
background-color: var(--accent-primary);
}
} */
.clicked {
filter: brightness(85%)