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

Split footer to prevent overflows.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2026-07-13 21:40:12 +02:00
parent 18693faa5f
commit 29a17b2e94
3 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/states.css
View File

@@ -65,3 +65,12 @@
.capitalize { .capitalize {
text-transform: capitalize; text-transform: capitalize;
} }
.hidden {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}

65
components/footer/footer.vue
View File

@@ -7,44 +7,61 @@ const { env } = pageContext;
<template> <template>
<footer class="footer"> <footer class="footer">
<span class="footer-segment">© traxxx</span> <div class="footer-row">
<a
v-if="env.links.matrix"
:href="env.links.matrix"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink matrix"
><Icon icon="matrix-full" /></a>
<a <a
v-if="env.links.matrix" v-if="env.links.discord"
:href="env.links.matrix" :href="env.links.discord"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="footer-segment footer-link nolink matrix" class="footer-segment footer-link nolink discord"
><Icon icon="matrix-full" /></a> ><Icon icon="discord-full" /></a>
<a <a
v-if="env.links.discord" v-if="env.links.content"
:href="env.links.discord" :href="env.links.content"
target="_blank" target="_blank"
rel="noopener noreferrer" class="footer-segment footer-link"
class="footer-segment footer-link nolink discord" >Content Removal (DMCA)</a>
><Icon icon="discord-full" /></a> </div>
<a <div class="footer-row">
v-if="env.links.content" <span class="footer-segment">© traxxx v{{ env.version }}</span>
:href="env.links.content" </div>
target="_blank"
class="footer-segment footer-link"
>Content Removal / DMCA</a>
</footer> </footer>
</template> </template>
<style scoped> <style scoped>
.footer { .footer {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: stretch;
background: var(--background-base-20); background: var(--background-base-20);
box-shadow: inset 0 0 3px var(--shadow-weak-30); box-shadow: inset 0 0 3px var(--shadow-weak-30);
font-size: .8rem; font-size: .75rem;
font-weight: bold; font-weight: bold;
} }
.footer-row {
display: flex;
justify-content: center;
align-items: stretch;
&:first-child .footer-segment {
padding-top: .6rem;
}
&:not(:first-child) {
border-top: solid 1px var(--glass-weak-30);
}
}
.footer-segment { .footer-segment {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

2
src/web/main.js
View File

@@ -2,6 +2,7 @@ import config from 'config';
import { renderPage } from 'vike/server'; import { renderPage } from 'vike/server';
import { socials } from '../../common/actors.mjs'; import { socials } from '../../common/actors.mjs';
import pkg from '../../package.json' with { type: 'json' };
import { fetchUnseenNotificationsCount } from '../alerts.js'; import { fetchUnseenNotificationsCount } from '../alerts.js';
import { fetchUserStashes } from '../stashes.js'; import { fetchUserStashes } from '../stashes.js';
import { fetchUserTemplates } from '../users.js'; import { fetchUserTemplates } from '../users.js';
@@ -38,6 +39,7 @@ export default async function mainHandler(req, res, next) {
} }
: null, : null,
env: { env: {
version: pkg.version,
theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light', theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light',
scenesView: req.cookies.scenesView || 'list', scenesView: req.cookies.scenesView || 'list',
selectedTemplate: Number(req.cookies.selectedTemplate) || 0, selectedTemplate: Number(req.cookies.selectedTemplate) || 0,