Improved sidebar design, added sfw and theme toggles.

This commit is contained in:
DebaucheryLibrarian 2020-07-15 00:15:00 +02:00
parent cb51a2a81b
commit eca54c2a09
35 changed files with 294 additions and 122 deletions

View File

@ -33,6 +33,13 @@
replace
><Icon icon="question5" /></router-link>
</li>
<li class="gender">
<router-link
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
:class="{ selected: gender === 'all' }"
class="gender-link all"
>all</router-link>
</li>
</ul>
<ul class="letters nolist">
@ -143,8 +150,6 @@ export default {
</script>
<style lang="scss">
@import 'theme';
.gender-link {
&.selected .gender .icon {
fill: var(--text-light);
@ -173,7 +178,7 @@ export default {
</style>
<style lang="scss" scoped>
@import 'theme';
@import 'breakpoints';
.actors {
display: flex;
@ -253,13 +258,15 @@ export default {
}
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
@media(max-width: $breakpoint) {
.genders {
flex-direction: column;
}
}
@media(max-width: $breakpoint-micro) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style>

View File

@ -1,11 +1,16 @@
<template>
<header class="header">
<div class="header-nav">
<Icon
icon="menu"
<div
class="sidebar-toggle"
@click.native.stop="toggleSidebar"
@click.stop="toggleSidebar"
>
<Icon icon="menu" />
<div
class="logo"
v-html="logo"
/>
</div>
<router-link
to="/"
@ -68,7 +73,7 @@
<div class="header-toggles">
<Icon
v-show="!sfw"
v-tooltip="'Hit S to use SFW mode'"
v-tooltip="'Hit S to enable safe mode'"
icon="flower"
class="toggle noselect"
@click.native="setSfw(true)"
@ -76,9 +81,9 @@
<Icon
v-show="sfw"
v-tooltip="'Hit N to use NSFW mode'"
icon="flower"
class="toggle active noselect"
v-tooltip="'Hit N to disable safe mode'"
icon="evil2"
class="toggle noselect"
@click.native="setSfw(false)"
/>
@ -207,14 +212,27 @@ export default {
.sidebar-toggle {
display: none;
height: 100%;
.logo {
fill: var(--primary);
padding: .5rem;
}
.icon {
display: inline-block;
fill: var(--shadow-modest);
padding: 0 1rem;
width: 1.5rem;
height: 100%;
}
&:hover {
fill: var(--primary);
cursor: pointer;
.icon {
fill: var(--primary);
}
}
}
@ -335,16 +353,13 @@ export default {
}
@media(max-width: $breakpoint-micro) {
.nav {
.nav,
.header-logo {
display: none;
}
.sidebar-toggle {
display: inline-block;
}
.header-logo {
padding: 0 0 0 .5rem;
display: flex;
}
}

View File

@ -1,8 +1,10 @@
<template>
<div class="sidebar-container">
<div
class="sidebar"
@click.stop
>
<div class="sidebar-section">
<div class="sidebar-header">
<Icon
icon="cross2"
@ -88,11 +90,57 @@
</ul>
</nav>
</div>
<div class="sidebar-section toggles noselect">
<label
v-show="sfw"
class="toggle"
@click="setSfw(false)"
><Icon icon="evil2" />Disable safe mode</label>
<label
v-show="!sfw"
class="toggle"
@click="setSfw(true)"
><Icon icon="flower" />Enable safe mode</label>
<label
v-show="theme === 'dark'"
class="toggle"
@click="setTheme('light')"
><Icon icon="sun" />Use light theme</label>
<label
v-show="theme === 'light'"
class="toggle"
@click="setTheme('dark')"
><Icon icon="moon" />Use dark theme</label>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import logo from '../../img/logo.svg';
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 {
props: {
toggleSidebar: {
@ -105,17 +153,34 @@ export default {
logo,
};
},
computed: {
...mapState({
sfw,
theme,
}),
},
methods: {
setTheme,
setSfw,
},
};
</script>
<style lang="scss" scoped>
.sidebar-container {
height: 100%;
width: 100%;
position: absolute;
z-index: 10;
background: var(--darken-hint);
}
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 15rem;
height: 100%;
position: absolute;
z-index: 10;
color: var(--text);
background: var(--background);
box-shadow: 0 0 3px var(--darken);
@ -130,13 +195,13 @@ export default {
}
.sidebar-close {
width: 1.5rem;
width: 1.25rem;
height: 100%;
padding: 0 1rem;
fill: var(--darken);
padding: 0 1.125rem;
fill: var(--shadow-modest);
&:hover {
fill: var(--text);
fill: var(--primary);
cursor: pointer;
}
}
@ -167,19 +232,49 @@ export default {
}
.nav-link {
color: var(--shadow-strong);
color: var(--shadow);
display: block;
padding: 1rem;
text-decoration: none;
font-weight: bold;
&:hover {
color: var(--primary);
color: var(--shadow-strong);
}
&.active {
background: var(--primary);
color: var(--text-light);
color: var(--primary);
}
}
.toggles {
border-top: solid 1px var(--shadow-hint);
margin: .5rem 0 0 0;
}
.toggle {
display: flex;
align-self: flex-end;
padding: 1rem;
color: var(--shadow);
font-weight: bold;
.icon {
fill: var(--shadow);
margin: 0 1rem 0 0;
}
&.active .icon {
fill: var(--primary);
}
&:hover {
cursor: pointer;
color: var(--shadow-strong);
&:not(.active) .icon {
fill: var(--shadow-strong);
}
}
}

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cherry</title>
<path d="M13 6c-1.111 0-2.080 0.604-2.599 1.501-1.043-0.305-2.026-0.688-2.939-1.149-1.219-0.616-2.317-1.369-3.264-2.238-1.212-1.113-1.939-2.219-2.198-2.728v-0.385c0-0.552-0.448-1-1-1s-1 0.448-1 1 0.448 1 1 1c0.006 0 0.013-0 0.019-0 0.117 1.618 0.765 3.819 1.719 5.781 0.587 1.208 1.248 2.255 1.965 3.11 0.026 0.031 0.051 0.061 0.077 0.091-0.484 0.533-0.78 1.241-0.78 2.018 0 1.657 1.343 3 3 3s3-1.343 3-3-1.343-3-3-3c-0.52 0-1.009 0.132-1.435 0.365-0.689-0.796-1.342-1.816-1.928-3.021-0.599-1.233-1.077-2.59-1.359-3.797 0.325 0.391 0.722 0.82 1.2 1.263 1.015 0.94 2.191 1.752 3.497 2.416 0.958 0.486 1.987 0.892 3.077 1.215-0.034 0.181-0.052 0.368-0.052 0.56 0 1.657 1.343 3 3 3s3-1.343 3-3-1.343-3-3-3z"></path>
</svg>

After

Width:  |  Height:  |  Size: 873 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cool2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM8 13c-0.757 0-1.475-0.169-2.118-0.47l0.518-0.864c0.49 0.214 1.031 0.334 1.6 0.334 1.456 0 2.731-0.778 3.43-1.942l0.858 0.515c-0.874 1.454-2.467 2.427-4.288 2.427zM13 6c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1h-2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-1.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v0.5h2v-0.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v1.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 629 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>evil2</title>
<path d="M16 1c0-0.711-0.149-1.387-0.416-2-0.525 1.201-1.507 2.155-2.726 2.643-1.347-1.031-3.030-1.643-4.857-1.643s-3.51 0.613-4.857 1.643c-1.22-0.488-2.202-1.443-2.726-2.643-0.268 0.613-0.416 1.289-0.416 2 0 1.15 0.388 2.208 1.040 3.053-0.662 1.165-1.040 2.512-1.040 3.947 0 4.418 3.582 8 8 8s8-3.582 8-8c0-1.436-0.378-2.783-1.040-3.947 0.652-0.845 1.040-1.903 1.040-3.053zM9.001 5.946c0.032-0.741 0.706-1.234 1.275-1.518 0.543-0.271 1.080-0.407 1.102-0.413 0.268-0.067 0.539 0.096 0.606 0.364s-0.096 0.539-0.364 0.606c-0.275 0.070-0.602 0.189-0.89 0.334 0.166 0.179 0.268 0.418 0.268 0.681 0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.018 0.001-0.036 0.002-0.054zM4.015 4.379c0.067-0.268 0.338-0.431 0.606-0.364 0.023 0.006 0.559 0.141 1.102 0.413 0.568 0.284 1.243 0.776 1.275 1.518 0.001 0.018 0.002 0.036 0.002 0.054 0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.263 0.102-0.503 0.268-0.681-0.288-0.144-0.614-0.264-0.89-0.334-0.268-0.067-0.431-0.338-0.364-0.606zM8 13c-1.82 0-3.413-0.973-4.288-2.427l1.286-0.772c0.612 1.018 1.727 1.699 3.002 1.699s2.389-0.681 3.002-1.699l1.286 0.772c-0.874 1.454-2.467 2.427-4.288 2.427z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>fire</title>
<path d="M5.016 16c-1.066-2.219-0.498-3.49 0.321-4.688 0.897-1.312 1.129-2.61 1.129-2.61s0.706 0.917 0.423 2.352c1.246-1.387 1.482-3.598 1.293-4.445 2.817 1.969 4.021 6.232 2.399 9.392 8.631-4.883 2.147-12.19 1.018-13.013 0.376 0.823 0.448 2.216-0.313 2.893-1.287-4.879-4.468-5.879-4.468-5.879 0.376 2.516-1.364 5.268-3.042 7.324-0.059-1.003-0.122-1.696-0.649-2.656-0.118 1.823-1.511 3.309-1.889 5.135-0.511 2.473 0.383 4.284 3.777 6.197z"></path>
</svg>

After

Width:  |  Height:  |  Size: 606 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>grid6</title>
<path d="M0 0h7v7h-7zM9 0h7v7h-7zM0 9h7v7h-7zM9 9h7v7h-7z"></path>
</svg>

After

Width:  |  Height:  |  Size: 226 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>leaf</title>
<path d="M15.802 2.102c-1.73-1.311-4.393-2.094-7.124-2.094-3.377 0-6.129 1.179-7.549 3.235-0.667 0.965-1.036 2.109-1.097 3.398-0.054 1.148 0.139 2.418 0.573 3.784 1.482-4.444 5.622-7.923 10.395-7.923 0 0-4.466 1.175-7.274 4.816-0.002 0.002-0.039 0.048-0.103 0.136-0.564 0.754-1.055 1.612-1.423 2.583-0.623 1.482-1.2 3.515-1.2 5.965h2c0 0-0.304-1.91 0.224-4.106 0.873 0.118 1.654 0.177 2.357 0.177 1.839 0 3.146-0.398 4.115-1.252 0.868-0.765 1.347-1.794 1.854-2.882 0.774-1.663 1.651-3.547 4.198-5.002 0.146-0.083 0.24-0.234 0.251-0.402s-0.063-0.329-0.197-0.431z"></path>
</svg>

After

Width:  |  Height:  |  Size: 729 B

View File

@ -0,0 +1,7 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>menu7</title>
<path d="M1 3h14v2h-14v-2z"></path>
<path d="M1 7h14v2h-14v-2z"></path>
<path d="M1 11h14v2h-14v-2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 268 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>screwdriver</title>
<path d="M15.852 12.352l-6.204-6.204c-0.345-0.345-1.2-0.067-2.043 0.617l-4.605-4.605-0.5-1.16-1.601-1-0.899 0.899 1 1.601 1.16 0.5 4.605 4.605c-0.685 0.843-0.962 1.698-0.617 2.043 0 0 0 0 0 0l6.203 6.203c0.405 0.405 1.518-0.049 2.484-1.016s1.421-2.079 1.016-2.484zM13.92 13.92c-0.116 0.116-0.268 0.174-0.42 0.174s-0.304-0.058-0.42-0.174l-5-5c-0.232-0.232-0.232-0.608 0-0.84s0.608-0.232 0.84 0l5 5c0.232 0.232 0.232 0.608 0 0.84z"></path>
</svg>

After

Width:  |  Height:  |  Size: 603 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>screwdriver2</title>
<path d="M15.852 12.352l-3.403-3.403c-0.649 0.149-1.358-0.029-1.863-0.535s-0.683-1.214-0.535-1.863l-0.403-0.403c-0.345-0.345-1.2-0.067-2.043 0.617l-4.605-4.605-0.5-1.16-1.601-1-0.899 0.899 1 1.601 1.16 0.5 4.605 4.605c-0.685 0.843-0.962 1.698-0.617 2.043 0 0 0 0 0 0l0.403 0.403c0.649-0.149 1.358 0.029 1.863 0.535s0.683 1.214 0.535 1.863l3.403 3.403c0.405 0.405 1.518-0.049 2.484-1.016s1.421-2.079 1.016-2.484zM13.92 13.92c-0.116 0.116-0.268 0.174-0.42 0.174s-0.304-0.058-0.42-0.174l-5-5c-0.232-0.232-0.232-0.608 0-0.84s0.608-0.232 0.84 0l5 5c0.232 0.232 0.232 0.608 0 0.84z"></path>
</svg>

After

Width:  |  Height:  |  Size: 751 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>skull</title>
<path d="M12.803 3.197c-1.417-1.417-3.3-2.197-5.303-2.197s-3.887 0.78-5.303 2.197-2.197 3.3-2.197 5.303c0 0.276 0.224 0.5 0.5 0.5 1.93 0 3.5 1.57 3.5 3.5v2c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2c0-1.93 1.57-3.5 3.5-3.5 0.276 0 0.5-0.224 0.5-0.5 0-2.003-0.78-3.887-2.197-5.303zM6 7c0 0.55-0.45 1-1 1h-1c-0.55 0-1-0.45-1-1v-1c0-0.55 0.45-1 1-1h1c0.55 0 1 0.45 1 1v1zM12 7c0 0.55-0.45 1-1 1h-1c-0.55 0-1-0.45-1-1v-1c0-0.55 0.45-1 1-1h1c0.55 0 1 0.45 1 1v1z"></path>
</svg>

After

Width:  |  Height:  |  Size: 909 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>smile2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM11 4c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM5 4c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM8 13c-1.82 0-3.413-0.973-4.288-2.427l1.286-0.772c0.612 1.018 1.727 1.699 3.002 1.699s2.389-0.681 3.002-1.699l1.286 0.772c-0.874 1.454-2.467 2.427-4.288 2.427z"></path>
</svg>

After

Width:  |  Height:  |  Size: 525 B

View File

@ -262,9 +262,9 @@ function initActorActions(store, router) {
letter,
gender,
}) {
const genderFilter = gender === null
? 'isNull: true'
: `equalTo: "${gender}"`;
const genderFilter = (gender === null && 'gender: { isNull: true }')
|| (gender === 'all' && ' ')
|| `gender: { equalTo: "${gender}" }`;
const { connection: { actors, totalCount } } = await graphql(`
query Actors(
@ -283,10 +283,8 @@ function initActorActions(store, router) {
name: {
startsWith: $letter
}
gender: {
${genderFilter}
}
}
) {
totalCount
actors: nodes {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 40 KiB