thor/wg-ui
1
0
Fork 0
mirror of https://github.com/Threnklyn/wg-ui.git synced 2026-05-24 15:48:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace top bar

Browse Source
This commit is contained in:
Daniel Lundin
2019-10-03 15:51:36 +02:00
parent 0556dfef2a
commit d6fe4d9817
9 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/App.svelte
+6
View File
@@ -1,3 +1,7 @@
<svelte:head>
<title>Wireguard VPN</title>
</svelte:head>
<script>
import { onMount } from 'svelte';
import { Router, Link, Route } from "svelte-routing";
@@ -13,6 +17,7 @@
export let url = "";
</script>
<div class="mdc-typography">
<Router url="{url}">
<Nav user="{user}" />
<main role="main" class="container">
@@ -23,3 +28,4 @@
</div>
</main>
</Router>
</div>
ui/src/Nav.svelte
+11 -18
View File
@@ -1,4 +1,5 @@
<script>
import TopAppBar, {Row, Section, Title} from "@smui/top-app-bar";
import { Router, Link, Route } from "svelte-routing";
import About from "./About.svelte";
import Clients from "./Clients.svelte";
@@ -7,21 +8,13 @@
export let user;
</script>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/">Wireguard VPN</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><NavLink to="/">Clients</NavLink></li>
<li class="nav-item"><NavLink to="about">About</NavLink></li>
</ul>
</div>
<div class="text-light">
<small>Logged in as {user}</small>
</div>
</nav>
</header>
<TopAppBar variant="static" color="primary">
<Row>
<Section>
<Title>Wireguard VPN</Title>
</Section>
<Section align="end" toolbar>
Logged in as {user}
</Section>
</Row>
</TopAppBar>
ui/src/index.ejs
+8 -5
View File
@@ -1,11 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
</head>
<body>
</body>
ui/src/style.scss
+7 -3
View File
@@ -1,4 +1,8 @@
body {
background-color: aliceblue;
color: #ff392d;
@import "@material/typography/mdc-typography";
.container {
padding: 30px;
}
body {
}