From dc0a0378946ff2035d9ec44da768f4e89731a419 Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Tue, 1 Aug 2017 17:11:03 +0200 Subject: [PATCH] turn login and register into infopages --- customize.dist/pages.js | 65 ++++++++++--------- .../src/less2/include/infopages.less | 34 +++++++++- .../src/less2/pages/page-login.less | 17 +++++ .../src/less2/pages/page-register.less | 18 ++++- 4 files changed, 99 insertions(+), 35 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 24ce4447e..f28f790ae 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -419,12 +419,12 @@ define([ return [h('div#cp-main.cp-page-register', [ infopageTopbar(), h('div.container.cp-container', [ - h('div#data.hidden', [ + h('div.row.align-items-center', [ + h('div#data.hidden.col-md-6', [ h('h1', Msg.register_header), - h('br'), - setHTML(h('p.left.register-explanation'), Msg.register_explanation) + setHTML(h('p.register-explanation'), Msg.register_explanation) ]), - h('div#userForm.form-group.hidden', [ + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#username', { type: 'text', autocomplete: 'off', @@ -442,34 +442,38 @@ define([ type: 'password', placeholder: Msg.login_confirm, }), - h('input#import-recent', { - type: 'checkbox', - checked: true - }), - h('label', { - 'for': 'import-recent', - }, Msg.register_importRecent), - h('br'), - h('input#accept-terms', { - type: 'checkbox' - }), - setHTML(h('label', { - 'for': 'accept-terms', - }), Msg.register_acceptTerms), - h('br'), + h('div.checkbox-container', [ + h('input#import-recent', { + type: 'checkbox', + checked: true + }), + h('label', { + 'for': 'import-recent', + }, Msg.register_importRecent), + ]), + h('div.checkbox-container', [ + h('input#accept-terms', { + type: 'checkbox' + }), + setHTML(h('label', { + 'for': 'accept-terms', + }), Msg.register_acceptTerms), + ]), h('button#register.btn.btn-primary', Msg.login_register) ]) - ]) + ]), + ]), + infopageFooter(), ])]; }; Pages['/login/'] = Pages['/login/index.html'] = function () { - return [h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', - h('div#main-container', [ - h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)), - h('div#userForm.form-group.hidden', [ + return [h('div#cp-main.cp-page-login', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row.align-items-center', [ + h('div#data.hidden.col-md-6', setHTML(h('p.left'), Msg.main_info)), + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#name', { name: 'name', type: 'text', @@ -485,14 +489,15 @@ define([ 'name': 'password', placeholder: Msg.login_password, }), - h('button.btn.btn-primary.login.first', Msg.login_login), h('div.extra', [ - h('p', Msg.login_notRegistered), + h('button.btn.btn-primary.login.first', Msg.login_login), + h('span', Msg.login_notRegistered), h('button#register.btn.btn-success.register', Msg.login_register) ]) ]) - ]) - ) + ]), + ]), + infopageFooter(), ])]; }; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index c5d09dabe..25db9d031 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,10 +1,10 @@ @import (once) "./colortheme.less"; @infopages_infobar-height: 64px; +@infopages_padding: 32px; // Basic setup for info pages, this should be used at the global level .infopages_main () { - min-height: 100vh; background-color: @colortheme_info-background; a { @@ -27,7 +27,35 @@ font-family: 'Open Sans', 'Helvetica Neue', sans-serif; .cp-container { - padding-top: @infopages_infobar-height; + margin-top: @infopages_infobar-height; + padding-top: @infopages_padding; + padding-bottom: @infopages_padding; + min-height: 75vh; + h1 { + font-size: 3em; + margin-bottom: 0.5em; + } + .form-group { + & > * { + margin-top: 0.5em; + } + + display: flex; + flex-direction: column; + align-items: center; + + .checkbox-container { + width: 100%; + display: flex; + align-items: center; + label { + margin: 0; + } + input { + margin-right: 0.5em; + } + } + } } }; @@ -75,4 +103,4 @@ .infopages_link() } } -} \ No newline at end of file +} diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index e69de29bb..6909ecdc7 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -0,0 +1,17 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.form-group { + .extra { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + .login { + } + } +} diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 8baec5d1e..e057e2b20 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -4,6 +4,20 @@ .infopages_main(); .infopages_topbar(); -#cp-main.cp-page-register { - +.cp-container { + .form-group { + .checkbox-container { + &:nth-of-type(1) { + margin-top: 2em; + } + &:last-of-type { + margin-bottom: 1em; + } + } + #register { + margin-top: 16px; + font-size: 1.25em; + width: 30%; + } + } }