static/css/notes2.css

@@ -10,8 +10,6 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
-
-	--show-tree: 0px;
 }
 
 html {
@@ -27,93 +25,26 @@ html {
 
 	display: grid;
 	grid-template-areas:
-		"show-tree tree hum crumbs  crumbs    ding"
+		"tree hum crumbs  crumbs    ding"
-		"show-tree tree hum name    name      ding"
+		"tree hum name    name      ding"
-		"show-tree tree hum sync    functions ding"
+		"tree hum sync    functions ding"
-		"show-tree tree hum content content   ding"
+		"tree hum content content   ding"
-		"show-tree tree hum blank   blank     ding"
+		"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:
-			"show-tree hum crumbs    ding"
+			"crumbs"
-			"show-tree hum name      ding"
+			"sync"
-			"show-tree hum functions ding"
+			"name"
-			"show-tree hum content   ding"
+			"content"
-			"show-tree hum blank     ding"
+			"blank"
-			"show-tree hum sync      ding"
 		;
-		grid-template-columns: 32px 16px 1fr 16px;
+		grid-template-columns: 1fr;
-
-		&.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;
@@ -124,18 +55,8 @@ html {
 				top: 4px;
 			}
 		}
-
-		n2-nodeui {
-			.el-functions {
-				width: calc(100% - 32px);
-			}
-
-			.el-node-markdown {
-				overflow-wrap: anywhere;
-				width: calc(100% - 32px);
-			}
-		}
 	}
+
 }
 
 #tree {
@@ -180,7 +101,8 @@ html {
 	}
 
 	&:focus-within {
-		n2-tree {}
+		n2-tree {
+		}
 
 	}
 
@@ -249,22 +171,11 @@ html {
 	&.storage {
 		#page-storage {
 			display: contents;
-
 			n2-pagestorage {
 				grid-area: content;
 			}
 		}
 	}
-
-	&.history {
-		#page-history {
-			display: contents;
-
-			n2-pagehistory {
-				grid-area: content;
-			}
-		}
-	}
 }
 
 #crumbs {
@@ -276,10 +187,11 @@ html {
 	margin: 0 16px 16px 16px;
 
 	n2-crumbs {
-		background: #eaeaea;
+		background: #e4e4e4;
 		display: flex;
 		flex-wrap: wrap;
 		padding: 8px 16px;
+		background: #e4e4e4;
 		color: #333;
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
@@ -396,7 +308,7 @@ n2-nodeui {
 		color: #333;
 		font-weight: bold;
 		text-align: center;
-		font-size: 1.5em;
+		font-size: 1.15em;
 		margin-top: 8px;
 		margin-bottom: 0px;
 	}

static/js/page_history.mjs

@@ -1,15 +0,0 @@
-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/page_node.mjs

@@ -92,7 +92,6 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 			this.node.setContent(this.elNodeContent.value)
 		})
-		this.elIconHistory.addEventListener('click', ()=>_mbus.dispatch('SHOW_PAGE', { page: 'history' }))
 
 		this.showMarkdown(true)
 	}// }}}

static/js/tree.mjs

@@ -6,23 +6,13 @@ export class N2Tree extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<style>
+			<div data-el="logo" id="logo">
-				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 data-el="logo" src="/images/${_VERSION}/logo.svg" />
+				<img src="/images/${_VERSION}/logo.svg" />
-				<div data-el="hide-tree">&lt;</div>
+				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
 			</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>
@@ -45,11 +35,6 @@ 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,14 +1,5 @@
 {{ 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">
@@ -20,27 +11,23 @@
 		<!-- 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>
-
-		<!-- History -->
-		<div id="page-history">
-			<n2-pagehistory></n2-pagehistory>
-		</div>
 	</div>
 </div>
 
 <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"
 	import {API} from 'api'
 	import {Sync} from 'sync'
 	import { } from '/js/{{ .VERSION }}/page_storage.mjs'
-	import { } from '/js/{{ .VERSION }}/page_history.mjs'
 	import { } from '/js/{{ .VERSION }}/file.mjs'
 
 	window.Sync = Sync