Layout changes

static/css/notes2.css

@@ -11,6 +11,7 @@
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
 	--tree-expander: 0px;
+	--functions-width: 150px;
 }
 
 html {
@@ -30,8 +31,7 @@ html {
 	display: grid;
 	grid-template-areas:
 		"tree-expander tree pad1 crumbs  crumbs    pad2"
-		"tree-expander tree pad1 name    name      pad2"
+		"tree-expander tree pad1 name    functions pad2"
-		"tree-expander tree pad1 sync    functions pad2"
 		"tree-expander tree pad1 content content   pad2"
 	;
 
@@ -41,9 +41,9 @@ html {
 		/* Tree */
 		min-content minmax(32px, 1fr)
 		/* Sync */
-		minmax(min-content, calc(900px - 156px))
+		minmax(min-content, calc(var(--content-width) - var(--functions-width)))
 		/* Functions */
-		156px
+		var(--functions-width)
 		/* Content */
 		minmax(32px, 1fr);
 
@@ -52,8 +52,6 @@ html {
 		min-content
 		/* Name */
 		min-content
-		/* Sync */
-		48px
 		/* Content */
 		1fr;
 
@@ -80,14 +78,11 @@ html {
 @media only screen and (max-width: 800px) {
 	#notes2 {
 		grid-template-areas:
-			"tree-expander pad1 crumbs    pad2"
+			"tree-expander pad1 crumbs    crumbs    pad2"
-			"tree-expander pad1 name      pad2"
+			"tree-expander pad1 name      functions pad2"
-			"tree-expander pad1 functions pad2"
+			"tree-expander pad1 content   content   pad2"
-			"tree-expander pad1 content   pad2"
-			"tree-expander pad1 blank     pad2"
-			"tree-expander pad1 sync      pad2"
 		;
-		grid-template-columns: 32px 16px 1fr 16px;
+		grid-template-columns: 32px 16px 1fr var(--functions-width) 16px;
 
 		&.show-tree {
 			grid-template-areas: "tree";
@@ -114,6 +109,7 @@ html {
 #tree-expander {
 	grid-area: tree-expander;
 	color: #333;
+	background-color: #eee;
 	font-weight: bold;
 	border-right: 2px solid #ddd;
 
@@ -224,9 +220,6 @@ html {
 	}
 }
 
-n2-nodeui {
-}
-
 [id^="page-"] {
 	display: none;
 }
@@ -265,28 +258,19 @@ n2-nodeui {
 	grid-area: crumbs;
 	display: grid;
 	align-items: start;
-	justify-items: center;
+	justify-items: start;
 	height: min-content;
-	margin: 0 16px 16px 16px;
+	margin: 0 16px 16px 0px;
 
 	n2-crumbs {
-		background: #eaeaea;
 		display: flex;
 		flex-wrap: wrap;
-		padding: 8px 16px;
+		align-items: center;
+		padding: 16px 0px;
 		color: #333;
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
 
-		&.node-modified {
-			background-color: var(--color1);
-			color: var(--color2);
-
-			.crumb:after {
-				color: var(--color2);
-			}
-		}
-
 		n2-crumb {
 			margin-right: 8px;
 			cursor: pointer;
@@ -299,21 +283,24 @@ n2-nodeui {
 			}
 		}
 
-		n2-crumb:after {
+
+		n2-crumb:before {
 			content: ">";
 			font-weight: bold;
 			color: var(--color1)
 		}
 
-		n2-crumb:last-child {
-			margin-right: 0;
-		}
 
-		n2-crumb:last-child:after {
+		n2-crumb.home {
+			&:before {
 				content: '';
 				margin-left: 0px;
 			}
 
+			img {
+				height: 24px;
+			}
+		}
 	}
 
 }
@@ -385,19 +372,33 @@ n2-syncprogress {
 n2-nodeui {
 	margin-bottom: 32px;
 
+	&.node-modified:before {
+		content: 'h';
+		z-index: 8192;
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		height: 4px;
+
+		background-color: var(--color1);
+		color: var(--color2);
+	}
+
 	.el-name {
 		grid-area: name;
 		color: #333;
 		font-weight: bold;
-		text-align: center;
+		font-size: 1.75em;
-		font-size: 1.5em;
 		margin-top: 8px;
 		margin-bottom: 0px;
 	}
 
 	.el-functions {
 		grid-area: functions;
-		width: calc(100% - 32px);
+		justify-self: end;
+		align-self: end;
+		margin-bottom: 6px;
 	}
 
 	.el-node-content {
@@ -405,6 +406,7 @@ n2-nodeui {
 		justify-self: center;
 		word-wrap: break-word;
 		font-family: monospace;
+		font-size: 1em;
 		color: #333;
 
 		width: 100%;
@@ -418,12 +420,9 @@ n2-nodeui {
 		border-left: none;
 		border-right: none;
 		border-top: 1px solid #e0e0e0;
-		border-bottom: 1px solid #e0e0e0;
+		border-bottom: none;
+		margin-top: 8px;
 		margin-bottom: 32px;
-
-		&:invalid {
-			padding-top: 16px;
-		}
 	}
 
 	.el-node-markdown {
@@ -431,11 +430,10 @@ n2-nodeui {
 		display: none;
 
 		border-top: 1px solid #e0e0e0;
-		border-bottom: 1px solid #e0e0e0;
+		margin-top: 8px;
 		margin-bottom: 32px;
 
 		overflow-wrap: anywhere;
-		width: calc(100% - 32px);
 	}
 
 	&.show-markdown {

static/images/icon_home.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24"
+   height="20.000013"
+   viewBox="0 0 6.3499998 5.2916702"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_home.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="34.879392"
+     inkscape:cx="11.797797"
+     inkscape:cy="8.3717056"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showgrid="true">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458333"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.39375,-146.31458)">
+    <title
+       id="title1">home-outline</title>
+    <path
+       id="path1"
+       style="stroke-width:0.264583;stroke-dasharray:none;fill:#666666"
+       d="m 105.56875,146.31458 -3.175,2.64583 0.79375,0 v 2.64584 l 2.11667,0 v -1.5875 h 0.26458 v -0.52917 H 104.775 v 1.5875 l -1.05833,0 0,-2.64583 1.85208,-1.5875 z"
+       sodipodi:nodetypes="cccccccccccccc" />
+    <path
+       id="path2"
+       style="stroke-width:0.264583;stroke-dasharray:none;fill:#666666"
+       d="m 105.56875,146.31458 3.175,2.64583 -0.79375,0 v 2.64584 l -2.11667,0 v -1.5875 h -0.26458 v -0.52917 h 0.79375 v 1.5875 l 1.05833,0 0,-2.64583 -1.85208,-1.5875 z"
+       sodipodi:nodetypes="cccccccccccccc" />
+  </g>
+</svg>

static/js/app.mjs

@@ -237,7 +237,7 @@ class N2Crumbs extends CustomHTMLElement {
 			)
 		)
 
-		const start = new N2Crumb('Start', ROOT_NODE)
+		const start = new N2Crumb('', ROOT_NODE)
 		crumbs.push(start)
 
 		this.replaceChildren(...crumbs.reverse())
@@ -255,8 +255,18 @@ class N2Crumb extends CustomHTMLElement {
 	}// }}}
 	constructor(label, uuid) {// {{{
 		super()
-		this.classList.add('crumb')
 
+		// The house makes it a bit more graphical than just a bunch of text.
+		if (uuid === ROOT_NODE) {
+			const start = document.createElement('div')
+			start.innerHTML = `<img src="/images/${_VERSION}/icon_home.svg">`
+			start.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: ROOT_NODE, dontPush: false, dontExpand: true }))
+			this.classList.add('home')
+			this.replaceChildren(start)
+			return
+		}
+
+		this.classList.add('crumb')
 		this.label = label
 		this.uuid = uuid
 

static/js/page_node.mjs

@@ -48,14 +48,14 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		})
 
 		_mbus.subscribe('NODE_MODIFIED', () => {
-			document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
+			this.classList.add('node-modified')
 			this.elIconSave.src = `/images/${_VERSION}/icon_save.svg`
 			this.elIconSave.classList.add('colorize')
 			this.renderName()
 		})
 
 		_mbus.subscribe('NODE_UNMODIFIED', () => {
-			document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
+			this.classList.remove('node-modified')
 			this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg`
 			this.elIconSave.classList.remove('colorize')
 		})

static/service_worker.js

@@ -11,6 +11,7 @@ const CACHED_ASSETS = [
 	'/images/{{ .VERSION }}/collapsed.svg',
 	'/images/{{ .VERSION }}/expanded.svg',
 	'/images/{{ .VERSION }}/icon_history.svg',
+	'/images/{{ .VERSION }}/icon_home.svg',
 	'/images/{{ .VERSION }}/icon_markdown_hollow.svg',
 	'/images/{{ .VERSION }}/icon_markdown.svg',
 	'/images/{{ .VERSION }}/icon_refresh.svg',