Skip to content

Commit a092aa9

Browse files
mmahalwymmahalwy
authoredNov 21, 2016
Env problems (quran#494)
* Adding media and modal * Fix envs * Moving docker env closer * return dockerfile as is * fixes * give it a try * try again * desparate times * desparate times * host * sidebar * fix
1 parent bd518f9 commit a092aa9

File tree

17 files changed

+192
-131
lines changed

17 files changed

+192
-131
lines changed
 

‎Dockerfile

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ RUN cp -a /tmp/node_modules /quran
2929

3030
WORKDIR /quran
3131
ADD . /quran/
32+
3233
RUN npm run build:client
3334
RUN npm run build:server
3435

‎src/components/Ayah/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@ export default class Ayah extends Component {
101101
className={`${styles.translation} translation`}
102102
key={index}
103103
>
104-
<h4 className="montserrat">Media: {content.resource.name}</h4>
105104
<h2 className="text-translation times-new">
106105
<small>
107106
<a
@@ -112,7 +111,7 @@ export default class Ayah extends Component {
112111
data-metrics-media-content-id={content.id}
113112
data-metrics-media-content-ayah-key={ayah.ayahKey}
114113
>
115-
Watch lecture
114+
Watch lecture by {content.resource.name}
116115
</a>
117116
</small>
118117
</h2>

‎src/components/Sidebar/index.js

+46
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

+26
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

+13-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { metrics } from 'react-metrics';
44
import { connect } from 'react-redux';
55
import { asyncConnect } from 'redux-connect';
66
import Helmet from 'react-helmet';
7-
87
import Modal from 'react-bootstrap/lib/Modal';
98
const ModalHeader = Modal.Header;
109
const ModalTitle = Modal.Title;
@@ -33,31 +32,32 @@ class App extends Component {
3332
};
3433

3534
render() {
36-
const { children, media, removeMedia } = this.props; // eslint-disable no-shadow
35+
const { children, media, removeMedia } = this.props; // eslint-disable-line no-shadow
3736
debug('component:APPLICATION', 'Render');
3837

3938
return (
4039
<div>
4140
<Helmet {...config.app.head} />
4241
<FontStyles />
43-
{React.cloneElement(children, {footer: <Footer />})}
42+
{children}
43+
<Footer />
4444
<Modal bsSize="large" show={!!media.content} onHide={removeMedia}>
4545
<ModalHeader closeButton>
4646
<ModalTitle className="montserrat">
4747
{media.content && media.content.resource.name}
4848
</ModalTitle>
4949
</ModalHeader>
5050
<ModalBody>
51-
{
52-
media.content &&
53-
<iframe
54-
width="100%"
55-
height="515"
56-
src={media.content.url}
57-
frameBorder="0"
58-
allowFullScreen
59-
/>
60-
}
51+
<div className="embed-responsive embed-responsive-16by9">
52+
{
53+
media.content &&
54+
<iframe
55+
className="embed-responsive-item"
56+
src={media.content.url}
57+
allowFullScreen
58+
/>
59+
}
60+
</div>
6161
</ModalBody>
6262
</Modal>
6363
</div>

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

+66-57
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

+1-1
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

+23-26
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

-14
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/helpers/ApiClient.js

+4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ function formatUrl(path) {
1818
return `${config.api}${adjustedPath}`;
1919
}
2020

21+
if (adjustedPath.startsWith('/onequran')) {
22+
return adjustedPath;
23+
}
24+
2125
return `/api${adjustedPath}`;
2226
}
2327

0 commit comments

Comments
 (0)
Please sign in to comment.