freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Basic styling done.

Browse source
This commit is contained in:
baldo 2022-05-23 12:25:01 +02:00
parent 9e29034a0b
commit 2e039a7b27
7 changed files with 96 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

@ -16,6 +16,7 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"fork-awesome": "^1.2.0",
"pinia": "^2.0.14",
"sparkson": "^1.3.6",
"vue": "^3.2.36",

8
frontend/src/App.vue
View file

@ -15,14 +15,22 @@ import PageFooter from "@/components/PageFooter.vue";
</template>
<style lang="scss">
@import "fork-awesome";
@import "scss/variables";
body {
background-color: $page-background-color;
color: $page-text-color;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
main {
padding: $page-padding;
}
a {
color: $link-color;
text-decoration: none;
}
</style>

22
frontend/src/components/PageFooter.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
import { useVersionStore } from "@/stores/version";
import {useConfigStore} from "@/stores/config";
import {useVersionStore} from "@/stores/version";
const config = useConfigStore();
const version = useVersionStore();
@ -16,8 +16,12 @@ refresh();
<template>
<footer v-if="config.getConfig">
ffffng ({{ version.getVersion }})
<a href="https://github.com/freifunkhamburg/ffffng" target="_blank">Source Code</a>
<a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">Fehler melden</a>
<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"
@ -30,6 +34,7 @@ refresh();
</template>
<style lang="scss" scoped>
@use "sass:math";
@import "../scss/variables";
footer {
@ -37,6 +42,15 @@ footer {
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>

59
frontend/src/components/PageHeader.vue
View file

@ -13,11 +13,24 @@ refresh();
<template>
<header v-if="config.getConfig">
<nav>
<RouterLink to="/">
<img src="icon.svg" alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"/>
{{ config.getConfig.community.name }} – Knotenverwaltung
<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>
<RouterLink to="/admin">Admin-Panel</RouterLink>
</nav>
</header>
</template>
@ -26,14 +39,38 @@ refresh();
@import "../scss/variables";
header {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: $nav-bar-background-color;
padding: $nav-header-padding;
img {
width: 2em;
height: 2em;
* {
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>

17
frontend/src/scss/_variables.scss
View file

@ -1,4 +1,5 @@
// Grays
$gray-darkest: #222222;
$gray-darker: #333333;
$gray-dark: #444444;
$gray: #666666;
@ -13,8 +14,20 @@ $color-danger: #c9302c;
$color-info: #009ee0;
// Page
$page-background-color: $gray-darker;
$page-background-color: $gray-darkest;
$page-text-color: $gray-lighter;
$page-padding: 0.5em;
// Links
$link-color: $color-primary;
$link-color: $color-warning;
// Navigation
$nav-bar-background-color: $gray-darker;
$nav-link-color: $page-text-color;
$nav-link-spacing: 1.5em;
$nav-header-padding: 0.75em;
$nav-header-logo-size: 2em;
$nav-header-logo-margin: 0 0.5em 0 0;
$nav-footer-padding: 0.75em;

2
frontend/src/views/HomeView.vue
View file

@ -3,7 +3,7 @@
<template>
<div>
<h1>Willkommen!</h1>
<h2>Willkommen!</h2>
<p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb ist löschen? Dann bist Du hier richtig!</p>
</div>

5
frontend/yarn.lock
View file

@ -1064,6 +1064,11 @@ flatted@^3.1.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
fork-awesome@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fork-awesome/-/fork-awesome-1.2.0.tgz#acd43f1e1f54510fa45209c31385b4fde3a95003"
integrity sha512-MNwTBnnudMIweHfDtTY8TeR5fxIAZ2w9o8ITn5XDySqdxa4k5AH8IuAMa89RVxDxgPNlosZxqkFKN5UmHXuYSw==
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"