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 + .../spec/account_recovery/account_recovery.spec.js | 12 --- web-ui/test/spec/account_recovery/page.spec.js | 12 +++ 6 files changed, 108 insertions(+), 23 deletions(-) delete mode 100644 web-ui/test/spec/account_recovery/account_recovery.spec.js create mode 100644 web-ui/test/spec/account_recovery/page.spec.js (limited to 'web-ui') 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; diff --git a/web-ui/test/spec/account_recovery/account_recovery.spec.js b/web-ui/test/spec/account_recovery/account_recovery.spec.js deleted file mode 100644 index eaff257b..00000000 --- a/web-ui/test/spec/account_recovery/account_recovery.spec.js +++ /dev/null @@ -1,12 +0,0 @@ -import {shallow} from 'enzyme' -import expect from 'expect' -import React from 'react' -import Page from '../../../app/js/account_recovery/page' - -describe('test', () => { - 'use strict'; - it('react', () => { - const page = shallow(); - expect(page.find('h1').text()).toEqual('E se você esquecer sua senha?'); - }); -}); diff --git a/web-ui/test/spec/account_recovery/page.spec.js b/web-ui/test/spec/account_recovery/page.spec.js new file mode 100644 index 00000000..f550a51e --- /dev/null +++ b/web-ui/test/spec/account_recovery/page.spec.js @@ -0,0 +1,12 @@ +import {shallow} from 'enzyme' +import expect from 'expect' +import React from 'react' +import Page from '../../../app/js/account_recovery/page' + +describe('Page', () => { + 'use strict'; + it('renders backup email page title', () => { + const page = shallow(); + expect(page.find('h1').text()).toEqual('E se você esquecer sua senha?'); + }); +}); -- 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 +- web-ui/package.json | 1 + web-ui/webpack.config.js | 6 +++++- 4 files changed, 10 insertions(+), 2 deletions(-) (limited to 'web-ui') 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.

diff --git a/web-ui/package.json b/web-ui/package.json index 6f875280..cd9e1286 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -49,6 +49,7 @@ "node-sass": "^4.5.0", "quoted-printable": "^1.0.1", "react": "^15.4.2", + "react-a11y": "^0.3.3", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2", "requirejs": "2.2.0", diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js index 59d2ae5b..c59ebb63 100644 --- a/web-ui/webpack.config.js +++ b/web-ui/webpack.config.js @@ -33,5 +33,9 @@ module.exports = { } ] }, - plugins: [copyWebpack] + plugins: [copyWebpack, new webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': '"development"' + } + })] } -- 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') 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 +++++++++++++++++++++--------- web-ui/config/loaders-webpack.js | 20 ++++++++++++ web-ui/package.json | 2 ++ web-ui/webpack.config.js | 14 ++------ web-ui/webpack.production.config.js | 13 ++------ 7 files changed, 71 insertions(+), 38 deletions(-) create mode 100644 web-ui/config/loaders-webpack.js (limited to 'web-ui') 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 { diff --git a/web-ui/config/loaders-webpack.js b/web-ui/config/loaders-webpack.js new file mode 100644 index 00000000..21e9a572 --- /dev/null +++ b/web-ui/config/loaders-webpack.js @@ -0,0 +1,20 @@ +module.exports = [ + { + test: /\.js$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel', + query: { presets: ['es2015', 'react']} + }, + { + test: /\.scss|css$/, + loader: "style-loader!css-loader!sass-loader" + }, + { + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url-loader?limit=10000&mimetype=application/font-woff" + }, + { + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader" + } +] diff --git a/web-ui/package.json b/web-ui/package.json index cd9e1286..6f9b03d4 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -17,6 +17,7 @@ "dompurify": "^0.8.4", "enzyme": "^2.7.1", "expect": "^1.20.2", + "file-loader": "^0.10.0", "font-awesome": "^4.7.0", "handlebars": "^4.0.5", "he": "^1.1.0", @@ -56,6 +57,7 @@ "sass-loader": "^4.1.1", "style-loader": "^0.13.1", "typeahead.js": "^0.11.1", + "url-loader": "^0.5.7", "utf8": "^2.1.2", "watch": "0.19.1", "webpack": "^1.14.0" diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js index c59ebb63..5886154a 100644 --- a/web-ui/webpack.config.js +++ b/web-ui/webpack.config.js @@ -1,6 +1,7 @@ var path = require('path'); var webpack = require('webpack'); var copyWebpack = require('./config/copy-webpack'); +var loaders = require('./config/loaders-webpack'); var aliases = require('./config/alias-webpack'); module.exports = { @@ -20,18 +21,7 @@ module.exports = { extensions: ['', '.js'] }, module: { - loaders: [ - { - test: /\.js$/, - exclude: /(node_modules|bower_components)/, - loader: 'babel', - query: { presets: ['es2015', 'react']} - }, - { - test: /\.scss|css$/, - loader: "style-loader!css-loader!sass-loader" - } - ] + loaders: loaders }, plugins: [copyWebpack, new webpack.DefinePlugin({ 'process.env': { diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js index bc10b90e..cf8ab8ff 100644 --- a/web-ui/webpack.production.config.js +++ b/web-ui/webpack.production.config.js @@ -1,6 +1,7 @@ var path = require('path'); var webpack = require('webpack'); var copyWebpack = require('./config/copy-webpack'); +var loaders = require('./config/loaders-webpack'); var aliases = require('./config/alias-webpack'); module.exports = { @@ -20,17 +21,7 @@ module.exports = { extensions: ['', '.js'] }, module: { - loaders: [ - { - test: /\.js$/, - loader: 'babel', - query: { presets: ['es2015', 'react']} - }, - { - test: /\.scss|css$/, - loader: "style-loader!css-loader!sass-loader" - } - ] + loaders: loaders }, plugins: [ new webpack.optimize.UglifyJsPlugin(), -- cgit v1.2.3