ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-11-26 16:52:06 +05:30
Code Issues Packages Projects Releases Wiki Activity

Немного другой подход к верстке формы запроса прав приложения

Browse Source
This commit is contained in:
SleepWalker 2016-01-18 22:47:32 +02:00
parent 7696f9e4bf
commit 1c9d4d9d03
2 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/auth/Permissions.jsx
View File

@ -20,8 +20,8 @@ export default class Permissions extends Component {
<Helmet title="App premissions" />
<Panel title={<Message {...messages.permissionsTitle} />}>
<PanelBody className={styles.authBody}>
<PanelBodyHeader className={styles.authBodyHeader}>
<PanelBody>
<PanelBodyHeader>
<div className={styles.authInfo}>
<div className={styles.authInfoAvatar}>
{/*<img src="//lorempixel.com/g/90/90" />*/}
@ -35,15 +35,17 @@ export default class Permissions extends Component {
</div>
</div>
</PanelBodyHeader>
<div className={styles.disclaimer}>
<Message {...messages.theAppNeedsAccess} />
<div className={styles.permissionsContainer}>
<div className={styles.permissionsTitle}>
<Message {...messages.theAppNeedsAccess} />
</div>
<ul className={styles.permissionsList}>
<li>Authorization for Minecraft servers</li>
<li>Manage your skins directory and additional rows for multiline</li>
<li>Change the active skin</li>
<li>View your E-mail address</li>
</ul>
</div>
<ul className={styles.permissionsList}>
<li>Authorization for Minecraft servers</li>
<li>Manage your skins directory and additional rows for multiline</li>
<li>Change the active skin</li>
<li>View your E-mail address</li>
</ul>
</PanelBody>
<PanelFooter>
<button className={buttons.green}>

30
src/components/auth/signIn.scss
View File

@ -67,31 +67,16 @@
}
.activationCodeInput {
composes: blueTextField from './../ui/form.scss';
composes: blueTextField from 'components/ui/form.scss';
text-align: center;
}
// app permissions
$authBodyLeftRightPadding: 32px;
$authBodyTopBottomPadding: 30px;
.authBody {
composes: body from 'components/ui/panel.scss';
padding: $authBodyTopBottomPadding $authBodyLeftRightPadding;
text-align: left;
}
.authBodyHeader {
composes: defaultBodyHeader from 'components/ui/panel.scss';
// Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
padding: 15px $authBodyLeftRightPadding 17px;
margin: (-$authBodyTopBottomPadding) (-$authBodyLeftRightPadding) $authBodyTopBottomPadding;
}
.authInfo {
// Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
padding: 5px 20px 7px;
text-align: left;
}
.authInfoAvatar {
@ -123,7 +108,12 @@ $authBodyTopBottomPadding: 30px;
color: #fff;
}
.disclaimer {
.permissionsContainer {
padding: 15px 12px;
text-align: left;
}
.permissionsTitle {
font-family: $font-family-title;
font-size: 18px;
color: #dd8650;