diff --git a/main.go b/main.go index d47f7b1..1d0f35f 100644 --- a/main.go +++ b/main.go @@ -20,7 +20,7 @@ import ( _ "embed" ) -const VERSION = "v8"; +const VERSION = "v6"; const LISTEN_HOST = "0.0.0.0"; const DB_SCHEMA = 10 diff --git a/static/css/login.css b/static/css/login.css index cbe85cb..50a59ac 100644 --- a/static/css/login.css +++ b/static/css/login.css @@ -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 { - 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; justify-items: center; - padding: 32px; + height: 100%; } -#login .fields input { +#login input { + max-width: 300px; margin-bottom: 32px; - border: 0px; - border: 1px solid #444; - padding: 8px; width: 100%; - font-size: 1.25em; + border: 0px; + border-bottom: 1px solid #444; + font-size: 18pt; background-color: #fff; } -#login .fields input:focus { +#login input:focus { outline: none; } -#login .fields button { +#login button { + max-width: 300px; border: 1px solid #666; background: #fff; color: #444; - padding: 12px 24px; - font-size: 1.25em; + padding: 16px 32px; + font-size: 1em; align-self: center; } -#login .fields button:hover { +#login button:hover { background: #ddd; } -#login .fields .auth-failed { +#login .auth-failed { margin-top: 32px; color: #a00; background: #fff; diff --git a/static/css/main.css b/static/css/main.css index 56ee6a9..2ce59f2 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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 { box-sizing: border-box; } @@ -141,6 +134,11 @@ header { align-items: center; padding: 8px 0px; 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); color: #fff; } @@ -514,13 +512,7 @@ header .menu { .layout-keys #keys { display: block; } -#app.login { - padding-top: 64px; - display: grid; - grid-template-columns: minmax(min-content, 300px); - justify-content: center; -} -#app.node { +#app { display: grid; grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank"; grid-template-columns: min-content 1fr; @@ -529,26 +521,26 @@ header .menu { color: #fff; height: 100%; } -#app.node.toggle-tree { +#app.toggle-tree { grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank"; 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; /* blank */ } -#app.node.toggle-tree #tree { +#app.toggle-tree #tree { display: none; } @media only screen and (max-width: 932px) { - #app.node { + #app { grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank"; 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; /* blank */ } - #app.node #tree { + #app #tree { display: none; } - #app.node.toggle-tree { + #app.toggle-tree { display: grid; grid-template-areas: "header" "tree"; grid-template-columns: 1fr; @@ -557,22 +549,22 @@ header .menu { color: #fff; height: 100%; } - #app.node.toggle-tree #crumbs { + #app.toggle-tree #crumbs { display: none; } - #app.node.toggle-tree .child-nodes { + #app.toggle-tree .child-nodes { display: none; } - #app.node.toggle-tree .node-name { + #app.toggle-tree .node-name { display: none; } - #app.node.toggle-tree .grow-wrap { + #app.toggle-tree .grow-wrap { display: none; } - #app.node.toggle-tree #file-section { + #app.toggle-tree #file-section { display: none; } - #app.node.toggle-tree #tree { + #app.toggle-tree #tree { display: block; } .node-content { diff --git a/static/css/theme.css b/static/css/theme.css index 39ea0b1..e69de29 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -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); -*/ diff --git a/static/js/app.mjs b/static/js/app.mjs index 5e8cec3..02cb7a7 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -28,20 +28,14 @@ class App extends Component { this.setStartNode() }//}}} render() {//{{{ - let app_el = document.getElementById('app') - if(!this.session.initialized) { return html`
Validating session
` } - + if(!this.session.authenticated()) { - app_el.classList.remove('node') - app_el.classList.add('login') return html`<${Login} ref=${this.login} />` } - app_el.classList.remove('login') - app_el.classList.add('node') return html` <${Tree} app=${this} ref=${this.tree} /> <${NodeUI} app=${this} ref=${this.nodeUI} /> @@ -168,16 +162,11 @@ class Login extends Component { return html`
-
-

Notes

-
- -
- this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} /> - this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} /> - - ${authentication_failed} -
+

Notes

+ this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} /> + this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} /> + + ${authentication_failed}
` }//}}} diff --git a/static/js/node.mjs b/static/js/node.mjs index 1c49791..22df9e7 100644 --- a/static/js/node.mjs +++ b/static/js/node.mjs @@ -28,7 +28,6 @@ export class NodeUI extends Component { return let node = this.node.value - document.title = `N: ${node.Name}` let crumbs = [ html`
this.goToNode(0)}>Start
` diff --git a/static/less/login.less b/static/less/login.less index 2670a2c..6fe0c0e 100644 --- a/static/less/login.less +++ b/static/less/login.less @@ -1,61 +1,44 @@ @import "theme.less"; #login { + display: grid; + justify-items: center; height: 100%; - background: #eee; - .header { - background: @theme_gradient; + input { + max-width: 300px; + margin-bottom: 32px; 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; - text-align: center; - color: #fff; - - h1 { - margin-bottom: 0px; - } + border-radius: 8px; } - - .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; - } - } - } diff --git a/static/less/main.less b/static/less/main.less index 350fecd..5dbe7ce 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -156,9 +156,15 @@ header { grid-area: header; grid-template-columns: min-content 1fr repeat(3, min-content); align-items: center; + //background: @accent_1; padding: 8px 0px; 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; &.modified { @@ -600,15 +606,7 @@ header { #keys { display: block } } -#app.login { - padding-top: 64px; - - display: grid; - grid-template-columns: minmax(min-content, 300px); - justify-content: center; -} - -#app.node { +#app { .layout-tree(); &.toggle-tree { @@ -618,7 +616,7 @@ header { } @media only screen and (max-width: 932px) { - #app.node { + #app { .layout-crumbs(); &.toggle-tree { diff --git a/static/less/theme.less b/static/less/theme.less index e6932f9..6239d85 100644 --- a/static/less/theme.less +++ b/static/less/theme.less @@ -3,12 +3,3 @@ @accent_1: #abc837; @accent_2: #ecbf00; @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);