boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Changed range toggles to links for home and actor pages.

Browse Source
This commit is contained in:
ThePendulum
2020-05-07 03:20:51 +02:00
parent 2b2fb9e3e7
commit 525995615a
10 changed files with 116 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/components/header/filter-bar.vue
View File

@@ -1,61 +1,31 @@
<template>
<div class="filter-bar noselect">
<span class="sort">
<label class="range">
<input
:id="`${_uid}-range-latest`"
:checked="range === 'latest'"
type="radio"
class="range-input"
@click="setRange('latest')"
>
<label
:for="`${_uid}-range-latest`"
class="range-button"
>Latest</label>
</label>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'latest' } }"
:class="{ active: range === 'latest' }"
class="range range-button"
>Latest</router-link>
<label class="range">
<input
:id="`${_uid}-range-upcoming`"
:checked="range === 'upcoming'"
type="radio"
class="range-input"
@click="setRange('upcoming')"
>
<label
:for="`${_uid}-range-upcoming`"
class="range-button"
>Upcoming</label>
</label>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'upcoming' } }"
:class="{ active: range === 'upcoming' }"
class="range-button"
>Upcoming</router-link>
<label class="range">
<input
:id="`${_uid}-range-new`"
:checked="range === 'new'"
type="radio"
class="range-input"
@click="setRange('new')"
>
<label
:for="`${_uid}-range-new`"
class="range-button"
>New</label>
</label>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'new' } }"
:class="{ active: range === 'new' }"
class="range-button"
>New</router-link>
<label class="range">
<input
:id="`${_uid}-range-all`"
:checked="range === 'all'"
type="radio"
class="range-input"
@click="setRange('all')"
>
<label
:for="`${_uid}-range-all`"
class="range-button"
>All</label>
</label>
<!--
<router-link
:to="{ name: 'home', params: { range: 'all' } }"
:class="{ active: range === 'all' }"
class="range-button"
>All</router-link>
-->
</span>
<span>
@@ -92,8 +62,8 @@ function filter(state) {
return state.ui.filter;
}
function range(state) {
return state.ui.range;
function range() {
return this.$route.params.range;
}
function batch(state) {
@@ -192,17 +162,14 @@ export default {
box-shadow: 0 0 2px var(--shadow-weak);
font-size: .8rem;
font-weight: bold;
text-decoration: none;
&:hover {
color: var(--text);
&:hover:not(.active) {
color: var(--shadow-strong);
cursor: pointer;
}
}
.range-input {
display: none;
&:checked + .range-button {
&.active {
color: var(--primary);
}
}