commit 7591a935fec0748b5810442526b95d72be0f5ba3
parent 3daf877f031afeeb8596ca5fbbc63ad190423ef5
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Fri, 16 Aug 2024 21:25:37 -0700
Update nav bar
Style & structure was updated and it now it works on floorplan
editor page.
Diffstat:
8 files changed, 86 insertions(+), 46 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -1,48 +1,64 @@
+:root {
+ --main-color: #8ACFFF;
+}
+
body {
- margin: 4rem;
+ margin-top: 2.5em !important;
}
-nav {
- top: 0;
- left: 0;
+#bar {
position: absolute;
- margin: 0;
- width: 100%;
- height: 2rem;
- background-color: lightgrey;
+ box-sizing: border-box;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ max-width: 100%;
+ height: 2em;
+ background-color: var(--main-color);
+ border-bottom: medium ridge var(--main-color);
+ display: flex;
+ align-items: center;
+ padding: .4em;
+}
+
+#bar > ul {
+ list-style: none;
+ display: inline-block;
+ padding: 0;
+ margin: 0;
}
-nav > ul {
- margin: 0;
- padding: 0;
+#bar > ul.right {
+ margin-top: .3em;
+ margin-left: auto;
}
-nav > ul > li {
- /* not quite needed */
- display: inline-block;
- float: left;
+#bar > ul > li {
+ display: inline-block;
}
-nav > ul:nth-child(2) {
- float: right;
+#bar > ul > li > a {
+ padding: 0.1em;
}
-nav > ul > li {
- display: block;
- padding: .5rem;
- height: 1rem;
+#bar > ul > li > a > img.icon {
+ width: 1.5em;
+ border-radius: .2em;
}
aside {
float: right;
}
+.icon {
+ image-rendering: crisp-edges;
+ border: thin solid rgba(0, 0, 0, .2);
+}
+
input[type="image"].icon {
width: 2em;
- image-rendering: crisp-edges;
margin: .15rem;
padding: .15rem;
- border: .05em solid rgba(0, 0, 0, .2);
border-radius: .4em;
}
diff --git a/files/floorplans/floorplan/index.html b/files/floorplans/floorplan/index.html
@@ -7,9 +7,11 @@
<script type="module" src="./main.js"></script>
</head>
<html>
- <body id="floorplan_container">
- <header>
- <h1 class="fp_name">Floorplan</h1>
- </header>
+ <body>
+ <section id="editor">
+ <header>
+ <h1 class="fp_name">Floorplan</h1>
+ </header>
+ </section>
</body>
</html>
diff --git a/files/floorplans/floorplan/main.css b/files/floorplans/floorplan/main.css
@@ -1,10 +1,17 @@
body {
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ height: calc(100vh - 2.5em);
+ background-color: #F3F3F3;
+}
+
+#editor {
display: flex;
flex-flow: column;
box-sizing: border-box;
- height: 100vh;
- background-color: #F3F3F3;
- margin: 0;
+ width: 100%;
+ height: 100%;
padding: min(2vh, 2vw);
}
diff --git a/files/floorplans/floorplan/main.js b/files/floorplans/floorplan/main.js
@@ -14,6 +14,7 @@ const buttons = {
function init() {
etc.authorize()
+ etc.bar()
let floorplan = (new URLSearchParams(new URL(document.URL).search)).get("name")
if (!floorplan) {
@@ -24,7 +25,7 @@ function init() {
let suffix = h1.appendChild(document.createTextNode(""))
let draw = SVG()
- .addTo("#floorplan_container")
+ .addTo("#editor")
.viewbox("0 0 400 400")
.panZoom({
panButton: buttons.right,
diff --git a/files/icons/log-in-outline.svg b/files/icons/log-in-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M192,176V136a40,40,0,0,1,40-40H392a40,40,0,0,1,40,40V376a40,40,0,0,1-40,40H240c-22.09,0-48-17.91-48-40V336" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="288 336 368 256 288 176" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="80" y1="256" x2="352" y2="256" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/icons/log-out-outline.svg b/files/icons/log-out-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M304,336v40a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V136a40,40,0,0,1,40-40H256c22.09,0,48,17.91,48,40v40" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="368 336 448 256 368 176" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="176" y1="256" x2="432" y2="256" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/icons/settings-outline.svg b/files/icons/settings-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/lib/etc.js b/files/lib/etc.js
@@ -1,10 +1,18 @@
import * as api from "/lib/api.js"
import * as ui from "/lib/ui.js"
-function link(name, href) {
+function link(name, href, icon) {
let a = document.createElement("a")
a.href = href
- a.appendChild(document.createTextNode(name))
+ if (icon) {
+ let i = document.createElement("img")
+ i.setAttribute("src", "/icons/" + icon + "-outline.svg")
+ i.setAttribute("alt", name + " icon")
+ i.classList.add("icon")
+ a.appendChild(i)
+ } else {
+ a.appendChild(document.createTextNode(name))
+ }
return a
}
@@ -16,25 +24,25 @@ function additem(list, element) {
export function bar(on) {
if (!on) {
- on = document.querySelector("body")
+ on = document.body
}
let nav = document.createElement("nav")
- let left = document.createElement("ul")
- nav.appendChild(left)
- let right = document.createElement("ul")
- nav.appendChild(right)
+ nav.id = "bar"
+
+ let left = nav.appendChild(document.createElement("ul"))
+ left.classList.add("left")
+
+ let right = nav.appendChild(document.createElement("ul"))
+ right.classList.add("right")
if (!api.logged_in()) {
- additem(right, link("Login", "/login"))
+ additem(right, link("Login", "/login", "log-in"))
} else {
- let jwt_payload = api.token_payload()
- let li = document.createElement("li")
- li.appendChild(document.createTextNode("Welcome "))
- li.appendChild(link(jwt_payload["id"], "/settings"))
- left.appendChild(li)
- additem(right, link("Floorplans", "/floorplans"))
- additem(right, link("Logout", "/logout"))
+ additem(left, link("Floorplans", "/floorplans"))
+
+ additem(right, link("Settings", "/settings", "settings"))
+ additem(right, link("Logout", "/logout", "log-out"))
}
on.prepend(nav)
