ElyBy-Mirror/emails-renderer
1
0
Fork 0
mirror of https://github.com/elyby/emails-renderer.git synced 2024-12-22 13:19:45 +05:30
Code Issues Packages Projects Releases Wiki Activity

Проба пера по вёрстке письма о регистрации

Browse Source
This commit is contained in:
ErickSkrauch 2016-09-11 03:40:08 +03:00
parent b746a4967b
commit 0b35d908e8
11 changed files with 118 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules node_modules
dist/* dist/*
!dist/app.js !dist/app.js
.idea

31
src/components/Html.jsx Normal file
View File

@ -0,0 +1,31 @@
import styles from './styles';
import { Table } from './';
export default function Html(props) {
return (
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style={{
margin: 0
}}>
<Table style={styles.body}>
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{props.children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
</body>
</html>
);
}

9
src/components/index.js Normal file
View File

@ -0,0 +1,9 @@
import Html from './Html';
import Table from './table/Table';
import Userbar from './userbar/Userbar';
export {
Html,
Table,
Userbar
};

9
src/components/styles.jsx Normal file
View File

@ -0,0 +1,9 @@
export default {
body: {
backgroundColor: '#EBE8E1',
width: '100%'
},
container: {
width: '600px'
}
}

14
src/components/table/Table.jsx Normal file
View File

@ -0,0 +1,14 @@
import styles from './styles';
export default function Table(props) {
return (
<table cellPadding="0" cellSpacing="0" style={{
...styles.table,
...props.style
}}>
<tbody>
{props.children}
</tbody>
</table>
);
}

8
src/components/table/styles.js Normal file
View File

@ -0,0 +1,8 @@
export default {
table: {
borderCollapse: 'collapse',
msoTableLspace: '0pt', // TODO: эта штука не отображается
msoTableRspace: '0pt', // TODO: эта штука не отображается
width: '100%'
}
}

26
src/components/userbar/Userbar.jsx Normal file
View File

@ -0,0 +1,26 @@
import { Table } from './../';
import styles from './styles';
import logoImage from './logo.png';
export default function Userbar() {
return (
<Table style={styles.userbar}>
<tr>
<td style={styles.marginColumn}>
</td>
<td style={styles.logoColumn}>
<div style={styles.logo}>
{/* TODO: здесь нужно динамически сформировать название, т.к. может быть Ёly.by */}
<img src={logoImage} style={{
width: '65px',
verticalAlign: 'middle'
}} />
</div>
</td>
<td>&nbsp;</td>
</tr>
</Table>
);
}

BIN
src/components/userbar/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

15
src/components/userbar/styles.js Normal file
View File

@ -0,0 +1,15 @@
export default {
userbar: {
background: '#207E5C',
height: '50px'
},
marginColumn: {
width: '20px'
},
logoColumn: {
background: '#1A6449',
width: '1%',
verticalAlign: 'middle',
padding: '0 13px'
}
}

7
src/emails/register/Register.jsx
View File

@ -2,14 +2,17 @@ import { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { Html, Userbar } from './../../components';
import styles from './styles'; import styles from './styles';
import messages from './messages.intl.json'; import messages from './messages.intl.json';
export default function Register({username}) { export default function Register({username}) {
return ( return (
<div style={styles.container}> <Html>
<Userbar />
<Message {...messages.you_registered_as} values={{username}} /> <Message {...messages.you_registered_as} values={{username}} />
</div> </Html>
); );
} }

6
src/emails/register/styles.js
View File

@ -1,8 +1,2 @@
export default { export default {
container: {
padding: '10px',
margin: '10px',
background: '#f7f7f7',
border: '1px #ddd solid',
}
}; };