Better mobile view

static/css/notes2.css

@@ -10,6 +10,8 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
+
+	--show-tree: 0px;
 }
 
 html {
@@ -25,26 +27,93 @@ html {
 
 	display: grid;
 	grid-template-areas:
-		"tree hum crumbs  crumbs    ding"
+		"show-tree tree hum crumbs  crumbs    ding"
-		"tree hum name    name      ding"
+		"show-tree tree hum name    name      ding"
-		"tree hum sync    functions ding"
+		"show-tree tree hum sync    functions ding"
-		"tree hum content content   ding"
+		"show-tree tree hum content content   ding"
-		"tree hum blank   blank     ding"
+		"show-tree tree hum blank   blank     ding"
 	;
-	grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr);
+
+	grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
 	grid-template-rows:
 		min-content min-content 48px 1fr;
 
+	&.hide-tree {
+		--show-tree: 32px;
+		#tree {
+			border-right: none;
+		}
+		n2-tree {
+			display: none;
 
-	@media only screen and (max-width: 600px) {
+		}
+	}
+
+	#show-tree {
+		grid-area: show-tree;
+		color: #333;
+		font-weight: bold;
+		border-right: 2px solid #ddd;
+
+		display: grid;
+		justify-items: center;
+		align-items: start;
+
+		padding-top: 8px;
+		font-size: 1.25em;
+
+		div div {
+			display: inline-block;
+			writing-mode: vertical-rl;
+			transform: rotate(180deg);
+		}
+	}
+
+	n2-nodeui {
+		.el-functions {
+			width: calc(100% - 32px);
+		}
+
+		.el-node-markdown {
+			overflow-wrap: anywhere;
+			width: calc(100% - 32px);
+		}
+	}
+
+
+
+}
+
+@media only screen and (max-width: 800px) {
+	#notes2 {
 		grid-template-areas:
-			"crumbs"
+			"show-tree hum crumbs    ding"
-			"sync"
+			"show-tree hum name      ding"
-			"name"
+			"show-tree hum functions ding"
-			"content"
+			"show-tree hum content   ding"
-			"blank"
+			"show-tree hum blank     ding"
+			"show-tree hum sync      ding"
 		;
-		grid-template-columns: 1fr;
+		grid-template-columns: 32px 16px 1fr 16px;
+
+		&.show-tree {
+
+			grid-template-areas:
+				"tree"
+			;
+			grid-template-columns: 100%;
+			grid-template-rows:
+				1fr;
+
+			#tree {
+				display: grid;
+				width: 100%;
+			}
+			
+			#main-page, #show-tree {
+				display: none;
+			}
+		}
 
 		#tree {
 			display: none;
@@ -55,8 +124,18 @@ html {
 				top: 4px;
 			}
 		}
-	}
 
+		n2-nodeui {
+			.el-functions {
+				width: calc(100% - 32px);
+			}
+
+			.el-node-markdown {
+				overflow-wrap: anywhere;
+				width: calc(100% - 32px);
+			}
+		}
+	}
 }
 
 #tree {
@@ -101,8 +180,7 @@ html {
 	}
 
 	&:focus-within {
-		n2-tree {
+		n2-tree {}
-		}
 
 	}
 
@@ -171,6 +249,7 @@ html {
 	&.storage {
 		#page-storage {
 			display: contents;
+
 			n2-pagestorage {
 				grid-area: content;
 			}
@@ -180,6 +259,7 @@ html {
 	&.history {
 		#page-history {
 			display: contents;
+
 			n2-pagehistory {
 				grid-area: content;
 			}
@@ -196,11 +276,10 @@ html {
 	margin: 0 16px 16px 16px;
 
 	n2-crumbs {
-		background: #e4e4e4;
+		background: #eaeaea;
 		display: flex;
 		flex-wrap: wrap;
 		padding: 8px 16px;
-		background: #e4e4e4;
 		color: #333;
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
@@ -317,7 +396,7 @@ n2-nodeui {
 		color: #333;
 		font-weight: bold;
 		text-align: center;
-		font-size: 1.15em;
+		font-size: 1.5em;
 		margin-top: 8px;
 		margin-bottom: 0px;
 	}

static/js/page_history.mjs

@@ -0,0 +1,15 @@
+import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+
+export class N2PageHistory extends CustomHTMLElement {
+	static {
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<div>History</div>
+		`
+	}
+
+	constructor() {
+		super()
+	}
+}
+customElements.define('n2-pagehistory', N2PageHistory)

static/js/tree.mjs

@@ -6,13 +6,23 @@ export class N2Tree extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<div data-el="logo" id="logo">
+			<style>
+				n2-tree {
+					.el-hide-tree {
+						font-size: 1.25em;
+						font-weight: bold;
+						cursor: pointer;
+					}
+				}
+			</style>
+			<div id="logo">
 				<img src="/images/${_VERSION}/logo_small.svg" />
-				<img src="/images/${_VERSION}/logo.svg" />
+				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
-				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
+				<div data-el="hide-tree">&lt;</div>
 			</div>
 			<div class="icons">
 				<img data-el="sync"     class='sync colorize'     src="/images/${_VERSION}/icon_refresh.svg"  />
+				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
 				<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
 			</div>
 			<div data-el="treenodes"></div>
@@ -35,6 +45,11 @@ export class N2Tree extends CustomHTMLElement {
 		this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
 		this.elSync.addEventListener('click', () => _sync.run())
 		this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
+		this.elHideTree.addEventListener('click', event=>{
+			event.stopPropagation()
+			document.getElementById('notes2').classList.add('hide-tree')
+			document.getElementById('notes2').classList.remove('show-tree')
+		})
 
 		_mbus.subscribe('NODE_MODIFIED', ({ detail }) => {
 			const node = detail.data.node

views/pages/notes2.gotmpl

@@ -1,5 +1,14 @@
 {{ define "page" }}
+<script>
+	function showTree() {
+		const notes2 = document.getElementById('notes2')
+		notes2.classList.remove('hide-tree')
+		notes2.classList.add('show-tree')
+	}
+</script>
+
 <div id="notes2">
+	<div id="show-tree" onclick="showTree()">&gt;</div>
 	<div id="tree" tabindex=0></div>
 
 	<div id="main-page">
@@ -11,7 +20,7 @@
 		<!-- Node editing -->
 		<div id="page-node">
 			<div id="crumbs"></div>
-			<n2-syncprogress></n2-syncprogress>
+			<!--n2-syncprogress></n2-syncprogress-->
 			<n2-nodeui id="note"></n2-nodeui>
 		</div>
 
@@ -25,8 +34,6 @@
 <link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
 
 <script type="module">
-
-
 	import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'
 
 	import {App} from "/js/{{ .VERSION }}/app.mjs"