diff --git a/main.go b/main.go index 5bfdc84..548585b 100644 --- a/main.go +++ b/main.go @@ -23,7 +23,7 @@ import ( "text/template" ) -const VERSION = "v11" +const VERSION = "v12" const CONTEXT_USER = 1 const SYNC_PAGINATION = 200 diff --git a/static/css/notes2.css b/static/css/notes2.css index 28ee7a2..743b4b3 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -32,31 +32,55 @@ 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" - ; - 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); + &.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-rows: - /* Crumbs */ - min-content - /* Name */ - min-content - /* Content */ - 1fr; /* Tree expander is collapsed as default */ --tree-expander: 0px; @@ -223,11 +247,10 @@ button { &.history { #page-history { - display: contents; + display: grid; + grid-area: n2-pagehistory; - n2-pagehistory { - grid-area: content; - } + n2-pagehistory {} } } } @@ -515,143 +538,3 @@ 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 11c3007..0b66c69 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -30,11 +30,18 @@ export class App { }) _mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => { - const classList = document.querySelector('#main-page').classList + let 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 074c0bb..acea847 100644 --- a/static/js/page_history.mjs +++ b/static/js/page_history.mjs @@ -24,35 +24,39 @@ export class N2PageHistory extends CustomHTMLElement {

-
Actions
-
- -
-
- - -
History
-
-
-
History on server:
-
- -
History on client:
-
+
+
Actions
+
+ +
-
-
-
<
-
-
>
+
History
+
+
+
History on server:
+
+ +
History on client:
+
+
+ +
+ +
+
<
+
+
>
+
-
Document
-
-
+
+
Document
+
+
+
` }// }}} @@ -129,23 +133,35 @@ 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 b6a1a13..0689818 100644 --- a/static/service_worker.js +++ b/static/service_worker.js @@ -6,6 +6,7 @@ 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', @@ -119,9 +120,13 @@ self.addEventListener('activate', event => { }) self.addEventListener('fetch', event => { - // console.debug('SERVICE WORKER: fetch', event.request.url) + // 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 - if ({{ .DevMode }}) + if (`{{ .DevMode }}` == 'true') return event event.respondWith(fetchAsset(event)) diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl index f15bbb5..1142eda 100644 --- a/views/pages/notes2.gotmpl +++ b/views/pages/notes2.gotmpl @@ -1,5 +1,6 @@ {{ define "page" }} -
+ +
>
@@ -24,6 +25,7 @@
+