Skip to content
This repository was archived by the owner on Jun 28, 2021. It is now read-only.

Commit d715a2e

Browse files
mmahalwymmahalwy
committed
sidebar
1 parent ea96cfc commit d715a2e

File tree

10 files changed

+166
-111
lines changed

10 files changed

+166
-111
lines changed

‎src/components/Sidebar/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { PropTypes, Component } from 'react';
2+
3+
const styles = require('./style.scss');
4+
5+
class Sidebar extends Component {
6+
static propTypes = {
7+
open: PropTypes.bool.isRequired,
8+
onSetOpen: PropTypes.func.isRequired,
9+
children: PropTypes.node
10+
};
11+
12+
static defaultProps = {
13+
open: false
14+
};
15+
16+
componentWillReceiveProps(nextProps) {
17+
if (__CLIENT__ && nextProps.open) {
18+
document.body.removeEventListener('click', this.onBodyClick.bind(this), true);
19+
document.body.addEventListener('click', this.onBodyClick.bind(this), true);
20+
}
21+
22+
return false;
23+
}
24+
25+
onBodyClick = (event) => {
26+
const { onSetOpen } = this.props;
27+
28+
if (!this.refs.container.contains(event.target)) {
29+
return onSetOpen();
30+
}
31+
32+
return false;
33+
}
34+
35+
render() {
36+
const { open, children } = this.props;
37+
38+
return (
39+
<div ref="container" className={`${styles.container} ${open && styles.open}`}>
40+
{children}
41+
</div>
42+
);
43+
}
44+
}
45+
46+
export default Sidebar;

‎src/components/Sidebar/style.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import '../../styles/variables.scss';
2+
3+
$width: 20%;
4+
5+
.container{
6+
position: fixed;
7+
right: 100%;
8+
top: 0px;
9+
bottom: 0px;
10+
background: #fff;
11+
z-index: 9999;
12+
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
13+
14+
background: #fff;
15+
width: $width;
16+
17+
transition: right 0.3s;
18+
19+
@media(max-width: $screen-sm) {
20+
width: 100% - $width;
21+
}
22+
23+
&.open{
24+
right: 100% - $width;
25+
}
26+
}

‎src/containers/App/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ class App extends Component {
3939
<div>
4040
<Helmet {...config.app.head} />
4141
<FontStyles />
42-
{React.cloneElement(children, {footer: <Footer />})}
43-
42+
{children}
43+
<Footer />
4444
<Modal bsSize="large" show={!!media.content} onHide={removeMedia}>
4545
<ModalHeader closeButton>
4646
<ModalTitle className="montserrat">

‎src/containers/Home/index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,13 @@ function Home(props) {
3434
</div>
3535
</div>
3636
</div>
37-
{props.footer}
3837
</div>
3938
);
4039
}
4140

4241
Home.propTypes = {
4342
lastVisit: PropTypes.any,
44-
surahs: PropTypes.object.isRequired,
45-
footer: PropTypes.node.isRequired
43+
surahs: PropTypes.object.isRequired
4644
};
4745

4846
const AsyncHome = asyncConnect([{

‎src/containers/Surah/Header/index.js‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { PropTypes } from 'react';
22
import { Link } from 'react-router';
3+
import Row from 'react-bootstrap/lib/Row';
4+
import Col from 'react-bootstrap/lib/Col';
35
import Navbar from 'react-bootstrap/lib/Navbar';
46
const Header = Navbar.Header;
57

68
import debug from '../../../helpers/debug';
79

8-
const ornamentLeft = require('../../../../static/images/ornament-left.png');
9-
const ornamentRight = require('../../../../static/images/ornament-right.png');
10+
// const ornamentLeft = require('../../../../static/images/ornament-left.png');
11+
// const ornamentRight = require('../../../../static/images/ornament-right.png');
1012

1113
const styles = require('./style.scss');
1214

@@ -16,61 +18,68 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
1618
return (
1719
<Navbar className="montserrat surah" fixedTop fluid>
1820
<Header>
19-
<button type="button" className="navbar-toggle collapsed" onClick={handleToggleSidebar}>
20-
<span className="sr-only">Toggle navigation</span>
21-
<span className="icon-bar"></span>
22-
<span className="icon-bar"></span>
23-
<span className="icon-bar"></span>
24-
</button>
25-
<ul className={`list-inline ${styles.container}`}>
26-
<li className={styles.verticalAlign}>
27-
{/* <img
28-
src={ornamentLeft}
29-
className={`${styles.ornament} pull-left hidden-xs hidden-sm`}
30-
alt="Ornament left"
31-
/> */}
32-
{
33-
surah.id > 1 &&
34-
<Link
35-
data-metrics-event-name="Title:PreviousSurah"
36-
className="navbar-text previous-chapter"
37-
to={`/${surah.id - 1}`}
38-
>
39-
<i
40-
data-metrics-event-name="Title:PreviousSurah"
41-
className="ss-icon ss-navigateleft"
42-
/>
43-
<span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
44-
</Link>
45-
}
46-
</li>
47-
<li className={styles.verticalAlign}>
48-
{
49-
surah &&
50-
<p className="navbar-text text-uppercase surah-name">
51-
{surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
52-
</p>
53-
}
54-
</li>
55-
<li className={styles.verticalAlign}>
56-
{
57-
surah.id < 114 &&
58-
<Link
59-
data-metrics-event-name="Title:NextSurah"
60-
className="navbar-text next-chapter"
61-
to={`/${surah.id + 1}`}
62-
>
63-
<span className="hidden-xs hidden-sm">NEXT SURAH </span>
64-
<i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
65-
</Link>
66-
}
67-
{/* <img
68-
src={ornamentRight}
69-
className={`${styles.ornament} hidden-xs hidden-sm`}
70-
alt="Ornament right"
71-
/> */}
72-
</li>
73-
</ul>
21+
<Row>
22+
<Col xs={1}>
23+
<button type="button" className="navbar-toggle collapsed" onClick={handleToggleSidebar}>
24+
<span className="sr-only">Toggle navigation</span>
25+
<span className="icon-bar"></span>
26+
<span className="icon-bar"></span>
27+
<span className="icon-bar"></span>
28+
</button>
29+
</Col>
30+
<Col xs={10}>
31+
<ul className={`list-inline ${styles.container} text-center`}>
32+
<li className={styles.verticalAlign}>
33+
{/* <img
34+
src={ornamentLeft}
35+
className={`${styles.ornament} pull-left hidden-xs hidden-sm`}
36+
alt="Ornament left"
37+
/> */}
38+
{
39+
surah.id > 1 &&
40+
<Link
41+
data-metrics-event-name="Title:PreviousSurah"
42+
className="navbar-text previous-chapter"
43+
to={`/${surah.id - 1}`}
44+
>
45+
<i
46+
data-metrics-event-name="Title:PreviousSurah"
47+
className="ss-icon ss-navigateleft"
48+
/>
49+
<span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
50+
</Link>
51+
}
52+
</li>
53+
<li className={styles.verticalAlign}>
54+
{
55+
surah &&
56+
<p className="navbar-text text-uppercase surah-name">
57+
{surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
58+
</p>
59+
}
60+
</li>
61+
<li className={styles.verticalAlign}>
62+
{
63+
surah.id < 114 &&
64+
<Link
65+
data-metrics-event-name="Title:NextSurah"
66+
className="navbar-text next-chapter"
67+
to={`/${surah.id + 1}`}
68+
>
69+
<span className="hidden-xs hidden-sm">NEXT SURAH </span>
70+
<i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
71+
</Link>
72+
}
73+
{/* <img
74+
src={ornamentRight}
75+
className={`${styles.ornament} hidden-xs hidden-sm`}
76+
alt="Ornament right"
77+
/> */}
78+
</li>
79+
</ul>
80+
</Col>
81+
</Row>
82+
7483
</Header>
7584
</Navbar>
7685
);

‎src/containers/Surah/Header/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.container{
44
margin: 0px;
5-
width: 80%;
5+
width: 100%;
66
margin-left: 15px;
77
display: inline-block;
88
}

‎src/containers/Surah/index.js‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Navbar from 'react-bootstrap/lib/Navbar';
1313
const NavbarHeader = Navbar.Header;
1414

1515
import Helmet from 'react-helmet';
16-
import Sidebar from 'react-sidebar';
16+
import Sidebar from 'components/Sidebar';
1717

1818
// components
1919
import LazyLoad from 'components/LazyLoad';
@@ -428,35 +428,32 @@ class Surah extends Component {
428428
/>
429429
<Header surah={surah} handleToggleSidebar={() => this.setState({sidebarOpen: true})} />
430430
<Sidebar
431-
sidebarClassName={style.sidebar}
432-
sidebar={this.renderSidebar()}
433431
open={this.state.sidebarOpen}
434432
onSetOpen={(open) => this.setState({sidebarOpen: open})}
435-
styles={{sidebar: {zIndex: 9999}}}
436433
>
437-
<div className={`container-fluid ${style['surah-container']}`}>
438-
<Row>
439-
<SurahInfo
440-
surah={surah}
441-
isShowingSurahInfo={options.isShowingSurahInfo}
442-
onClose={this.handleSurahInfoToggle}
443-
/>
444-
<Col md={10} mdOffset={1}>
445-
<TopOptions options={options} actions={actions} surah={surah} />
446-
<Bismillah surah={surah} />
447-
{options.isReadingMode ? this.renderLines() : this.renderAyahs()}
448-
</Col>
449-
<Col md={10} mdOffset={1}>
450-
{this.renderPagination()}
451-
</Col>
452-
</Row>
453-
</div>
454-
<Audioplayer
455-
surah={surah}
456-
onLoadAyahs={this.handleLazyLoadAyahs}
457-
/>
458-
{footer}
434+
{this.renderSidebar()}
459435
</Sidebar>
436+
<div className={`container-fluid ${style['surah-container']}`}>
437+
<Row>
438+
<SurahInfo
439+
surah={surah}
440+
isShowingSurahInfo={options.isShowingSurahInfo}
441+
onClose={this.handleSurahInfoToggle}
442+
/>
443+
<Col md={10} mdOffset={1}>
444+
<TopOptions options={options} actions={actions} surah={surah} />
445+
<Bismillah surah={surah} />
446+
{options.isReadingMode ? this.renderLines() : this.renderAyahs()}
447+
</Col>
448+
<Col md={10} mdOffset={1}>
449+
{this.renderPagination()}
450+
</Col>
451+
</Row>
452+
</div>
453+
<Audioplayer
454+
surah={surah}
455+
onLoadAyahs={this.handleLazyLoadAyahs}
456+
/>
460457
</div>
461458
);
462459
}

‎src/containers/Surah/style.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,3 @@
3333
padding-top: 100px;
3434
}
3535
}
36-
37-
.sidebar{
38-
background: #fff;
39-
width: 30%;
40-
41-
@media(max-width: $screen-sm) {
42-
width: 80%;
43-
44-
.sidebarTitle{
45-
margin-left: 15px;
46-
}
47-
48-
}
49-
}

‎src/server/config/express.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ const proxyApi = httpProxy.createProxyServer({
1818
});
1919

2020
const proxyOneQuran = httpProxy.createProxyServer({
21-
target: process.env.ONE_QURAN_URL,
22-
host: process.env.ONE_QURAN_URL.replace('http://'),
21+
target: 'http://quranicaudio.com',
2322
secure: false,
2423
proxyTimeout: 15000
2524
});

‎src/styles/partials/_surah-title.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,6 @@ $transition-timing: 0.5s;
4040
}
4141
}
4242
}
43-
.surah-name{
44-
font-size: 13px;
45-
color: $olive;
46-
}
47-
48-
4943

5044
@media (max-width: $screen-sm-max) {
5145
.surah-title{

0 commit comments

Comments
 (0)