From af309eddd421b8f57319e498fa4994a2e3cb0a0e Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Fri, 3 Feb 2017 18:44:18 -0200 Subject: [#922] Adds text field and button to page with @tayanefernandes --- web-ui/app/account_recovery.html | 1 + web-ui/app/js/account_recovery/page.js | 15 ++++- web-ui/app/scss/account_recovery/page.scss | 90 +++++++++++++++++++++++++++--- web-ui/app/scss/base/_colors.scss | 1 + 4 files changed, 96 insertions(+), 11 deletions(-) (limited to 'web-ui/app') diff --git a/web-ui/app/account_recovery.html b/web-ui/app/account_recovery.html index 407f5907..d2021f65 100644 --- a/web-ui/app/account_recovery.html +++ b/web-ui/app/account_recovery.html @@ -1,6 +1,7 @@ + Pixelated Account Recovery diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index a6be0c6e..447331bc 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -3,9 +3,18 @@ import React from 'react' import 'scss/account_recovery/page.scss' const Page = () => ( -
- -

E se você esquecer sua senha?

+
+
+ +

E se você esquecer sua senha?

+

Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.

+

Instruções serão enviadas para esse e-mail, guarde com carinho.

+
+ + +
+ +
); diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss index b6a4c024..040539f4 100644 --- a/web-ui/app/scss/account_recovery/page.scss +++ b/web-ui/app/scss/account_recovery/page.scss @@ -1,7 +1,10 @@ @import "../vendor/reset"; @import "../base/colors"; @import "../base/fonts"; -@import "../base/scaffolding"; + +html { + min-height: 100%; +} body { font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; @@ -10,22 +13,93 @@ body { background: -o-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, $dark_blue, $middle_blue); /* Standard syntax */ + color: $dark_grey_text; + min-height: 100%; } h1 { - font-size: 4em; - color: $dark_slate_gray; + font-size: 1.3em; + font-weight: 600; + width: 100%; +} + +p { + -webkit-margin-before: 0.5em; + -webkit-margin-after: 0.5em; + margin-before: 0.5em; + margin-after: 0.5em; +} + +.field-group { + position:relative; + margin: 1em 0; + width: 96%; +} + +label { + font-size: 0.9em; + margin-bottom: 10px; + display: inline-block; +} + +input { + display: block; + border: none; + border-bottom: solid 1px #4da3b6; + width: 100%; + height: auto; + padding: 6px 0px; +} + +input:focus { + outline:none; +} + +input:focus ~ .animated-label, input:valid ~ .animated-label { + top:-12px; + left: 0; + font-size:0.7em; + color:#4da3b6; +} + +.animated-label { + color:#999; + position:absolute; + pointer-events:none; + left: 6px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} + +button { + background: $dark_blue; + padding: 0.8em; + color: $white; + text-align: center; + border: none; + border-radius: 2px; + font-weight: 300; + width: 96%; } .container { background: $white; - width: 90%; - margin: 2% auto; - padding: 3%; + width: 84%; + margin: 3% auto; + padding: 6% 5%; +} + +form { + -webkit-display: flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-direction: column; + flex-direction: column; img { - display: block; width: 50%; - margin: 0 auto; } } diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss index f3c245a9..e79781cf 100644 --- a/web-ui/app/scss/base/_colors.scss +++ b/web-ui/app/scss/base/_colors.scss @@ -38,6 +38,7 @@ $black: #000; $top_pane: $contrast; $total_count_bg: #C0B9B9; $background_dropdown_grey: #f0f0f0; +$dark_grey_text: #4a4a4a; $background_light_grey: #F5F5F5; $border_light_grey: #D9D9D9; -- cgit v1.2.3 From 91bc3bbf22f81f6da767e35430eaeb8127089f5b Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Mon, 6 Feb 2017 14:22:05 -0200 Subject: [#922] Add accessibility warning in dev env with @anikarni --- web-ui/app/js/account_recovery.js | 3 +++ web-ui/app/js/account_recovery/page.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'web-ui/app') diff --git a/web-ui/app/js/account_recovery.js b/web-ui/app/js/account_recovery.js index 02183574..a48415f8 100644 --- a/web-ui/app/js/account_recovery.js +++ b/web-ui/app/js/account_recovery.js @@ -1,6 +1,9 @@ import React from 'react' import { render } from 'react-dom' import Page from 'js/account_recovery/page' +import a11y from 'react-a11y' + +if(process.env.NODE_ENV === 'development') a11y(React); render( , diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index 447331bc..55df9ee7 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -5,7 +5,7 @@ import 'scss/account_recovery/page.scss' const Page = () => (
- + Esqueci minha senha!

E se você esquecer sua senha?

Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.

Instruções serão enviadas para esse e-mail, guarde com carinho.

-- cgit v1.2.3 From eab587344a275d7d4afb05b8682e4ff76df5da61 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Mon, 6 Feb 2017 17:57:49 -0200 Subject: [#922] Make backup page responsive for big devices with @anikarni --- web-ui/app/js/account_recovery/page.js | 4 +- web-ui/app/scss/account_recovery/page.scss | 131 ++++++++++++++++++++--------- 2 files changed, 92 insertions(+), 43 deletions(-) (limited to 'web-ui/app') diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index 55df9ee7..4dda8fff 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -4,11 +4,11 @@ import 'scss/account_recovery/page.scss' const Page = () => (
+ Esqueci minha senha! - Esqueci minha senha!

E se você esquecer sua senha?

Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.

-

Instruções serão enviadas para esse e-mail, guarde com carinho.

+

Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.

diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss index 040539f4..9fe85d5c 100644 --- a/web-ui/app/scss/account_recovery/page.scss +++ b/web-ui/app/scss/account_recovery/page.scss @@ -20,7 +20,6 @@ body { h1 { font-size: 1.3em; font-weight: 600; - width: 100%; } p { @@ -32,47 +31,49 @@ p { .field-group { position:relative; - margin: 1em 0; - width: 96%; -} + margin: 1.5em 0; + width: 100%; -label { - font-size: 0.9em; - margin-bottom: 10px; - display: inline-block; -} + label { + font-size: 0.9em; + margin-bottom: 10px; + display: inline-block; + } -input { - display: block; - border: none; - border-bottom: solid 1px #4da3b6; - width: 100%; - height: auto; - padding: 6px 0px; -} + input { + display: block; + border: none; + border-bottom: solid 1px #4da3b6; + width: 100%; + height: auto; + padding: 0.3em 0px; + } -input:focus { - outline:none; -} + input:focus { + outline:none; + border-width: 2px; + } -input:focus ~ .animated-label, input:valid ~ .animated-label { - top:-12px; - left: 0; - font-size:0.7em; - color:#4da3b6; -} + input:focus ~ .animated-label, input:valid ~ .animated-label { + top:-12px; + left: 0; + font-size:0.7em; + color:#4da3b6; + } -.animated-label { - color:#999; - position:absolute; - pointer-events:none; - left: 6px; - top:10px; - transition:0.2s ease all; - -moz-transition:0.2s ease all; - -webkit-transition:0.2s ease all; + .animated-label { + color:#999; + position:absolute; + pointer-events:none; + left: 6px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; + } } + button { background: $dark_blue; padding: 0.8em; @@ -81,7 +82,7 @@ button { border: none; border-radius: 2px; font-weight: 300; - width: 96%; + width: 100%; } .container { @@ -89,17 +90,65 @@ button { width: 84%; margin: 3% auto; padding: 6% 5%; -} -form { -webkit-display: flex; display: flex; - -webkit-align-items: center; - align-items: center; + -webkit-align-items: flex-start; + align-items: flex-start; -webkit-flex-direction: column; flex-direction: column; +} + +img { + width: 50%; + -webkit-align-self: center; + align-self: center; +} + +@media only screen and (min-width : 500px) { + body { + font-size: 1.3em; + } + + .field-group, button { + width: 70%; + -webkit-align-self: center; + align-self: center; + } +} + +@media only screen and (min-width : 960px) { + .container{ + width: 60%; + padding: 3%; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-flex-direction: row; + flex-direction: row; + max-width: 700px; + } + + form { + margin-left: 2.5em; + } img { - width: 50%; + width: 300px; + } + + .field-group, button { + width: 300px; + -webkit-align-self: center; + align-self: center; + } + + .field-group { + margin-top: 3em; + font-size: 1em; + } + + button { + font-size: 0.8em; + margin-bottom: 1em; } } -- cgit v1.2.3 From b2b05f3868055578b8d0cafb7d08dd7742bd4bed Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Mon, 6 Feb 2017 19:01:09 -0200 Subject: [#922] Add back link with @anikarni --- web-ui/app/js/account_recovery.js | 2 ++ web-ui/app/js/account_recovery/page.js | 6 ++++ web-ui/app/scss/account_recovery/page.scss | 52 +++++++++++++++++++++--------- 3 files changed, 45 insertions(+), 15 deletions(-) (limited to 'web-ui/app') diff --git a/web-ui/app/js/account_recovery.js b/web-ui/app/js/account_recovery.js index a48415f8..441a8936 100644 --- a/web-ui/app/js/account_recovery.js +++ b/web-ui/app/js/account_recovery.js @@ -3,6 +3,8 @@ import { render } from 'react-dom' import Page from 'js/account_recovery/page' import a11y from 'react-a11y' +import 'font-awesome/scss/font-awesome.scss' + if(process.env.NODE_ENV === 'development') a11y(React); render( diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index 4dda8fff..5d4f2c36 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -14,6 +14,12 @@ const Page = () => (
+
); diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss index 9fe85d5c..8bba1b5a 100644 --- a/web-ui/app/scss/account_recovery/page.scss +++ b/web-ui/app/scss/account_recovery/page.scss @@ -29,6 +29,20 @@ p { margin-after: 0.5em; } +a { + text-decoration: none; + color: $dark_blue; + font-style: italic; + + .fa { + font-size: 1.6em; + position: relative; + top: 3px; + margin-right: 0.3em; + } + +} + .field-group { position:relative; margin: 1.5em 0; @@ -83,6 +97,7 @@ button { border-radius: 2px; font-weight: 300; width: 100%; + margin-bottom: 1em; } .container { @@ -110,10 +125,17 @@ img { font-size: 1.3em; } - .field-group, button { - width: 70%; - -webkit-align-self: center; - align-self: center; + form { + display: flex; + -webkit-display: flex; + -webkit-flex-direction: column; + flex-direction: column; + + .field-group, button, div { + width: 70%; + -webkit-align-self: center; + align-self: center; + } } } @@ -130,21 +152,21 @@ img { form { margin-left: 2.5em; - } - img { - width: 300px; - } + .field-group, button, div { + width: 300px; + -webkit-align-self: flex-start; + align-self: flex-start; + } - .field-group, button { - width: 300px; - -webkit-align-self: center; - align-self: center; + .field-group { + margin-top: 3em; + font-size: 1em; + } } - .field-group { - margin-top: 3em; - font-size: 1em; + img { + width: 300px; } button { -- cgit v1.2.3