diff --git a/main.go b/main.go index 548585b..5bfdc84 100644 --- a/main.go +++ b/main.go @@ -23,7 +23,7 @@ import ( "text/template" ) -const VERSION = "v12" +const VERSION = "v11" const CONTEXT_USER = 1 const SYNC_PAGINATION = 200 diff --git a/static/css/notes2.css b/static/css/notes2.css index 743b4b3..28ee7a2 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -32,55 +32,31 @@ button { min-height: 100vh; display: grid; + grid-template-areas: + "tree-expander tree pad1 crumbs crumbs pad2" + "tree-expander tree pad1 name functions pad2" + "tree-expander tree pad1 content content pad2" + ; - &.page-node { - grid-template-areas: - "tree-expander tree pad1 crumbs crumbs pad2" - "tree-expander tree pad1 name functions pad2" - "tree-expander tree pad1 content content pad2" - ; - - grid-template-columns: - /* Tree-expander */ - var(--tree-expander) - /* Tree */ - min-content minmax(32px, 1fr) - /* Sync */ - minmax(min-content, calc(var(--content-width) - var(--functions-width))) - /* Functions */ - var(--functions-width) - /* Content */ - minmax(32px, 1fr); - - grid-template-rows: - /* Crumbs */ - min-content - /* Name */ - min-content - /* Content */ - 1fr; - } - - &.page-history { - grid-template-areas: - "tree-expander tree pad1 n2-pagehistory pad2" - ; - - grid-template-columns: - /* Tree-expander */ - var(--tree-expander) - /* Tree */ - min-content - /* pad1 */ - 32px - /* Content */ - 1fr - /* pad2 */ - 32px; - - grid-template-rows: 1fr; - } + grid-template-columns: + /* Tree-expander */ + var(--tree-expander) + /* Tree */ + min-content minmax(32px, 1fr) + /* Sync */ + minmax(min-content, calc(var(--content-width) - var(--functions-width))) + /* Functions */ + var(--functions-width) + /* Content */ + minmax(32px, 1fr); + grid-template-rows: + /* Crumbs */ + min-content + /* Name */ + min-content + /* Content */ + 1fr; /* Tree expander is collapsed as default */ --tree-expander: 0px; @@ -247,10 +223,11 @@ button { &.history { #page-history { - display: grid; - grid-area: n2-pagehistory; + display: contents; - n2-pagehistory {} + n2-pagehistory { + grid-area: content; + } } } } @@ -538,3 +515,143 @@ dialog.op { } } } + + + + + +n2-pagehistory { + + .back, + .node-name { + display: grid; + grid-template-columns: min-content 1fr; + grid-gap: 8px; + align-items: center; + margin-bottom: 16px; + } + + .group-label { + font-weight: bold; + background-color: #444; + color: #fff; + padding: 8px 32px; + display: inline-block; + margin-left: 32px; + transform: translateY(14px); + border-radius: 6px; + } + + .group { + border: 1px solid #ccc; + padding: 32px; + margin-bottom: 32px; + border-radius: 8px; + background-color: #fafafa; + + box-shadow: + rgba(0, 0, 0, 0.4) 0px 2px 4px, + rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, + rgba(0, 0, 0, 0.2) 0px -3px 0px inset; + } + + .el-stats { + margin-bottom: 16px; + display: grid; + grid-template-columns: min-content 1fr; + grid-gap: 8px 12px; + white-space: nowrap; + } + + .el-fetch-history-progress { + margin-top: 16px; + } + + .el-back-image, + .el-back-text { + cursor: pointer; + } + + .el-node-name { + margin-left: 8px; + } + + .el-nodes { + grid-column: 1 / -1; + + display: grid; + grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr; + + background-color: var(--line-color); + gap: 1px; + border: 1px solid var(--line-color); + + n2-pagehistorynode>* { + padding: 8px 12px; + background-color: #fff; + white-space: nowrap; + } + + n2-pagehistorynode { + + &.selected .el-index:after { + position: absolute; + left: -20px; + + content: '>'; + color: var(--color1); + font-weight: bold; + margin-right: 8px; + } + + .el-index { + position: relative; + text-align: right; + } + + .el-updated { + white-space: initial; + } + + .el-date { + white-space: nowrap; + font-weight: bold; + } + + .el-time { + white-space: nowrap; + color: #555; + } + + .el-name { + white-space: initial; + /*overflow-wrap: anywhere;*/ + word-break: break-all; + color: var(--color1); + } + } + } +} + +.el-pagination { + grid-column: 1 / -1; + margin-top: 16px; + + display: grid; + grid-template-columns: repeat(3, min-content); + grid-gap: 16px; + align-items: center; + white-space: nowrap; + user-select: none; + + .el-prev, + .el-next { + font-weight: bold; + cursor: pointer; + border: 1px solid #aaa; + background-color: #eee; + padding: 8px 16px; + border-radius: 4px; + } +} +} diff --git a/static/js/app.mjs b/static/js/app.mjs index 0b66c69..11c3007 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -30,18 +30,11 @@ export class App { }) _mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => { - let classList = document.querySelector('#main-page').classList + const classList = document.querySelector('#main-page').classList classList.forEach(e => classList.remove(e) ) classList.add(page) - - classList = document.querySelector('#notes2').classList - classList.forEach(e => { - if (e.startsWith('page-')) - classList.remove(e) - }) - classList.add('page-'+page) }) window.addEventListener('keydown', event => this.keyHandler(event)) diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs index acea847..37404c7 100644 --- a/static/js/page_history.mjs +++ b/static/js/page_history.mjs @@ -24,40 +24,33 @@ export class N2PageHistory extends CustomHTMLElement {

-
-
Actions
-
- -
+
Actions
+
+ +
+
+ + +
History
+
+
+
History on server:
+
+ +
History on client:
+
+
-
History
-
-
-
History on server:
-
- -
History on client:
-
-
- -
- -
-
<
-
-
>
-
+
+
<
+
+
>
-
-
Document
-
-
-
-
+
` }// }}} @@ -87,10 +80,6 @@ export class N2PageHistory extends CustomHTMLElement { _mbus.subscribe('HISTORY_NODE_SELECTED', (event) => { this.selectedNode = event.detail.data.historyNode - - // Any selected history node is rendered with markdown. - const marked = new MarkedPosition() - this.elNodeMarkdown.innerHTML = marked.parse(this.selectedNode?.node.content()) }) }// }}} async render(keepFetchHistoryProgress) {// {{{ @@ -122,6 +111,12 @@ export class N2PageHistory extends CustomHTMLElement { if (!this.selectedNode) { this.elNodes.firstElementChild?.select() } + + // Any selected history node is rendered with markdown. + /* + this.marked = new MarkedPosition() + this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value) + */ }// }}} async useNode(node) {// {{{ @@ -133,35 +128,23 @@ export class N2PageHistory extends CustomHTMLElement { this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE) }// }}} keyHandler(event) {// {{{ - let handled = true switch (event.key) { case 'ArrowLeft': this.prevPage() break - case 'ArrowRight': this.nextPage() break - case 'ArrowUp': const prevNode = this.selectedNode?.previousElementSibling if (prevNode) prevNode.select() break - case 'ArrowDown': const nextNode = this.selectedNode?.nextElementSibling if (nextNode) nextNode.select() break - - default: - handled = false - } - - if (handled) { - event.stopPropagation() - event.preventDefault() } }// }}} diff --git a/static/service_worker.js b/static/service_worker.js index 0689818..b6a1a13 100644 --- a/static/service_worker.js +++ b/static/service_worker.js @@ -6,7 +6,6 @@ const CACHED_ASSETS = [ '/css/{{ .VERSION }}/main.css', '/css/{{ .VERSION }}/markdown.css', '/css/{{ .VERSION }}/notes2.css', - '/css/{{ .VERSION }}/page_history.css', '/css/{{ .VERSION }}/theme.css', '/images/{{ .VERSION }}/collapsed.svg', @@ -120,13 +119,9 @@ self.addEventListener('activate', event => { }) self.addEventListener('fetch', event => { - // The fetch event is also seeing requests to other domains. - // Just let the browser handle those for itself. - const ourDomain = event.request.url.startsWith(self.location.origin) - if (!ourDomain) - return event + // console.debug('SERVICE WORKER: fetch', event.request.url) - if (`{{ .DevMode }}` == 'true') + if ({{ .DevMode }}) return event event.respondWith(fetchAsset(event)) diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl index 1142eda..f15bbb5 100644 --- a/views/pages/notes2.gotmpl +++ b/views/pages/notes2.gotmpl @@ -1,6 +1,5 @@ {{ define "page" }} - -
+
>
@@ -25,7 +24,6 @@
-