thor/wg-ui
1
0
Fork 0
mirror of https://github.com/Threnklyn/wg-ui.git synced 2026-06-06 22:00:09 +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
Makefile
+1 -1
View File
@@ -3,7 +3,7 @@
binary: go-binary ui
go-binary:
go-bindata-assetfs -prefix ui/public ui/public
go-bindata-assetfs -prefix ui/dist ui/dist
go build .
ui:
ui/package-lock.json
Generated
+42
View File
@@ -1100,6 +1100,19 @@
"integrity": "sha512-aXAa1Pv6w32URacE9LfMsl9zI6hFwx1K0Lp3Xpyf4rAkmaAB6z0gOkhicOrVFc0f64YheJgHjE7hJFieVenQdw==",
"dev": true
},
"@material/icon-button": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz",
"integrity": "sha512-UTX1q4x5FxntBeb5TxBsXIjbhwFjQxJxovaUGo8+eUL9V9tU6rJ3NnlrFirx9gZnFIU1Xpssm91NCItVZy/Dpg==",
"dev": true,
"requires": {
"@material/base": "^3.1.0",
"@material/feature-targeting": "^3.1.0",
"@material/ripple": "^3.2.0",
"@material/theme": "^3.1.0",
"tslib": "^1.9.3"
}
},
"@material/ripple": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-3.2.0.tgz",
@@ -1138,6 +1151,24 @@
"@material/feature-targeting": "^3.1.0"
}
},
"@material/top-app-bar": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-3.2.0.tgz",
"integrity": "sha512-p3PuCIbg0uDveS30D1R8/fcwqeTMXe4oRFnB6Z5Wlej0NySi6038i+TPsHtgYLCR3QpVThnkVch37zyXcNpQoQ==",
"dev": true,
"requires": {
"@material/animation": "^3.1.0",
"@material/base": "^3.1.0",
"@material/elevation": "^3.1.0",
"@material/icon-button": "^3.2.0",
"@material/ripple": "^3.2.0",
"@material/rtl": "^3.2.0",
"@material/shape": "^3.1.0",
"@material/theme": "^3.1.0",
"@material/typography": "^3.1.0",
"tslib": "^1.9.3"
}
},
"@material/typography": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@material/typography/-/typography-3.1.0.tgz",
@@ -1213,6 +1244,17 @@
"@material/ripple": "^3.1.0"
}
},
"@smui/top-app-bar": {
"version": "1.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@smui/top-app-bar/-/top-app-bar-1.0.0-beta.16.tgz",
"integrity": "sha512-iI4wzwier6VuxBJ/9XumRetoZf+7Y7wRy/3Vc2f4Tvy4jYj9131LjYvwdL6TlO+m/pNZnvCt92bGRGPIZ30sQA==",
"dev": true,
"requires": {
"@material/feature-targeting": "^3.1.0",
"@material/top-app-bar": "^3.1.0",
"@smui/common": "^1.0.0-beta.15"
}
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
ui/package.json
+3 -2
View File
@@ -4,7 +4,7 @@
"description": "Wireguard VPN web UI",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode=development --open",
"dev": "webpack-dev-server --mode=development --open --port 5000",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress",
"test": "jest",
"prettier": "prettier --check ./src/**/*.{js,css,json,md}"
@@ -19,7 +19,8 @@
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"@material/typography": "^3.1.0",
"@smui/button": "^1.0.0-beta.10",
"@smui/button": "^1.0.0-beta.16",
"@smui/top-app-bar": "^1.0.0-beta.16",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
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 {
}
ui/theme/_smui-theme.scss
+1
View File
@@ -0,0 +1 @@
// Nothing here. Just use the default theme.
ui/webpack.config.js
+8 -1
View File
@@ -61,7 +61,14 @@ module.exports = {
* */
prod ? MiniCssExtractPlugin.loader : "style-loader",
"css-loader",
"sass-loader"
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["./theme", "./node_modules"]
}
}
}
]
},
{