valitydev/checkout
14
0
Fork 0
mirror of https://github.com/valitydev/checkout.git synced 2024-11-06 10:35:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FE-476: added mobile container. (#123)

Browse Source 
* FE-476: added mobile container.
This commit is contained in:
Alexandra Usacheva 2017-10-24 17:02:21 +03:00 committed by GitHub
parent 5bff2050f0
commit f9842043ba
27 changed files with 448 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

9
src/app/components/container/container.scss Normal file
View File

@ -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%);
}

1
src/app/components/container/container.scss.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export const container: string;

17
src/app/components/container/container.tsx Normal file
View File

@ -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 (
<div className={styles.container}>
<Header />
<Info />
<Footer />
</div>
);
}
}

64
src/app/components/container/footer/footer.scss Normal file
View File

@ -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;
}

6
src/app/components/container/footer/footer.scss.d.ts vendored Normal file
View File

@ -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;

87
src/app/components/container/footer/footer.tsx Normal file
View File

File diff suppressed because one or more lines are too long

1
src/app/components/container/footer/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './footer';

34
src/app/components/container/header/header.scss Normal file
View File

@ -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;
}

4
src/app/components/container/header/header.scss.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export const header: string;
export const text: string;
export const _center: string;
export const back_btn: string;

30
src/app/components/container/header/header.tsx Normal file
View File

@ -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 (
<header className={styles.header}>
<div className={styles.back_btn}>
<svg width='9px' height='60px' viewBox='0 0 9 60'>
<g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
<g transform='translate(-25.000000, 0.000000)'>
<g transform='translate(25.000000, 0.000000)'>
<path d='M8,24 L1,31' stroke='#9013FE' strokeWidth='2' />
<path d='M1,30 L8,37 L1,30 Z' stroke='#9013FE' strokeWidth='2' />
</g>
</g>
</g>
</svg>
</div>
<div className={cx(styles.text, {
[styles._center]: true
})}>
bangbangeducation.rubangbangeducation.rubangbangeducation.rubangbangeducation.ru
</div>
</header>
);
}
}

1
src/app/components/container/header/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './header';

1
src/app/components/container/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './container';

1
src/app/components/container/info/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './info';

84
src/app/components/container/info/info.scss Normal file
View File

@ -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;
}
}

8
src/app/components/container/info/info.scss.d.ts vendored Normal file
View File

@ -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;

66
src/app/components/container/info/info.tsx Normal file
View File

@ -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 (
<div className={styles.info}>
<h1 className={styles.amount}>
3 144 599, 77 ₽
</h1>
<div className={styles.order}>
ваш заказ
</div>
<div className={styles.description}>
Практический онлайн-курс скетчинга для дизайнеров
</div>
<div className={styles.dueDate}>
Оплатите в течение 23:56
</div>
<div className={styles.subscription} onClick={this.toggleHelp}>
Ежемесячный платёж
<svg width='15px' height='15px' viewBox='0 0 15 15'>
<g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
<g transform='translate(-201.000000, -205.000000)'>
<g transform='translate(25.000000, 30.000000)'>
<g transform='translate(177.000000, 176.000000)'>
<circle stroke='#FFFFFF' strokeWidth='2' cx='6.5' cy='6.5' r='6.5' />
<text fill='#FFFFFF'>
<tspan x='4' y='10'>?</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
</div>
<div className={cx(styles.help, {
[styles._hide]: !this.state.help
})}>
Деньги списываются 17 числа каждого месяца. Мы вышлем инструкцию, как отключить автоплатеж на email.
</div>
</div>
);
}
}

5
src/app/components/index.ts
View File

@ -1 +1,4 @@
export * from './sample';
export * from './container';
export * from './container/header';
export * from './container/footer';
export * from './container/info';

1
src/app/components/sample/index.ts
View File

@ -1 +0,0 @@
export * from './sample';

9
src/app/components/sample/sample.tsx
View File

@ -1,9 +0,0 @@
import * as React from 'react';
import * as styles from './styles.scss';
export class Sample extends React.Component {
render() {
return <div className={styles.index}>Sample component</div>;
}
}

3
src/app/components/sample/styles.scss
View File

@ -1,3 +0,0 @@
.index {
background: red;
}

1
src/app/components/sample/styles.scss.d.ts vendored
View File

@ -1 +0,0 @@
export const index: string;

2
src/app/index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.styles%>">
</head>
<body>
<div id="example"></div>
<div id="app"></div>
<script src="<%= htmlWebpackPlugin.options.files.app%>"></script>
</body>
</html>

7
src/app/index.tsx
View File

@ -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(
<Sample/>,
document.getElementById('example')
<Container/>,
document.getElementById('app')
);

1
src/app/main.scss.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export {};

14
src/app/styles/main.scss Normal file
View File

@ -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');
}

9
src/app/styles/variables.scss Normal file
View File

@ -0,0 +1,9 @@
$white: #ffffff;
$purple: #6b16ff;
$light-purple: #88a6ef;
$lightest-purple: #8baef3;
$deep-blue: #5538fa;
$blue: #3666f3;
$light-blue: #00b6e6;