ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Реорганизованы стили попапов

Browse Source
This commit is contained in:
ErickSkrauch
2016-06-16 17:11:57 +03:00
parent eee2c803af
commit 7a42e11946
6 changed files with 121 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/contact/ContactForm.jsx
View File

@@ -38,61 +38,63 @@ class ContactForm extends Component {
return (
<div className={styles.contactForm}>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
<div className={popupStyles.popup}>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
</div>
<Form form={form} onSubmit={this.onSubmit}>
<div className={popupStyles.body}>
<div className={styles.philosophicalThought}>
<Message {...messages.philosophicalThought} />
</div>
<div className={styles.formDisclaimer}>
<Message {...messages.disclaimer} /><br />
</div>
<div className={styles.pairInputRow}>
<div className={styles.pairInput}>
<Input
{...form.bindField('subject')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
label={messages.email}
type="email"
skin="light"
defaultValue={user.email}
/>
</div>
</div>
<div className={styles.formMargin}>
<Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
</div>
<TextArea
{...form.bindField('message')}
required
label={messages.message}
skin="light"
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block />
</div>
</Form>
</div>
<Form form={form} onSubmit={this.onSubmit}>
<div className={popupStyles.body}>
<div className={styles.philosophicalThought}>
<Message {...messages.philosophicalThought} />
</div>
<div className={styles.formDisclaimer}>
<Message {...messages.disclaimer} /><br />
</div>
<div className={styles.pairInputRow}>
<div className={styles.pairInput}>
<Input
{...form.bindField('subject')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
label={messages.email}
type="email"
skin="light"
defaultValue={user.email}
/>
</div>
</div>
<div className={styles.formMargin}>
<Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
</div>
<TextArea
{...form.bindField('message')}
required
label={messages.message}
skin="light"
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block />
</div>
</Form>
</div>
);
}

3
src/components/contact/contactForm.scss
View File

@@ -3,6 +3,9 @@
@import '~components/ui/popup/popup.scss';
.contactForm {
composes: popupWrapper from 'components/ui/popup/popup.scss';
@include popupBounding(500px);
}
.philosophicalThought {

66
src/components/profile/passwordRequestForm/PasswordRequestForm.jsx
View File

@@ -22,38 +22,42 @@ export default class PasswordRequestForm extends Component {
const {form} = this.props;
return (
<Form onSubmit={this.onFormSubmit}
form={form}
>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
<div className={styles.requestPasswordForm}>
<div className={popupStyles.popup}>
<Form onSubmit={this.onFormSubmit}
form={form}
>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
</div>
<div className={classNames(popupStyles.body, styles.body)}>
<span className={styles.lockIcon} />
<div className={styles.description}>
<Message {...messages.description} />
</div>
<Input {...form.bindField('password')}
type="password"
required
autoFocus
color="green"
skin="light"
center
/>
</div>
<Button
color="green"
label={messages.continue}
block
type="submit"
/>
</Form>
</div>
<div className={classNames(popupStyles.body, styles.body)}>
<span className={styles.lockIcon} />
<div className={styles.description}>
<Message {...messages.description} />
</div>
<Input {...form.bindField('password')}
type="password"
required
autoFocus
color="green"
skin="light"
center
/>
</div>
<Button
color="green"
label={messages.continue}
block
type="submit"
/>
</Form>
</div>
);
}

8
src/components/profile/passwordRequestForm/passwordRequestForm.scss
View File

@@ -1,3 +1,11 @@
@import '~components/ui/popup/popup.scss';
.requestPasswordForm {
composes: popupWrapper from 'components/ui/popup/popup.scss';
@include popupBounding(280px);
}
.body {
text-align: center;
}

6
src/components/ui/popup/PopupStack.jsx
View File

@@ -41,11 +41,7 @@ export class PopupStack extends Component {
return (
<div className={styles.overlay} key={index} onClick={this.onOverlayClick(popup, props)}>
<div className={styles.popupWrapper}>
<div className={styles.popup}>
<Popup {...props} />
</div>
</div>
<Popup {...props} />
</div>
);
})}

25
src/components/ui/popup/popup.scss
View File

@@ -1,7 +1,21 @@
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
$popupPadding: 20px;
$popupPadding: 20px; // Отступ контента внутри попапа
$popupMargin: 20px; // Отступ попапа от краёв окна
@mixin popupBounding($width, $padding: null) {
@if ($padding == null) {
$padding: $popupMargin;
}
@if ($padding != $popupMargin) {
margin: $padding auto;
padding: 0 $padding;
}
max-width: $width;
}
.overlay {
position: fixed;
@@ -32,15 +46,12 @@ $popupPadding: 20px;
}
.popupWrapper {
$padding: 20px;
$maxPopupWidth: 500px;
box-sizing: content-box;
margin: $popupMargin auto;
padding: 0 $popupMargin;
display: inline-block;
width: 100%;
max-width: $maxPopupWidth + $padding * 2;
box-sizing: border-box;
margin: $padding auto;
padding: 0 $padding;
vertical-align: middle;
}