From 4cd154ba1d38400fc2cddd3ebfc2af4ae94a34ed Mon Sep 17 00:00:00 2001 From: Thomas Klaehn Date: Mon, 25 Mar 2024 07:44:12 +0100 Subject: [PATCH] Change menu --- webui/package-lock.json | 13 ++ webui/package.json | 5 +- webui/src/css/style.css | 171 ++------------------------ webui/src/lib/Header.svelte | 39 +++--- webui/src/routes/bicycle/+page.svelte | 4 +- 5 files changed, 49 insertions(+), 183 deletions(-) diff --git a/webui/package-lock.json b/webui/package-lock.json index 6d43e20..0b80eda 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "home", "version": "0.0.1", + "dependencies": { + "hamburger-menu-svelte": "^2.2.0" + }, "devDependencies": { "@fontsource/fira-mono": "^4.5.10", "@neoconfetti/svelte": "^1.0.0", @@ -1661,6 +1664,11 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "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": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -4118,6 +4126,11 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "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": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", diff --git a/webui/package.json b/webui/package.json index d107e61..bca54bc 100644 --- a/webui/package.json +++ b/webui/package.json @@ -32,5 +32,8 @@ "vite": "^4.0.4", "vitest": "^0.25.3" }, - "type": "module" + "type": "module", + "dependencies": { + "hamburger-menu-svelte": "^2.2.0" + } } diff --git a/webui/src/css/style.css b/webui/src/css/style.css index ff68cb3..77f8f07 100644 --- a/webui/src/css/style.css +++ b/webui/src/css/style.css @@ -141,175 +141,20 @@ textarea { 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*/ -.header { - background-color: #282929; - /*position: fixed;*/ - width: 100%; - z-index: 510; +header { + height: 40px; + display: flex; + align-items: center; + padding:10px 20px; } -.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; - position: relative; - user-select: none; -} - -.header .menu-icon .nav-icon { - background: #000; - display: block; - 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; +@media (min-width: 768px) { + header { + justify-content: space-between; } } diff --git a/webui/src/lib/Header.svelte b/webui/src/lib/Header.svelte index 56096a7..b06cc15 100644 --- a/webui/src/lib/Header.svelte +++ b/webui/src/lib/Header.svelte @@ -1,22 +1,27 @@
- - - - - - - - - +
+ + diff --git a/webui/src/routes/bicycle/+page.svelte b/webui/src/routes/bicycle/+page.svelte index 1d98e89..57549e3 100644 --- a/webui/src/routes/bicycle/+page.svelte +++ b/webui/src/routes/bicycle/+page.svelte @@ -2,8 +2,8 @@ import { onMount } from "../../../node_modules/svelte/internal"; import icon from "$lib/images/wheels.svg" - let backend_url = "https://home.blackfinn.de/api/bicycle"; - // let backend_url = "http://localhost:5000/api/bicycle"; + // let backend_url = "https://home.blackfinn.de/api/bicycle"; + let backend_url = "http://localhost:5000/api/bicycle"; let year = "2024"; let total_distance_value = 0.0;