diff --git a/static/css/notes2.css b/static/css/notes2.css index 14f475e..a2dbc11 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -11,6 +11,7 @@ --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); --tree-expander: 0px; + --functions-width: 150px; } html { @@ -30,8 +31,7 @@ html { display: grid; grid-template-areas: "tree-expander tree pad1 crumbs crumbs pad2" - "tree-expander tree pad1 name name pad2" - "tree-expander tree pad1 sync functions pad2" + "tree-expander tree pad1 name functions pad2" "tree-expander tree pad1 content content pad2" ; @@ -41,9 +41,9 @@ html { /* Tree */ min-content minmax(32px, 1fr) /* Sync */ - minmax(min-content, calc(900px - 156px)) + minmax(min-content, calc(var(--content-width) - var(--functions-width))) /* Functions */ - 156px + var(--functions-width) /* Content */ minmax(32px, 1fr); @@ -52,8 +52,6 @@ html { min-content /* Name */ min-content - /* Sync */ - 48px /* Content */ 1fr; @@ -80,14 +78,11 @@ html { @media only screen and (max-width: 800px) { #notes2 { grid-template-areas: - "tree-expander pad1 crumbs pad2" - "tree-expander pad1 name pad2" - "tree-expander pad1 functions pad2" - "tree-expander pad1 content pad2" - "tree-expander pad1 blank pad2" - "tree-expander pad1 sync pad2" + "tree-expander pad1 crumbs crumbs pad2" + "tree-expander pad1 name functions pad2" + "tree-expander pad1 content content pad2" ; - grid-template-columns: 32px 16px 1fr 16px; + grid-template-columns: 32px 16px 1fr var(--functions-width) 16px; &.show-tree { grid-template-areas: "tree"; @@ -114,6 +109,7 @@ html { #tree-expander { grid-area: tree-expander; color: #333; + background-color: #eee; font-weight: bold; border-right: 2px solid #ddd; @@ -224,9 +220,6 @@ html { } } -n2-nodeui { -} - [id^="page-"] { display: none; } @@ -265,28 +258,19 @@ n2-nodeui { grid-area: crumbs; display: grid; align-items: start; - justify-items: center; + justify-items: start; height: min-content; - margin: 0 16px 16px 16px; + margin: 0 16px 16px 0px; n2-crumbs { - background: #eaeaea; display: flex; flex-wrap: wrap; - padding: 8px 16px; + align-items: center; + padding: 16px 0px; color: #333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; - &.node-modified { - background-color: var(--color1); - color: var(--color2); - - .crumb:after { - color: var(--color2); - } - } - n2-crumb { margin-right: 8px; cursor: pointer; @@ -299,21 +283,24 @@ n2-nodeui { } } - n2-crumb:after { + + n2-crumb:before { content: ">"; font-weight: bold; color: var(--color1) } - n2-crumb:last-child { - margin-right: 0; - } - n2-crumb:last-child:after { - content: ''; - margin-left: 0px; - } + n2-crumb.home { + &:before { + content: ''; + margin-left: 0px; + } + img { + height: 24px; + } + } } } @@ -385,19 +372,33 @@ n2-syncprogress { n2-nodeui { margin-bottom: 32px; + &.node-modified:before { + content: 'h'; + z-index: 8192; + position: fixed; + top: 0px; + left: 0px; + right: 0px; + height: 4px; + + background-color: var(--color1); + color: var(--color2); + } + .el-name { grid-area: name; color: #333; font-weight: bold; - text-align: center; - font-size: 1.5em; + font-size: 1.75em; margin-top: 8px; margin-bottom: 0px; } .el-functions { grid-area: functions; - width: calc(100% - 32px); + justify-self: end; + align-self: end; + margin-bottom: 6px; } .el-node-content { @@ -405,6 +406,7 @@ n2-nodeui { justify-self: center; word-wrap: break-word; font-family: monospace; + font-size: 1em; color: #333; width: 100%; @@ -418,12 +420,9 @@ n2-nodeui { border-left: none; border-right: none; border-top: 1px solid #e0e0e0; - border-bottom: 1px solid #e0e0e0; + border-bottom: none; + margin-top: 8px; margin-bottom: 32px; - - &:invalid { - padding-top: 16px; - } } .el-node-markdown { @@ -431,11 +430,10 @@ n2-nodeui { display: none; border-top: 1px solid #e0e0e0; - border-bottom: 1px solid #e0e0e0; + margin-top: 8px; margin-bottom: 32px; overflow-wrap: anywhere; - width: calc(100% - 32px); } &.show-markdown { diff --git a/static/images/icon_home.svg b/static/images/icon_home.svg new file mode 100644 index 0000000..3bf96d5 --- /dev/null +++ b/static/images/icon_home.svg @@ -0,0 +1,71 @@ + + + + + + + + + + home-outline + + + + diff --git a/static/js/app.mjs b/static/js/app.mjs index 8ff6229..4978b98 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -237,7 +237,7 @@ class N2Crumbs extends CustomHTMLElement { ) ) - const start = new N2Crumb('Start', ROOT_NODE) + const start = new N2Crumb('', ROOT_NODE) crumbs.push(start) this.replaceChildren(...crumbs.reverse()) @@ -255,8 +255,18 @@ class N2Crumb extends CustomHTMLElement { }// }}} constructor(label, uuid) {// {{{ super() - this.classList.add('crumb') + // The house makes it a bit more graphical than just a bunch of text. + if (uuid === ROOT_NODE) { + const start = document.createElement('div') + start.innerHTML = `` + start.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: ROOT_NODE, dontPush: false, dontExpand: true })) + this.classList.add('home') + this.replaceChildren(start) + return + } + + this.classList.add('crumb') this.label = label this.uuid = uuid diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs index 341f155..81d7c33 100644 --- a/static/js/page_node.mjs +++ b/static/js/page_node.mjs @@ -48,14 +48,14 @@ export class N2PageNodeUI extends CustomHTMLElement { }) _mbus.subscribe('NODE_MODIFIED', () => { - document.querySelector('#crumbs .crumbs')?.classList.add('node-modified') + this.classList.add('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save.svg` this.elIconSave.classList.add('colorize') this.renderName() }) _mbus.subscribe('NODE_UNMODIFIED', () => { - document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified') + this.classList.remove('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg` this.elIconSave.classList.remove('colorize') }) diff --git a/static/service_worker.js b/static/service_worker.js index 55a5f09..b6a1a13 100644 --- a/static/service_worker.js +++ b/static/service_worker.js @@ -11,6 +11,7 @@ const CACHED_ASSETS = [ '/images/{{ .VERSION }}/collapsed.svg', '/images/{{ .VERSION }}/expanded.svg', '/images/{{ .VERSION }}/icon_history.svg', + '/images/{{ .VERSION }}/icon_home.svg', '/images/{{ .VERSION }}/icon_markdown_hollow.svg', '/images/{{ .VERSION }}/icon_markdown.svg', '/images/{{ .VERSION }}/icon_refresh.svg',