Fixed login screen.
This commit is contained in:
Magnus Åhall
parent
2cd17871b5
commit
cc9c1ca82e
@ -1,33 +1,53 @@
|
||||
/*
|
||||
@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;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
}
|
||||
#login input {
|
||||
max-width: 300px;
|
||||
#login .fields input {
|
||||
margin-bottom: 32px;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #444;
|
||||
font-size: 18pt;
|
||||
border: 1px solid #444;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
font-size: 1.25em;
|
||||
background-color: #fff;
|
||||
}
|
||||
#login input:focus {
|
||||
#login .fields input:focus {
|
||||
outline: none;
|
||||
}
|
||||
#login button {
|
||||
max-width: 300px;
|
||||
#login .fields button {
|
||||
border: 1px solid #666;
|
||||
background: #fff;
|
||||
color: #444;
|
||||
padding: 16px 32px;
|
||||
font-size: 1em;
|
||||
padding: 12px 24px;
|
||||
font-size: 1.25em;
|
||||
align-self: center;
|
||||
}
|
||||
#login button:hover {
|
||||
#login .fields button:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
#login .auth-failed {
|
||||
#login .fields .auth-failed {
|
||||
margin-top: 32px;
|
||||
color: #a00;
|
||||
background: #fff;
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
/*
|
||||
@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;
|
||||
}
|
||||
@ -134,11 +141,6 @@ 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;
|
||||
}
|
||||
@ -512,7 +514,13 @@ header .menu {
|
||||
.layout-keys #keys {
|
||||
display: block;
|
||||
}
|
||||
#app {
|
||||
#app.login {
|
||||
padding-top: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(min-content, 300px);
|
||||
justify-content: center;
|
||||
}
|
||||
#app.node {
|
||||
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;
|
||||
@ -521,26 +529,26 @@ header .menu {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
#app.toggle-tree {
|
||||
#app.node.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.toggle-tree #tree {
|
||||
#app.node.toggle-tree #tree {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app {
|
||||
#app.node {
|
||||
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 #tree {
|
||||
#app.node #tree {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree {
|
||||
#app.node.toggle-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "tree";
|
||||
grid-template-columns: 1fr;
|
||||
@ -549,22 +557,22 @@ header .menu {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
#app.toggle-tree #crumbs {
|
||||
#app.node.toggle-tree #crumbs {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree .child-nodes {
|
||||
#app.node.toggle-tree .child-nodes {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree .node-name {
|
||||
#app.node.toggle-tree .node-name {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree .grow-wrap {
|
||||
#app.node.toggle-tree .grow-wrap {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree #file-section {
|
||||
#app.node.toggle-tree #file-section {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree #tree {
|
||||
#app.node.toggle-tree #tree {
|
||||
display: block;
|
||||
}
|
||||
.node-content {
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
/*
|
||||
@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);
|
||||
*/
|
||||
@ -28,14 +28,20 @@ class App extends Component {
|
||||
this.setStartNode()
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
let app_el = document.getElementById('app')
|
||||
|
||||
if(!this.session.initialized) {
|
||||
return html`<div>Validating session</div>`
|
||||
}
|
||||
|
||||
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} />
|
||||
@ -162,12 +168,17 @@ class Login extends Component {
|
||||
|
||||
return html`
|
||||
<div id="login">
|
||||
<div class="header">
|
||||
<h1>Notes</h1>
|
||||
</div>
|
||||
|
||||
<div class="fields">
|
||||
<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>
|
||||
`
|
||||
}//}}}
|
||||
componentDidMount() {//{{{
|
||||
|
||||
@ -1,18 +1,34 @@
|
||||
@import "theme.less";
|
||||
|
||||
#login {
|
||||
height: 100%;
|
||||
background: #eee;
|
||||
|
||||
.header {
|
||||
background: @theme_gradient;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
|
||||
input {
|
||||
max-width: 300px;
|
||||
margin-bottom: 32px;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #444;
|
||||
border: 1px solid #444;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
|
||||
font-size: 18pt;
|
||||
font-size: 1.25em;
|
||||
background-color: @background;
|
||||
|
||||
&:focus {
|
||||
@ -21,12 +37,11 @@
|
||||
}
|
||||
|
||||
button {
|
||||
max-width: 300px;
|
||||
border: 1px solid #666;
|
||||
background: @background;
|
||||
color: #444;
|
||||
padding: 16px 32px;
|
||||
font-size: 1em;
|
||||
padding: 12px 24px;
|
||||
font-size: 1.25em;
|
||||
align-self: center;
|
||||
|
||||
&:hover {
|
||||
@ -42,3 +57,5 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -156,15 +156,9 @@ 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: 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: @theme_gradient;
|
||||
color: #fff;
|
||||
|
||||
&.modified {
|
||||
@ -606,7 +600,15 @@ header {
|
||||
#keys { display: block }
|
||||
}
|
||||
|
||||
#app {
|
||||
#app.login {
|
||||
padding-top: 64px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: minmax(min-content, 300px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#app.node {
|
||||
.layout-tree();
|
||||
|
||||
&.toggle-tree {
|
||||
@ -616,7 +618,7 @@ header {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app {
|
||||
#app.node {
|
||||
.layout-crumbs();
|
||||
|
||||
&.toggle-tree {
|
||||
|
||||
@ -3,3 +3,12 @@
|
||||
@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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user