Compare commits
No commits in common. "3bd0819cbce41178f9c0d59a46044061ebe67b0f" and "3c6648f22772141cd5dd32761f3f65875308ed00" have entirely different histories.
3bd0819cbc
...
3c6648f227
5 changed files with 25 additions and 157 deletions
|
|
@ -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"
|
||||
"show-tree tree hum name name ding"
|
||||
"show-tree tree hum sync functions ding"
|
||||
"show-tree tree hum content content ding"
|
||||
"show-tree tree hum blank blank ding"
|
||||
"tree hum crumbs crumbs ding"
|
||||
"tree hum name name ding"
|
||||
"tree hum sync functions ding"
|
||||
"tree hum content content ding"
|
||||
"tree hum blank blank ding"
|
||||
;
|
||||
|
||||
grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
|
||||
grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr);
|
||||
grid-template-rows:
|
||||
min-content min-content 48px 1fr;
|
||||
|
||||
&.hide-tree {
|
||||
--show-tree: 32px;
|
||||
#tree {
|
||||
border-right: none;
|
||||
}
|
||||
n2-tree {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#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 {
|
||||
@media only screen and (max-width: 600px) {
|
||||
grid-template-areas:
|
||||
"show-tree hum crumbs ding"
|
||||
"show-tree hum name ding"
|
||||
"show-tree hum functions ding"
|
||||
"show-tree hum content ding"
|
||||
"show-tree hum blank ding"
|
||||
"show-tree hum sync ding"
|
||||
"crumbs"
|
||||
"sync"
|
||||
"name"
|
||||
"content"
|
||||
"blank"
|
||||
;
|
||||
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;
|
||||
}
|
||||
}
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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)
|
||||
}// }}}
|
||||
|
|
|
|||
|
|
@ -6,23 +6,13 @@ export class N2Tree extends CustomHTMLElement {
|
|||
static {// {{{
|
||||
this.tmpl = document.createElement('template')
|
||||
this.tmpl.innerHTML = `
|
||||
<style>
|
||||
n2-tree {
|
||||
.el-hide-tree {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="logo">
|
||||
<div data-el="logo" id="logo">
|
||||
<img src="/images/${_VERSION}/logo_small.svg" />
|
||||
<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
|
||||
<div data-el="hide-tree"><</div>
|
||||
<img src="/images/${_VERSION}/logo.svg" />
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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()">></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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue