DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Added dark and SFW modes.

Browse Source
This commit is contained in:
ThePendulum
2020-03-23 01:43:49 +01:00
parent fdb2b132f6
commit 58ead7b426
288 changed files with 1316 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -166,17 +166,17 @@ export default {
@import 'theme';
.filter-bar {
background: $background;
background: var(--background);
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem 1rem;
z-index: 1;
font-size: 0;
box-shadow: 0 0 3px $shadow;
box-shadow: 0 0 3px var(--shadow);
.icon {
fill: $shadow;
fill: var(--shadow);
}
}
@@ -196,17 +196,17 @@ export default {
}
.range-button {
color: $shadow;
background: $background;
color: var(--shadow);
background: var(--background);
display: inline-block;
padding: .5rem 1rem;
border: none;
box-shadow: 0 0 2px $shadow-weak;
box-shadow: 0 0 2px var(--shadow-weak);
font-size: .8rem;
font-weight: bold;
&:hover {
color: $text;
color: var(--text);
cursor: pointer;
}
}
@@ -215,7 +215,7 @@ export default {
display: none;
&:checked + .range-button {
color: $primary;
color: var(--primary);
}
}

10
assets/components/header/filters.vue
View File

@@ -96,7 +96,7 @@ export default {
margin: 0;
&:not(:last-child) {
border-right: solid 1px $shadow-hint;
border-right: solid 1px var(--shadow-hint);
}
}
@@ -116,7 +116,7 @@ export default {
}
.toggle {
color: $shadow-weak;
color: var(--shadow-weak);
box-sizing: border-box;
padding: .5rem;
margin: 0 .25rem;
@@ -130,12 +130,12 @@ export default {
}
&:hover {
color: $shadow;
color: var(--shadow);
}
&.active {
color: $primary;
box-shadow: 0 0 2px $shadow-weak;
color: var(--primary);
box-shadow: 0 0 2px var(--shadow-weak);
}
}
</style>

154
assets/components/header/header.vue
View File

@@ -62,34 +62,88 @@
</nav>
</div>
<Search class="search-full" />
<div class="header-section">
<div class="header-toggles">
<Icon
v-show="!sfw"
v-tooltip="'Enable safe-for-work mode'"
icon="flower"
class="toggle noselect"
@click.native="setSfw(true)"
/>
<v-popover
class="search-compact"
:open="searching"
@show="searching = true"
@hide="searching = false"
>
<button
type="button"
class="search-button"
><Icon
icon="search"
/></button>
<Icon
v-show="sfw"
v-tooltip="'Disable safe-for-work mode'"
icon="flower"
class="toggle active noselect"
@click.native="setSfw(false)"
/>
<Search
slot="popover"
:searching="searching"
class="compact"
@search="searching = false"
/>
</v-popover>
<Icon
v-show="theme === 'light'"
v-tooltip="'Switch to dark theme'"
icon="moon"
class="toggle noselect"
@click.native="setTheme('dark')"
/>
<Icon
v-show="theme === 'dark'"
v-tooltip="'Switch to light theme'"
icon="sun"
class="toggle noselect"
@click.native="setTheme('light')"
/>
</div>
<Search class="search-full" />
<v-popover
class="search-compact"
:open="searching"
@show="searching = true"
@hide="searching = false"
>
<button
type="button"
class="search-button"
><Icon
icon="search"
/></button>
<Search
slot="popover"
:searching="searching"
class="compact"
@search="searching = false"
/>
</v-popover>
</div>
</header>
</template>
<script>
import { mapState } from 'vuex';
import Search from './search.vue';
function sfw(state) {
return state.ui.sfw;
}
function theme(state) {
return state.ui.theme;
}
function setTheme(newTheme) {
this.$store.dispatch('setTheme', newTheme);
}
function setSfw(enabled) {
this.$store.dispatch('setSfw', enabled);
}
export default {
components: {
Search,
@@ -99,6 +153,16 @@ export default {
searching: false,
};
},
computed: {
...mapState({
sfw,
theme,
}),
},
methods: {
setSfw,
setTheme,
},
};
</script>
@@ -109,9 +173,9 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
background: $background;
color: $primary;
border-bottom: solid 1px $shadow-hint;
background: var(--background);
color: var(--primary);
border-bottom: solid 1px var(--shadow-hint);
font-size: 0;
}
@@ -120,6 +184,13 @@ export default {
align-items: center;
}
.header-section {
height: 100%;
align-items: center;
display: flex;
flex-direction: row;
}
.logo-link {
color: inherit;
display: inline-block;
@@ -151,31 +222,44 @@ export default {
justify-content: center;
padding: 1rem 1rem calc(1rem - 5px) 1rem;
border-bottom: solid 5px transparent;
color: $shadow;
color: var(--shadow);
text-decoration: none;
font-size: .9rem;
font-weight: bold;
cursor: pointer;
.icon {
fill: $shadow;
margin: 0 .5rem 0 0;
}
&.active {
color: $primary;
border-bottom: solid 5px $primary;
color: var(--primary);
border-bottom: solid 5px var(--primary);
.icon {
fill: $primary;
fill: var(--primary);
}
}
&:hover:not(.active) {
color: $primary;
color: var(--primary);
.icon {
fill: $primary;
fill: var(--primary);
}
}
}
.header-toggles {
margin: 0 .5rem 0 0;
.icon {
padding: 1rem .75rem;
fill: var(--shadow);
&:hover {
fill: var(--shadow-strong);
cursor: pointer;
}
&.active {
fill: var(--primary);
}
}
}
@@ -189,7 +273,7 @@ export default {
margin: .2rem 0 0 0;
.icon {
fill: $shadow;
fill: var(--shadow);
}
}

16
assets/components/header/search.vue
View File

@@ -66,14 +66,14 @@ export default {
align-items: center;
justify-content: flex-end;
padding: 0 1rem 0 0;
border-left: solid 1px $shadow-hint;
border-left: solid 1px var(--shadow-hint);
&.compact {
padding: 0;
border: none;
.search-input {
border: solid 1px $shadow-hint;
border: solid 1px var(--shadow-hint);
}
.search-button {
@@ -88,12 +88,14 @@ export default {
width: 100%;
padding: .5rem;
border: none;
color: var(--text);
background: var(--background);
outline: none;
font-size: 1rem;
outline: none;
&::placeholder {
color: $shadow;
color: var(--shadow);
}
&::-webkit-search-cancel-button {
@@ -101,7 +103,7 @@ export default {
padding: .5rem;
position: relative;
right: 0;
color: $text;
color: var(--text);
background: url('/img/cancel-circle2.svg');
opacity: .25;
@@ -112,7 +114,7 @@ export default {
}
&:focus::placeholder {
color: $shadow-weak;
color: var(--shadow-weak);
}
}
@@ -125,14 +127,14 @@ export default {
outline: none;
.icon {
fill: $shadow-weak;
fill: var(--shadow-weak);
}
&:hover {
cursor: pointer;
.icon {
fill: $shadow;
fill: var(--shadow);
}
}
}