DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added dark theme. Fixed actor country aggregation.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-06-10 03:24:48 +02:00
parent 255dd48af6
commit 69cefa57ff
38 changed files with 299 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
components/header/header.vue
View File

@@ -79,11 +79,11 @@
</form>
<div
v-if="user"
class="userpanel"
:class="{ searching: searchFocused }"
>
<VDropdown
v-if="user"
:triggers="['click']"
:prevent-overflow="true"
class="notifs-trigger"
@@ -115,21 +115,35 @@
<VDropdown
:triggers="['click']"
:prevent-overflow="true"
class="menu-trigger"
>
<img
:src="user.avatar"
class="avatar"
>
<div class="avatar-container">
<img
v-if="user"
:src="user.avatar"
class="avatar"
>
<Icon
v-else
icon="user7"
class="avatar-placeholder"
/>
</div>
<template #popper>
<div class="menu">
<a
v-if="user"
:href="`/user/${user.username}`"
class="menu-header ellipsis"
>{{ user.username }}</a>
<ul class="menu-list nolist">
<li class="menu-item">
<li
v-if="user"
class="menu-item"
>
<a
:href="`/user/${user.username}`"
class="menu-button nolink"
@@ -140,7 +154,21 @@
</li>
<li
v-if="user.primaryStash"
v-else-if="allowLogin"
v-close-popper
class="menu-item"
>
<a
:href="`/login?r=${encodeURIComponent(currentPath)}`"
class="menu-button nolink"
>
<Icon icon="enter" />
Log in
</a>
</li>
<li
v-if="user?.primaryStash"
class="menu-item"
>
<a
@@ -161,6 +189,26 @@
Settings
</li>
<li
v-if="theme === 'dark'"
v-close-popper
class="menu-item menu-button"
@click="setTheme('light')"
>
<Icon icon="sun3" />
Light theme
</li>
<li
v-else
v-close-popper
class="menu-item menu-button"
@click="setTheme('dark')"
>
<Icon icon="moon" />
Dark theme
</li>
<li
class="menu-button menu-item logout"
@click="logout"
@@ -170,20 +218,6 @@
</template>
</VDropdown>
</div>
<div
v-else-if="allowLogin"
class="userpanel"
:class="{ searching: searchFocused }"
>
<a
:href="`/login?r=${encodeURIComponent(currentPath)}`"
class="login button button-submit nolink"
>
<span class="login-text">Log in</span>
<Icon icon="enter" />
</a>
</div>
</div>
<Settings
@@ -205,8 +239,11 @@ import {
inject,
} from 'vue';
import Cookies from 'js-cookie';
import navigate from '#/src/navigate.js';
import { del } from '#/src/api.js';
import events from '#/src/events.js';
// import getPath from '#/src/get-path.js';
import Notifications from '#/components/header/notifications.vue';
@@ -216,6 +253,7 @@ import AlertDialog from '#/components/alerts/create.vue';
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
const pageContext = inject('pageContext');
const theme = ref(pageContext.env.theme);
const user = pageContext.user;
const unseen = ref(pageContext.meta.unseenNotifications);
@@ -232,6 +270,13 @@ function search() {
navigate('/search', { q: query.value }, { redirect: true });
}
function setTheme(newTheme) {
theme.value = newTheme;
Cookies.set('theme', newTheme);
events.emit('theme', newTheme);
}
async function logout() {
await del('/session');
navigate('/login?consent', null, { redirect: true }); // pass consent variable to reinstate in new session
@@ -275,7 +320,7 @@ function blurSearch(event) {
.nav-item .link {
font-size: .9rem;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
box-sizing: border-box;
padding: 1rem;
height: 100%;
@@ -330,7 +375,7 @@ function blurSearch(event) {
.icon {
height: 100%;
padding: 0 .75rem 0 .5rem;
fill: var(--shadow-weak-10);
fill: var(--glass-weak-10);
}
&.focused {
@@ -355,7 +400,6 @@ function blurSearch(event) {
height: 100%;
display: flex;
align-items: center;
padding: 0 1rem 0 0;
font-size: 0;
cursor: pointer;
@@ -368,6 +412,21 @@ function blurSearch(event) {
}
}
.menu-trigger {
height: 100%;
}
.avatar-container {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem 0 0;
&:hover .icon {
fill: var(--primary);
}
}
.avatar {
width: 2rem;
height: 2rem;
@@ -375,6 +434,13 @@ function blurSearch(event) {
object-fit: cover;
}
.avatar-placeholder {
width: 1.25rem;
padding-left: 1rem;
height: 100%;
fill: var(--glass-strong-20);
}
.notifs-trigger {
height: 100%;
}
@@ -411,7 +477,7 @@ function blurSearch(event) {
}
.notifs-bell {
fill: var(--shadow);
fill: var(--glass);
}
.login {
@@ -433,8 +499,8 @@ function blurSearch(event) {
.menu-header {
display: flex;
padding: .75rem 1rem;
border-bottom: solid 1px var(--shadow-weak-30);
color: var(--shadow-strong-30);
border-bottom: solid 1px var(--glass-weak-30);
color: var(--glass-strong-30);
text-decoration: none;
font-weight: bold;
}
@@ -450,7 +516,7 @@ function blurSearch(event) {
font-size: 1.1rem;
.icon {
fill: var(--shadow);
fill: var(--glass);
margin-right: .75rem;
transform: translateY(-1px);
}

14
components/header/notifications.vue
View File

@@ -166,7 +166,7 @@ onMounted(async () => {
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow-strong-10);
fill: var(--glass-strong-10);
&:hover {
fill: var(--primary);
@@ -202,14 +202,14 @@ onMounted(async () => {
overflow: hidden;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40);
border-bottom: solid 1px var(--glass-weak-40);
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--shadow-weak-20);
color: var(--glass-weak-20);
text-align: center;
}
@@ -236,7 +236,7 @@ onMounted(async () => {
justify-content: space-between;
padding: .5rem 0 .1rem 0;
box-sizing: border-box;
color: var(--shadow-strong);
color: var(--glass-strong);
font-weight: bold;
}
@@ -255,12 +255,12 @@ onMounted(async () => {
.notif-date {
flex-shrink: 0;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
&:after {
content: '•';
padding: 0 .5rem;
color: var(--shadow-weak-20);
color: var(--glass-weak-20);
}
}
@@ -272,7 +272,7 @@ onMounted(async () => {
.notif-id {
padding: 0 .5rem;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
font-size: .9rem;
font-weight: normal;
}