Statistics styling
This commit is contained in:
parent
6c47c5b178
commit
3ce2ba5013
6 changed files with 198 additions and 19 deletions
frontend/src/components/page
56
frontend/src/components/page/PageFooter.vue
Normal file
56
frontend/src/components/page/PageFooter.vue
Normal file
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import {useConfigStore} from "@/stores/config";
|
||||
import {useVersionStore} from "@/stores/version";
|
||||
|
||||
const config = useConfigStore();
|
||||
const version = useVersionStore();
|
||||
|
||||
function refresh(): void {
|
||||
config.refresh();
|
||||
version.refresh();
|
||||
}
|
||||
|
||||
refresh();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer v-if="config.getConfig">
|
||||
ffffng ({{ version.getVersion }})
|
||||
<a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
|
||||
<i class="fa fa-code" aria-hidden="true" /> Source Code
|
||||
</a>
|
||||
<a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">
|
||||
<i class="fa fa-bug" aria-hidden="true" /> Fehler melden
|
||||
</a>
|
||||
<a
|
||||
v-if="config.getConfig.legal.privacyUrl"
|
||||
:href="config.getConfig.legal.privacyUrl"
|
||||
target="_blank">Datenschutz</a>
|
||||
<a
|
||||
v-if="config.getConfig.legal.imprintUrl"
|
||||
:href="config.getConfig.legal.imprintUrl"
|
||||
target="_blank">Impressum</a>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "sass:math";
|
||||
@import "../../scss/variables";
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background-color: $nav-bar-background-color;
|
||||
padding: $nav-footer-padding;
|
||||
|
||||
a {
|
||||
color: $nav-link-color;
|
||||
padding: 0 math.div($nav-link-spacing, 2);
|
||||
}
|
||||
}
|
||||
</style>
|
76
frontend/src/components/page/PageHeader.vue
Normal file
76
frontend/src/components/page/PageHeader.vue
Normal file
|
@ -0,0 +1,76 @@
|
|||
<script setup lang="ts">
|
||||
import { useConfigStore } from "@/stores/config";
|
||||
|
||||
const config = useConfigStore();
|
||||
|
||||
function refresh(): void {
|
||||
config.refresh();
|
||||
}
|
||||
|
||||
refresh();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header v-if="config.getConfig">
|
||||
<nav>
|
||||
<RouterLink class="logo" to="/">
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<img
|
||||
src="icon.svg"
|
||||
alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<h1>
|
||||
<RouterLink to="/">
|
||||
{{ config.getConfig.community.name }} – Knotenverwaltung
|
||||
</RouterLink>
|
||||
</h1>
|
||||
|
||||
<RouterLink class="admin-link" to="/admin">
|
||||
<i class="fa fa-wrench" aria-hidden="true" /> Admin-Panel
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../scss/variables";
|
||||
|
||||
header {
|
||||
background-color: $nav-bar-background-color;
|
||||
padding: $nav-header-padding;
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
width: $nav-header-logo-size;
|
||||
height: $nav-header-logo-size;
|
||||
|
||||
margin: $nav-header-logo-margin;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $nav-link-color;
|
||||
padding: 0 $nav-link-spacing 0 0;
|
||||
}
|
||||
|
||||
a.admin-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue