From 05be8548fea220e20032d8ad6449861227da4489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 19 Apr 2025 13:41:16 +0200
Subject: [PATCH] GUI changes

---
 static/css/notes2.css   | 73 +++++++++++++++++-----------------
 static/js/notes2.mjs    |  2 +-
 static/less/notes2.less | 88 +++++++++++++++++++++--------------------
 3 files changed, 83 insertions(+), 80 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index f44c24a..4dd71c4 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -6,7 +6,7 @@ html {
   display: grid;
   grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
   grid-template-columns: min-content 1fr;
-  grid-template-rows: 64px 56px 48px min-content 1fr;
+  grid-template-rows: 48px 56px 48px min-content 1fr;
 }
 @media only screen and (max-width: 600px) {
   #notes2 {
@@ -82,9 +82,43 @@ html {
 #crumbs {
   grid-area: crumbs;
   display: grid;
-  align-items: center;
+  align-items: start;
   justify-items: center;
-  margin: 16px;
+  margin: 0px 16px;
+}
+#crumbs .crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 16px;
+  background: #e4e4e4;
+  color: #333;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+#crumbs .crumbs.node-modified {
+  background-color: #fe5f55;
+  color: #efede8;
+}
+#crumbs .crumbs.node-modified .crumb:after {
+  color: #efede8;
+}
+#crumbs .crumbs .crumb {
+  margin-right: 8px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+#crumbs .crumbs .crumb:after {
+  content: "•";
+  margin-left: 8px;
+  color: #fe5f55;
+}
+#crumbs .crumbs .crumb:last-child {
+  margin-right: 0;
+}
+#crumbs .crumbs .crumb:last-child:after {
+  content: '';
+  margin-left: 0px;
 }
 #sync-progress {
   grid-area: sync;
@@ -134,39 +168,6 @@ html {
   opacity: 0;
   transition: visibility 0s 500ms, opacity 500ms linear;
 }
-.crumbs {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 8px 16px;
-  background: #e4e4e4;
-  color: #333;
-  border-radius: 5px;
-}
-.crumbs.node-modified {
-  background-color: #fe5f55;
-  color: #efede8;
-}
-.crumbs.node-modified .crumb:after {
-  color: #efede8;
-}
-.crumbs .crumb {
-  margin-right: 8px;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-.crumbs .crumb:after {
-  content: "•";
-  margin-left: 8px;
-  color: #fe5f55;
-}
-.crumbs .crumb:last-child {
-  margin-right: 0;
-}
-.crumbs .crumb:last-child:after {
-  content: '';
-  margin-left: 0px;
-}
 #name {
   color: #333;
   font-weight: bold;
diff --git a/static/js/notes2.mjs b/static/js/notes2.mjs
index 58ce96e..9632853 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -99,7 +99,7 @@ class Tree extends Component {
 			<div id="tree" ref=${this.treeDiv} tabindex="0">
 				<div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div>
 				<div class="icons">
-					<img src="/images/${_VERSION}/icon_refresh.svg" />
+					<img src="/images/${_VERSION}/icon_refresh.svg" onclick=${()=>_sync.run()} />
 				</div>
 				${renderedTreeTrunk}
 			</div>`
diff --git a/static/less/notes2.less b/static/less/notes2.less
index 3593011..e537c45 100644
--- a/static/less/notes2.less
+++ b/static/less/notes2.less
@@ -20,7 +20,7 @@ html {
 		;
 	grid-template-columns: min-content 1fr;
 	grid-template-rows:
-		64px
+		48px
 		56px
 		48px
 		min-content
@@ -126,9 +126,51 @@ html {
 #crumbs {
 	grid-area: crumbs;
 	display: grid;
-	align-items: center;
+	align-items: start;
 	justify-items: center;
-	margin: 16px;
+	margin: 0px 16px;
+
+	.crumbs {
+		background: #e4e4e4;
+		display: flex;
+		flex-wrap: wrap;
+		padding: 8px 16px;
+		background: #e4e4e4;
+		color: #333;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+
+		&.node-modified {
+			background-color: @color1;
+			color: @color2;
+			.crumb:after {
+				color: @color2;
+			}
+		}
+
+		.crumb {
+			margin-right: 8px;
+			cursor: pointer;
+			user-select: none;
+			-webkit-tap-highlight-color: transparent;
+		}
+
+		.crumb:after {
+			content: "•";
+			margin-left: 8px;
+			color: @color1
+		}
+
+		.crumb:last-child {
+			margin-right: 0;
+		}
+		.crumb:last-child:after {
+			content: '';
+			margin-left: 0px;
+		}
+
+	}
+
 }
 
 #sync-progress {
@@ -190,46 +232,6 @@ html {
 
 }
 
-.crumbs {
-	background: #e4e4e4;
-	display: flex;
-	flex-wrap: wrap;
-	padding: 8px 16px;
-	background: #e4e4e4;
-	color: #333;
-	border-radius: 5px;
-
-	&.node-modified {
-		background-color: @color1;
-		color: @color2;
-		.crumb:after {
-			color: @color2;
-		}
-	}
-
-	.crumb {
-		margin-right: 8px;
-		cursor: pointer;
-		user-select: none;
-		-webkit-tap-highlight-color: transparent;
-	}
-
-	.crumb:after {
-		content: "•";
-		margin-left: 8px;
-		color: @color1
-	}
-
-	.crumb:last-child {
-		margin-right: 0;
-	}
-	.crumb:last-child:after {
-		content: '';
-		margin-left: 0px;
-	}
-
-}
-
 #name {
 	color: #333;
 	font-weight: bold;