Compare commits

..

No commits in common. "b7c5a91c064fcf1234d4f28d9e62a117f3d74fe1" and "53f4fc363ab3bf376e2ca7ef5852c99fc419b349" have entirely different histories.

9 changed files with 81 additions and 156 deletions

View File

@ -20,7 +20,7 @@ import (
_ "embed" _ "embed"
) )
const VERSION = "v8"; const VERSION = "v6";
const LISTEN_HOST = "0.0.0.0"; const LISTEN_HOST = "0.0.0.0";
const DB_SCHEMA = 10 const DB_SCHEMA = 10

View File

@ -1,53 +1,33 @@
/*
@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
@theme_gradient: linear-gradient(to right, #659999, #f4791f);
*/
#login { #login {
height: 100%;
background: #eee;
}
#login .header {
background: linear-gradient(to right, #3e5151, #decba4);
width: 100%;
padding: 16px;
text-align: center;
color: #fff;
}
#login .header h1 {
margin-bottom: 0px;
}
#login .fields {
display: grid; display: grid;
justify-items: center; justify-items: center;
padding: 32px; height: 100%;
} }
#login .fields input { #login input {
max-width: 300px;
margin-bottom: 32px; margin-bottom: 32px;
border: 0px;
border: 1px solid #444;
padding: 8px;
width: 100%; width: 100%;
font-size: 1.25em; border: 0px;
border-bottom: 1px solid #444;
font-size: 18pt;
background-color: #fff; background-color: #fff;
} }
#login .fields input:focus { #login input:focus {
outline: none; outline: none;
} }
#login .fields button { #login button {
max-width: 300px;
border: 1px solid #666; border: 1px solid #666;
background: #fff; background: #fff;
color: #444; color: #444;
padding: 12px 24px; padding: 16px 32px;
font-size: 1.25em; font-size: 1em;
align-self: center; align-self: center;
} }
#login .fields button:hover { #login button:hover {
background: #ddd; background: #ddd;
} }
#login .fields .auth-failed { #login .auth-failed {
margin-top: 32px; margin-top: 32px;
color: #a00; color: #a00;
background: #fff; background: #fff;

View File

@ -1,10 +1,3 @@
/*
@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
@theme_gradient: linear-gradient(to right, #659999, #f4791f);
*/
html { html {
box-sizing: border-box; box-sizing: border-box;
} }
@ -141,6 +134,11 @@ header {
align-items: center; align-items: center;
padding: 8px 0px; padding: 8px 0px;
color: #333c11; color: #333c11;
background: linear-gradient(to right, #009fff, #ec2f4b);
background: linear-gradient(to right, #f5af19, #f12711);
background: linear-gradient(to right, #fdc830, #f37335);
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
background: linear-gradient(to right, #659999, #f4791f);
background: linear-gradient(to right, #3e5151, #decba4); background: linear-gradient(to right, #3e5151, #decba4);
color: #fff; color: #fff;
} }
@ -514,13 +512,7 @@ header .menu {
.layout-keys #keys { .layout-keys #keys {
display: block; display: block;
} }
#app.login { #app {
padding-top: 64px;
display: grid;
grid-template-columns: minmax(min-content, 300px);
justify-content: center;
}
#app.node {
display: grid; display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank"; grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
@ -529,26 +521,26 @@ header .menu {
color: #fff; color: #fff;
height: 100%; height: 100%;
} }
#app.node.toggle-tree { #app.toggle-tree {
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank"; grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr; grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */ /* blank */
} }
#app.node.toggle-tree #tree { #app.toggle-tree #tree {
display: none; display: none;
} }
@media only screen and (max-width: 932px) { @media only screen and (max-width: 932px) {
#app.node { #app {
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank"; grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr; grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */ /* blank */
} }
#app.node #tree { #app #tree {
display: none; display: none;
} }
#app.node.toggle-tree { #app.toggle-tree {
display: grid; display: grid;
grid-template-areas: "header" "tree"; grid-template-areas: "header" "tree";
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -557,22 +549,22 @@ header .menu {
color: #fff; color: #fff;
height: 100%; height: 100%;
} }
#app.node.toggle-tree #crumbs { #app.toggle-tree #crumbs {
display: none; display: none;
} }
#app.node.toggle-tree .child-nodes { #app.toggle-tree .child-nodes {
display: none; display: none;
} }
#app.node.toggle-tree .node-name { #app.toggle-tree .node-name {
display: none; display: none;
} }
#app.node.toggle-tree .grow-wrap { #app.toggle-tree .grow-wrap {
display: none; display: none;
} }
#app.node.toggle-tree #file-section { #app.toggle-tree #file-section {
display: none; display: none;
} }
#app.node.toggle-tree #tree { #app.toggle-tree #tree {
display: block; display: block;
} }
.node-content { .node-content {

View File

@ -1,7 +0,0 @@
/*
@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
@theme_gradient: linear-gradient(to right, #659999, #f4791f);
*/

View File

@ -28,20 +28,14 @@ class App extends Component {
this.setStartNode() this.setStartNode()
}//}}} }//}}}
render() {//{{{ render() {//{{{
let app_el = document.getElementById('app')
if(!this.session.initialized) { if(!this.session.initialized) {
return html`<div>Validating session</div>` return html`<div>Validating session</div>`
} }
if(!this.session.authenticated()) { if(!this.session.authenticated()) {
app_el.classList.remove('node')
app_el.classList.add('login')
return html`<${Login} ref=${this.login} />` return html`<${Login} ref=${this.login} />`
} }
app_el.classList.remove('login')
app_el.classList.add('node')
return html` return html`
<${Tree} app=${this} ref=${this.tree} /> <${Tree} app=${this} ref=${this.tree} />
<${NodeUI} app=${this} ref=${this.nodeUI} /> <${NodeUI} app=${this} ref=${this.nodeUI} />
@ -168,16 +162,11 @@ class Login extends Component {
return html` return html`
<div id="login"> <div id="login">
<div class="header"> <h1>Notes</h1>
<h1>Notes</h1> <input id="username" type="text" placeholder="Username" value=${username} oninput=${evt=>this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
</div> <input id="password" type="password" placeholder="Password" value=${password} oninput=${evt=>this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
<button onclick=${()=>this.login()}>Login</button>
<div class="fields"> ${authentication_failed}
<input id="username" type="text" placeholder="Username" value=${username} oninput=${evt=>this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
<input id="password" type="password" placeholder="Password" value=${password} oninput=${evt=>this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
<button onclick=${()=>this.login()}>Login</button>
${authentication_failed}
</div>
</div> </div>
` `
}//}}} }//}}}

View File

@ -28,7 +28,6 @@ export class NodeUI extends Component {
return return
let node = this.node.value let node = this.node.value
document.title = `N: ${node.Name}`
let crumbs = [ let crumbs = [
html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>` html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`

View File

@ -1,61 +1,44 @@
@import "theme.less"; @import "theme.less";
#login { #login {
display: grid;
justify-items: center;
height: 100%; height: 100%;
background: #eee;
.header { input {
background: @theme_gradient; max-width: 300px;
margin-bottom: 32px;
width: 100%; width: 100%;
border: 0px;
border-bottom: 1px solid #444;
font-size: 18pt;
background-color: @background;
&:focus {
outline: none;
}
}
button {
max-width: 300px;
border: 1px solid #666;
background: @background;
color: #444;
padding: 16px 32px;
font-size: 1em;
align-self: center;
&:hover {
background: #ddd;
}
}
.auth-failed {
margin-top: 32px;
color: #a00;
background: #fff;
padding: 16px; padding: 16px;
text-align: center; border-radius: 8px;
color: #fff;
h1 {
margin-bottom: 0px;
}
} }
.fields {
display: grid;
justify-items: center;
padding: 32px;
input {
margin-bottom: 32px;
border: 0px;
border: 1px solid #444;
padding: 8px;
width: 100%;
font-size: 1.25em;
background-color: @background;
&:focus {
outline: none;
}
}
button {
border: 1px solid #666;
background: @background;
color: #444;
padding: 12px 24px;
font-size: 1.25em;
align-self: center;
&:hover {
background: #ddd;
}
}
.auth-failed {
margin-top: 32px;
color: #a00;
background: #fff;
padding: 16px;
border-radius: 8px;
}
}
} }

View File

@ -156,9 +156,15 @@ header {
grid-area: header; grid-area: header;
grid-template-columns: min-content 1fr repeat(3, min-content); grid-template-columns: min-content 1fr repeat(3, min-content);
align-items: center; align-items: center;
//background: @accent_1;
padding: 8px 0px; padding: 8px 0px;
color: darken(@accent_1, 35%); color: darken(@accent_1, 35%);
background: @theme_gradient; background: linear-gradient(to right, #009fff, #ec2f4b);
background: linear-gradient(to right, #f5af19, #f12711);
background: linear-gradient(to right, #fdc830, #f37335);
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
background: linear-gradient(to right, #659999, #f4791f);
background: linear-gradient(to right, #3e5151, #decba4);
color: #fff; color: #fff;
&.modified { &.modified {
@ -600,15 +606,7 @@ header {
#keys { display: block } #keys { display: block }
} }
#app.login { #app {
padding-top: 64px;
display: grid;
grid-template-columns: minmax(min-content, 300px);
justify-content: center;
}
#app.node {
.layout-tree(); .layout-tree();
&.toggle-tree { &.toggle-tree {
@ -618,7 +616,7 @@ header {
} }
@media only screen and (max-width: 932px) { @media only screen and (max-width: 932px) {
#app.node { #app {
.layout-crumbs(); .layout-crumbs();
&.toggle-tree { &.toggle-tree {

View File

@ -3,12 +3,3 @@
@accent_1: #abc837; @accent_1: #abc837;
@accent_2: #ecbf00; @accent_2: #ecbf00;
@accent_3: #c84a37; @accent_3: #c84a37;
/*
@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
@theme_gradient: linear-gradient(to right, #659999, #f4791f);
*/
@theme_gradient: linear-gradient(to right, #3e5151, #decba4);