From f9842043ba07c6626eb5025eaa8035e3aa6bc80a Mon Sep 17 00:00:00 2001 From: Alexandra Usacheva Date: Tue, 24 Oct 2017 17:02:21 +0300 Subject: [PATCH] FE-476: added mobile container. (#123) * FE-476: added mobile container. --- package.json | 1 + src/app/components/container/container.scss | 9 ++ .../components/container/container.scss.d.ts | 1 + src/app/components/container/container.tsx | 17 ++++ .../components/container/footer/footer.scss | 64 ++++++++++++++ .../container/footer/footer.scss.d.ts | 6 ++ .../components/container/footer/footer.tsx | 87 +++++++++++++++++++ src/app/components/container/footer/index.ts | 1 + .../components/container/header/header.scss | 34 ++++++++ .../container/header/header.scss.d.ts | 4 + .../components/container/header/header.tsx | 30 +++++++ src/app/components/container/header/index.ts | 1 + src/app/components/container/index.ts | 1 + src/app/components/container/info/index.ts | 1 + src/app/components/container/info/info.scss | 84 ++++++++++++++++++ .../components/container/info/info.scss.d.ts | 8 ++ src/app/components/container/info/info.tsx | 66 ++++++++++++++ src/app/components/index.ts | 5 +- src/app/components/sample/index.ts | 1 - src/app/components/sample/sample.tsx | 9 -- src/app/components/sample/styles.scss | 3 - src/app/components/sample/styles.scss.d.ts | 1 - src/app/index.html | 2 +- src/app/index.tsx | 7 +- src/app/main.scss.d.ts | 1 + src/app/styles/main.scss | 14 +++ src/app/styles/variables.scss | 9 ++ 27 files changed, 448 insertions(+), 19 deletions(-) create mode 100644 src/app/components/container/container.scss create mode 100644 src/app/components/container/container.scss.d.ts create mode 100644 src/app/components/container/container.tsx create mode 100644 src/app/components/container/footer/footer.scss create mode 100644 src/app/components/container/footer/footer.scss.d.ts create mode 100644 src/app/components/container/footer/footer.tsx create mode 100644 src/app/components/container/footer/index.ts create mode 100644 src/app/components/container/header/header.scss create mode 100644 src/app/components/container/header/header.scss.d.ts create mode 100644 src/app/components/container/header/header.tsx create mode 100644 src/app/components/container/header/index.ts create mode 100644 src/app/components/container/index.ts create mode 100644 src/app/components/container/info/index.ts create mode 100644 src/app/components/container/info/info.scss create mode 100644 src/app/components/container/info/info.scss.d.ts create mode 100644 src/app/components/container/info/info.tsx delete mode 100644 src/app/components/sample/index.ts delete mode 100644 src/app/components/sample/sample.tsx delete mode 100644 src/app/components/sample/styles.scss delete mode 100644 src/app/components/sample/styles.scss.d.ts create mode 100644 src/app/main.scss.d.ts create mode 100644 src/app/styles/main.scss create mode 100644 src/app/styles/variables.scss diff --git a/package.json b/package.json index 1a10a7ff..ee6c2fa3 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "whatwg-fetch": "~1.0.0" }, "devDependencies": { + "@types/classnames": "~2.2.3", "@types/react": "~16.0.1", "@types/react-dom": "~16.0.1", "autoprefixer": "~6.7.7", diff --git a/src/app/components/container/container.scss b/src/app/components/container/container.scss new file mode 100644 index 00000000..111f7e19 --- /dev/null +++ b/src/app/components/container/container.scss @@ -0,0 +1,9 @@ +@import '../../styles/variables'; + +.container { + position: relative; + height: 100%; + min-height: 100%; + width: 100%; + background-image: linear-gradient(40deg, $purple 0%, $deep-blue 29%, $blue 59%, $light-blue 100%); +} \ No newline at end of file diff --git a/src/app/components/container/container.scss.d.ts b/src/app/components/container/container.scss.d.ts new file mode 100644 index 00000000..578b60a5 --- /dev/null +++ b/src/app/components/container/container.scss.d.ts @@ -0,0 +1 @@ +export const container: string; diff --git a/src/app/components/container/container.tsx b/src/app/components/container/container.tsx new file mode 100644 index 00000000..122c2d72 --- /dev/null +++ b/src/app/components/container/container.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import * as styles from './container.scss'; + +import { Header, Info, Footer } from '../index'; + +export class Container extends React.Component { + + render() { + return ( +
+
+ +
+
+ ); + } +} diff --git a/src/app/components/container/footer/footer.scss b/src/app/components/container/footer/footer.scss new file mode 100644 index 00000000..ec1cce05 --- /dev/null +++ b/src/app/components/container/footer/footer.scss @@ -0,0 +1,64 @@ +@import '../../../styles/variables'; + +.footer { + padding: 30px 25px; +} + +.safe_payment { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex-direction: row; + margin: 0 0 15px; + + .text { + font-family: 'Roboto', sans-serif; + font-size: 11px; + font-weight: 900; + color: $light-purple; + letter-spacing: 2px; + line-height: 15px; + text-transform: uppercase; + } + + svg { + margin-right: 8px; + position: relative; + top: -2px; + } +} + +.safe_logos { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex-direction: row; + margin-bottom: 25px; + + svg { + margin-right: 25px; + } +} + +.copyright { + font-family: 'Roboto', sans-serif; + font-size: 13px; + font-weight: 400; + color: $lightest-purple; + letter-spacing: 0; + line-height: 18px; + margin: 0 0 20px; +} + +.offer { + display: block; + font-family: 'Roboto', sans-serif; + font-size: 11px; + font-weight: 900; + color: $light-purple; + letter-spacing: 2px; + line-height: 15px; + text-decoration: underline; + text-transform: uppercase; + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/components/container/footer/footer.scss.d.ts b/src/app/components/container/footer/footer.scss.d.ts new file mode 100644 index 00000000..ef85dcf1 --- /dev/null +++ b/src/app/components/container/footer/footer.scss.d.ts @@ -0,0 +1,6 @@ +export const footer: string; +export const safe_payment: string; +export const text: string; +export const safe_logos: string; +export const copyright: string; +export const offer: string; diff --git a/src/app/components/container/footer/footer.tsx b/src/app/components/container/footer/footer.tsx new file mode 100644 index 00000000..d9ce6e0f --- /dev/null +++ b/src/app/components/container/footer/footer.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import * as styles from './footer.scss'; + +export class Footer extends React.Component { + + render() { + return ( + + ); + } +} diff --git a/src/app/components/container/footer/index.ts b/src/app/components/container/footer/index.ts new file mode 100644 index 00000000..a058eae0 --- /dev/null +++ b/src/app/components/container/footer/index.ts @@ -0,0 +1 @@ +export * from './footer'; diff --git a/src/app/components/container/header/header.scss b/src/app/components/container/header/header.scss new file mode 100644 index 00000000..aa4cb332 --- /dev/null +++ b/src/app/components/container/header/header.scss @@ -0,0 +1,34 @@ +@import '../../../styles/variables'; + +.header { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + height: 60px; + background-color: $white; + align-items: center; + padding: 0 25px; +} + +.text { + position: relative; + font-family: 'Roboto', sans-serif; + font-weight: 500; + width: 210px; + height: 20px; + font-size: 16px; + letter-spacing: 0; + line-height: 20px; + color: #292929; + overflow: hidden; + text-overflow: ellipsis; + + &._center { + text-align: center; + } +} + +.back_btn { + position: relative; + margin-right: 20px; +} \ No newline at end of file diff --git a/src/app/components/container/header/header.scss.d.ts b/src/app/components/container/header/header.scss.d.ts new file mode 100644 index 00000000..7f9dc179 --- /dev/null +++ b/src/app/components/container/header/header.scss.d.ts @@ -0,0 +1,4 @@ +export const header: string; +export const text: string; +export const _center: string; +export const back_btn: string; diff --git a/src/app/components/container/header/header.tsx b/src/app/components/container/header/header.tsx new file mode 100644 index 00000000..f8cb8eff --- /dev/null +++ b/src/app/components/container/header/header.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './header.scss'; +import * as cx from 'classnames'; + +export class Header extends React.Component { + + render() { + return ( +
+
+ + + + + + + + + + +
+
+ bangbangeducation.rubangbangeducation.rubangbangeducation.rubangbangeducation.ru +
+
+ ); + } +} diff --git a/src/app/components/container/header/index.ts b/src/app/components/container/header/index.ts new file mode 100644 index 00000000..677ca79d --- /dev/null +++ b/src/app/components/container/header/index.ts @@ -0,0 +1 @@ +export * from './header'; diff --git a/src/app/components/container/index.ts b/src/app/components/container/index.ts new file mode 100644 index 00000000..85ee15b6 --- /dev/null +++ b/src/app/components/container/index.ts @@ -0,0 +1 @@ +export * from './container'; diff --git a/src/app/components/container/info/index.ts b/src/app/components/container/info/index.ts new file mode 100644 index 00000000..b247e432 --- /dev/null +++ b/src/app/components/container/info/index.ts @@ -0,0 +1 @@ +export * from './info'; diff --git a/src/app/components/container/info/info.scss b/src/app/components/container/info/info.scss new file mode 100644 index 00000000..57fe5eee --- /dev/null +++ b/src/app/components/container/info/info.scss @@ -0,0 +1,84 @@ +@import '../../../styles/variables'; + +.info { + padding: 30px 25px; +} + +.amount { + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 30px; + color: $white; + letter-spacing: 0; + line-height: 35px; + margin: 0 0 20px; +} + +.order { + font-family: 'Roboto', sans-serif; + font-weight: 900; + font-size: 11px; + color: $light-purple; + letter-spacing: 2px; + line-height: 15px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.description { + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 16px; + color: $white; + letter-spacing: 0; + line-height: 20px; + margin-bottom: 20px; +} + +.dueDate { + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 16px; + color: $white; + letter-spacing: 0; + line-height: 20px; + margin-bottom: 20px; +} + +.subscription { + font-family: 'Roboto', sans-serif; + font-weight: 900; + font-size: 11px; + color: $light-purple; + letter-spacing: 2px; + line-height: 15px; + text-transform: uppercase; + margin-bottom: 5px; + cursor: pointer; + + svg { + margin-left: 5px; + position: relative; + top: 3px; + + text { + font-family: 'Roboto', sans-serif; + font-weight: 700; + font-size: 10px; + color: $white; + } + } +} + +.help { + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 13px; + color: $white; + letter-spacing: 0; + line-height: 18px; + + &._hide { + display: none; + } +} \ No newline at end of file diff --git a/src/app/components/container/info/info.scss.d.ts b/src/app/components/container/info/info.scss.d.ts new file mode 100644 index 00000000..ee9a3bae --- /dev/null +++ b/src/app/components/container/info/info.scss.d.ts @@ -0,0 +1,8 @@ +export const info: string; +export const amount: string; +export const order: string; +export const description: string; +export const dueDate: string; +export const subscription: string; +export const help: string; +export const _hide: string; diff --git a/src/app/components/container/info/info.tsx b/src/app/components/container/info/info.tsx new file mode 100644 index 00000000..dc0a04e9 --- /dev/null +++ b/src/app/components/container/info/info.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import * as styles from './info.scss'; +import * as cx from 'classnames'; + +interface InfoState { + help?: boolean; +} + +export class Info extends React.Component<{}, InfoState> { + constructor() { + super(); + + this.state = { + help: false + }; + + this.toggleHelp = this.toggleHelp.bind(this); + } + + toggleHelp() { + this.setState({ + help: !this.state.help + } as InfoState); + } + + render() { + return ( +
+

+ 3 144 599, 77 ₽ +

+
+ ваш заказ +
+
+ Практический онлайн-курс скетчинга для дизайнеров +
+
+ Оплатите в течение 23:56 +
+
+ Ежемесячный платёж + + + + + + + + ? + + + + + + +
+
+ Деньги списываются 17 числа каждого месяца. Мы вышлем инструкцию, как отключить автоплатеж на email. +
+
+ ); + } +} diff --git a/src/app/components/index.ts b/src/app/components/index.ts index fede267c..534e0bd9 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -1 +1,4 @@ -export * from './sample'; +export * from './container'; +export * from './container/header'; +export * from './container/footer'; +export * from './container/info'; diff --git a/src/app/components/sample/index.ts b/src/app/components/sample/index.ts deleted file mode 100644 index fede267c..00000000 --- a/src/app/components/sample/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sample'; diff --git a/src/app/components/sample/sample.tsx b/src/app/components/sample/sample.tsx deleted file mode 100644 index ef78e44e..00000000 --- a/src/app/components/sample/sample.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import * as styles from './styles.scss'; - -export class Sample extends React.Component { - - render() { - return
Sample component
; - } -} diff --git a/src/app/components/sample/styles.scss b/src/app/components/sample/styles.scss deleted file mode 100644 index 1e92a0fc..00000000 --- a/src/app/components/sample/styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -.index { - background: red; -} \ No newline at end of file diff --git a/src/app/components/sample/styles.scss.d.ts b/src/app/components/sample/styles.scss.d.ts deleted file mode 100644 index 35b78d56..00000000 --- a/src/app/components/sample/styles.scss.d.ts +++ /dev/null @@ -1 +0,0 @@ -export const index: string; diff --git a/src/app/index.html b/src/app/index.html index a2e37a74..f11d5680 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -8,7 +8,7 @@ -
+
\ No newline at end of file diff --git a/src/app/index.tsx b/src/app/index.tsx index 91bd48ab..5d1b1cfa 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Sample } from './components'; +import { Container } from './components'; +import './styles/main.scss'; ReactDOM.render( - , - document.getElementById('example') + , + document.getElementById('app') ); diff --git a/src/app/main.scss.d.ts b/src/app/main.scss.d.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/app/main.scss.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss new file mode 100644 index 00000000..de8be9c7 --- /dev/null +++ b/src/app/styles/main.scss @@ -0,0 +1,14 @@ +:global { + body, + html, + #app { + margin: 0; + position: relative; + min-height: 100%; + height: auto; + width: 100%; + min-width: 320px; + } + + @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,latin-ext'); +} \ No newline at end of file diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss new file mode 100644 index 00000000..b0b821d5 --- /dev/null +++ b/src/app/styles/variables.scss @@ -0,0 +1,9 @@ +$white: #ffffff; + +$purple: #6b16ff; +$light-purple: #88a6ef; +$lightest-purple: #8baef3; + +$deep-blue: #5538fa; +$blue: #3666f3; +$light-blue: #00b6e6; \ No newline at end of file