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

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

@ -25,6 +25,9 @@
}
.rulesBody {
position: relative;
z-index: -2;
padding: 20px;
background: #fff;
font-size: 14px;
@ -53,20 +56,38 @@
@extend %rulesTextFormat;
list-style: decimal;
position: relative;
&:last-of-type {
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 {
color: #444;
border-bottom: 1px dotted #aaa;
text-decoration: none;
transition: .25s
}
transition: .25s;
a:hover {
border-bottom-color: #444
&:hover {
border-bottom-color: #444
}
}
}