ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-01-16 00:23:10 +05:30
Code Issues Packages Projects Releases Wiki Activity

Доработано выделение пункта правил при переходе на него, однако как-то костыльно :(

Browse Source
This commit is contained in:
ErickSkrauch 2016-05-31 12:30:41 +03:00
parent 6ea62bca08
commit 18fe80248e
2 changed files with 104 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/rules/RulesPage.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
@ -12,30 +12,32 @@ import appInfo from 'components/auth/appInfo/AppInfo.intl.json';
const projectName = <Message {...appInfo.appName} />; const projectName = <Message {...appInfo.appName} />;
import classNames from 'classnames';
const rules = [ const rules = [
{ {
title: <Message {...messages.mainProvisions} />, title: <Message {...messages.mainProvisions} />,
items: [ items: [
(<Message {...messages.mainProvision1} values={{ <Message {...messages.mainProvision1} values={{
name: (<b>{projectName}</b>) name: (<b>{projectName}</b>)
}} />), }} />,
(<Message {...messages.mainProvision2} />), <Message {...messages.mainProvision2} />,
(<Message {...messages.mainProvision3} />), <Message {...messages.mainProvision3} />,
(<Message {...messages.mainProvision4} values={{ <Message {...messages.mainProvision4} values={{
link: (<Link to={'/register'}>https://account.ely.by/register</Link>) link: (<Link to={'/register'}>https://account.ely.by/register</Link>)
}} />) }} />
] ]
}, },
{ {
title: <Message {...messages.emailAndNickname} />, title: <Message {...messages.emailAndNickname} />,
items: [ items: [
(<Message {...messages.emailAndNickname1} />), <Message {...messages.emailAndNickname1} />,
(<Message {...messages.emailAndNickname2} />), <Message {...messages.emailAndNickname2} />,
(<Message {...messages.emailAndNickname3} />), <Message {...messages.emailAndNickname3} />,
(<Message {...messages.emailAndNickname4} />), <Message {...messages.emailAndNickname4} />,
(<Message {...messages.emailAndNickname5} />), <Message {...messages.emailAndNickname5} />,
(<Message {...messages.emailAndNickname6} />), <Message {...messages.emailAndNickname6} />,
(<Message {...messages.emailAndNickname7} />) <Message {...messages.emailAndNickname7} />
] ]
}, },
{ {
@ -49,44 +51,76 @@ const rules = [
<p><Message {...messages.elyAccountsAsServiceDesc2} /></p> <p><Message {...messages.elyAccountsAsServiceDesc2} /></p>
</div>), </div>),
items: [ items: [
(<Message {...messages.elyAccountsAsService1} />), <Message {...messages.elyAccountsAsService1} />,
(<Message {...messages.elyAccountsAsService2} />) <Message {...messages.elyAccountsAsService2} />
] ]
} }
]; ];
export default function RulesPage() { export default class RulesPage extends Component {
return ( static propTypes = {
<div> location: PropTypes.shape({
<div className={styles.rules}> hash: PropTypes.string
{rules.map((block, sectionIndex) => ( })
<div className={styles.rulesSection} key={sectionIndex}> };
<span id={`rule-${sectionIndex + 1}`} />
<h2 className={styles.rulesSectionTitle}>{block.title}</h2>
<div className={styles.rulesBody}> render() {
{block.description ? ( let {hash} = this.props.location;
<div className={styles.blockDescription}> if (hash) {
{block.description} hash = hash.substring(1);
</div> }
) : ''}
<ol className={styles.rulesList}> return (
{block.items.map((item, ruleIndex) => ( <div>
<li className={styles.rulesItem} key={ruleIndex}> <div className={styles.rules}>
<span id={`rule-${sectionIndex + 1}-${ruleIndex + 1}`} /> {rules.map((block, sectionIndex) => (
{item} <div className={styles.rulesSection} key={sectionIndex}>
</li> <h2
))} className={classNames(styles.rulesSectionTitle, {
</ol> [styles.target]: this.getTitleHash(sectionIndex) === hash
})}
id={this.getTitleHash(sectionIndex)}
>
{block.title}
</h2>
<div className={styles.rulesBody}>
{block.description ? (
<div className={styles.blockDescription}>
{block.description}
</div>
) : ''}
<ol className={styles.rulesList}>
{block.items.map((item, ruleIndex) => (
<li
className={classNames(styles.rulesItem, {
[styles.target]: this.getRuleHash(sectionIndex, ruleIndex) === hash
})}
key={ruleIndex}
id={this.getRuleHash(sectionIndex, ruleIndex)}
>
{item}
</li>
))}
</ol>
</div>
</div> </div>
</div> ))}
))} </div>
<div className={styles.footer}>
<FooterMenu />
</div>
</div> </div>
<div className={styles.footer}> );
<FooterMenu /> }
</div>
</div> getTitleHash(sectionIndex) {
); return `rule-${sectionIndex + 1}`;
}
getRuleHash(sectionIndex, ruleIndex) {
return `rule-${sectionIndex + 1}-${ruleIndex + 1}`;
}
} }
RulesPage.displayName = 'RulesPage'; RulesPage.displayName = 'RulesPage';

29
src/pages/rules/rules.scss
View File

@ -25,6 +25,9 @@
} }
.rulesBody { .rulesBody {
position: relative;
z-index: -2;
padding: 20px; padding: 20px;
background: #fff; background: #fff;
font-size: 14px; font-size: 14px;
@ -53,20 +56,38 @@
@extend %rulesTextFormat; @extend %rulesTextFormat;
list-style: decimal; list-style: decimal;
position: relative;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
&.target {
&:before {
$border: 8px solid #ddd8ce;
content: '';
position: absolute;
top: -10px;
left: -40px;
width: calc(100% + 60px);
height: calc(100% + 20px);
background: $light;
border-left: $border;
border-right: $border;
box-sizing: border-box;
z-index: -1;
}
}
a { a {
color: #444; color: #444;
border-bottom: 1px dotted #aaa; border-bottom: 1px dotted #aaa;
text-decoration: none; text-decoration: none;
transition: .25s transition: .25s;
}
a:hover { &:hover {
border-bottom-color: #444 border-bottom-color: #444
}
} }
} }