Change menu
This commit is contained in:
Thomas Klaehn
parent
0a2b75f4b5
commit
4cd154ba1d
13
webui/package-lock.json
generated
13
webui/package-lock.json
generated
@ -7,6 +7,9 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "home",
|
"name": "home",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
|
"dependencies": {
|
||||||
|
"hamburger-menu-svelte": "^2.2.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@fontsource/fira-mono": "^4.5.10",
|
"@fontsource/fira-mono": "^4.5.10",
|
||||||
"@neoconfetti/svelte": "^1.0.0",
|
"@neoconfetti/svelte": "^1.0.0",
|
||||||
@ -1661,6 +1664,11 @@
|
|||||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/hamburger-menu-svelte": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/hamburger-menu-svelte/-/hamburger-menu-svelte-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-KCdOh8WgM6loONskHKD32YsYMjS5k5npoV5Stn3YxTK6iAVtgIxazq5n1cb1OkqOMcz2Gog6HrrHV7JHV/5ulQ=="
|
||||||
|
},
|
||||||
"node_modules/has": {
|
"node_modules/has": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||||
@ -4118,6 +4126,11 @@
|
|||||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"hamburger-menu-svelte": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/hamburger-menu-svelte/-/hamburger-menu-svelte-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-KCdOh8WgM6loONskHKD32YsYMjS5k5npoV5Stn3YxTK6iAVtgIxazq5n1cb1OkqOMcz2Gog6HrrHV7JHV/5ulQ=="
|
||||||
|
},
|
||||||
"has": {
|
"has": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||||
|
|||||||
@ -32,5 +32,8 @@
|
|||||||
"vite": "^4.0.4",
|
"vite": "^4.0.4",
|
||||||
"vitest": "^0.25.3"
|
"vitest": "^0.25.3"
|
||||||
},
|
},
|
||||||
"type": "module"
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"hamburger-menu-svelte": "^2.2.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -141,175 +141,20 @@ textarea {
|
|||||||
margin-left: 2%;
|
margin-left: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #282929;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*logo placement*/
|
|
||||||
|
|
||||||
header figure {
|
|
||||||
float: left;
|
|
||||||
color: #b6b6b6;
|
|
||||||
}
|
|
||||||
|
|
||||||
header figure.logo {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Navigation*/
|
/*Navigation*/
|
||||||
|
|
||||||
.header {
|
header {
|
||||||
background-color: #282929;
|
height: 40px;
|
||||||
/*position: fixed;*/
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
z-index: 510;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-color: #282929; */
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li a {
|
|
||||||
display: block;
|
|
||||||
padding: 30px 5px 10px 5px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
border-right: 1px solid #282929;
|
|
||||||
text-decoration: none;
|
|
||||||
/* background: rgba(255, 255, 255, 0.9) */
|
|
||||||
background-color: #282929;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li a:hover,
|
|
||||||
.header .menu-btn:hover {
|
|
||||||
background-color: #282929;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .logo {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-size: 2em;
|
|
||||||
padding: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* menu */
|
|
||||||
|
|
||||||
.header .menu {
|
|
||||||
clear: both;
|
|
||||||
max-height: 0;
|
|
||||||
transition: max-height .2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* menu icon */
|
|
||||||
|
|
||||||
.header .menu-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
float: right;
|
|
||||||
margin: 2%;
|
|
||||||
padding:10px 20px;
|
padding:10px 20px;
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-icon .nav-icon {
|
@media (min-width: 768px) {
|
||||||
background: #000;
|
header {
|
||||||
display: block;
|
justify-content: space-between;
|
||||||
height: 5px;
|
|
||||||
position: relative;
|
|
||||||
transition: background .2s ease-out;
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .nav-icon:before,
|
|
||||||
.header .menu-icon .nav-icon:after {
|
|
||||||
background: #000;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
transition: all .2s ease-out;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .nav-icon:before {
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .nav-icon:after {
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* menu btn */
|
|
||||||
|
|
||||||
.header .menu-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu {
|
|
||||||
max-height: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .nav-icon {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .nav-icon:before {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .nav-icon:after {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* menu content - larger screen*/
|
|
||||||
|
|
||||||
@media (min-width: 1132px) {
|
|
||||||
.header li {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.header li a {
|
|
||||||
padding: 20px 15px 5px 0px;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.header .menu {
|
|
||||||
clear: none;
|
|
||||||
float: right;
|
|
||||||
max-height: none;
|
|
||||||
}
|
|
||||||
.header .menu-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* smaller screen*/
|
|
||||||
|
|
||||||
@media (max-width: 924px) {
|
|
||||||
.header li {
|
|
||||||
padding: 30px 5px 10px 5px;
|
|
||||||
}
|
|
||||||
.header li a {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,22 +1,27 @@
|
|||||||
<script>
|
<script>
|
||||||
import favicon from '$lib/images/haus.svg'
|
import Hamburger from "hamburger-menu-svelte";
|
||||||
|
const menu_list = [
|
||||||
|
{ name: "Home", url: "/" },
|
||||||
|
{ name: "Bicycle", url: "/bicycle" },
|
||||||
|
{ name: "Sauna", url: "/sauna" }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<!-- <a href="https://www.perinet.io" target="_blank" class="logo">
|
<Hamburger {menu_list}/>
|
||||||
<img src={perinetLogo} alt="Perinet Logo" width="180">
|
|
||||||
</a> -->
|
|
||||||
|
|
||||||
<link rel="shortcut icon" type="image/svg" href={favicon} />
|
|
||||||
|
|
||||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
|
||||||
|
|
||||||
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
|
||||||
|
|
||||||
<ul class="menu">
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/bicycle">Bicycle</a></li>
|
|
||||||
<!-- <li><a href="/chicken">Chicken</a></li> -->
|
|
||||||
<li><a href="/sauna">Sauna</a></li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* header {
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding:10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
header {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
</style>
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
import { onMount } from "../../../node_modules/svelte/internal";
|
import { onMount } from "../../../node_modules/svelte/internal";
|
||||||
import icon from "$lib/images/wheels.svg"
|
import icon from "$lib/images/wheels.svg"
|
||||||
|
|
||||||
let backend_url = "https://home.blackfinn.de/api/bicycle";
|
// let backend_url = "https://home.blackfinn.de/api/bicycle";
|
||||||
// let backend_url = "http://localhost:5000/api/bicycle";
|
let backend_url = "http://localhost:5000/api/bicycle";
|
||||||
|
|
||||||
let year = "2024";
|
let year = "2024";
|
||||||
let total_distance_value = 0.0;
|
let total_distance_value = 0.0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user