Env problems (#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
quran · Nov 21, 2016 · a092aa9 · a092aa9
1 parent bd518f9
commit a092aa9
Show file tree

Hide file tree

Showing 17 changed files with 192 additions and 131 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -29,6 +29,7 @@ RUN cp -a /tmp/node_modules /quran
 
 WORKDIR /quran
 ADD . /quran/
+
 RUN npm run build:client
 RUN npm run build:server
 

diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
@@ -101,7 +101,6 @@ export default class Ayah extends Component {
               className={`${styles.translation} translation`}
               key={index}
             >
-              <h4 className="montserrat">Media: {content.resource.name}</h4>
               <h2 className="text-translation times-new">
                 <small>
                   <a
@@ -112,7 +111,7 @@ export default class Ayah extends Component {
                     data-metrics-media-content-id={content.id}
                     data-metrics-media-content-ayah-key={ayah.ayahKey}
                   >
-                    Watch lecture
+                    Watch lecture by {content.resource.name}
                   </a>
                 </small>
               </h2>

diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
@@ -0,0 +1,46 @@
+import React, { PropTypes, Component } from 'react';
+
+const styles = require('./style.scss');
+
+class Sidebar extends Component {
+  static propTypes = {
+    open: PropTypes.bool.isRequired,
+    onSetOpen: PropTypes.func.isRequired,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    open: false
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (__CLIENT__ && nextProps.open) {
+      document.body.removeEventListener('click', this.onBodyClick.bind(this), true);
+      document.body.addEventListener('click', this.onBodyClick.bind(this), true);
+    }
+
+    return false;
+  }
+
+  onBodyClick = (event) => {
+    const { onSetOpen } = this.props;
+
+    if (!this.refs.container.contains(event.target)) {
+      return onSetOpen();
+    }
+
+    return false;
+  }
+
+  render() {
+    const { open, children } = this.props;
+
+    return (
+      <div ref="container" className={`${styles.container} ${open && styles.open}`}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Sidebar;
diff --git a/src/components/Sidebar/style.scss b/src/components/Sidebar/style.scss
@@ -0,0 +1,26 @@
+@import '../../styles/variables.scss';
+
+$width: 20%;
+
+.container{
+  position: fixed;
+  right: 100%;
+  top: 0px;
+  bottom: 0px;
+  background: #fff;
+  z-index: 9999;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+
+  background: #fff;
+  width: $width;
+
+  transition: right 0.3s;
+
+  @media(max-width: $screen-sm) {
+    width: 100% - $width;
+  }
+
+  &.open{
+    right: 100% - $width;
+  }
+}
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
@@ -4,7 +4,6 @@ import { metrics } from 'react-metrics';
 import { connect } from 'react-redux';
 import { asyncConnect } from 'redux-connect';
 import Helmet from 'react-helmet';
-
 import Modal from 'react-bootstrap/lib/Modal';
 const ModalHeader = Modal.Header;
 const ModalTitle = Modal.Title;
@@ -33,31 +32,32 @@ class App extends Component {
   };
 
   render() {
-    const { children, media, removeMedia } = this.props; // eslint-disable no-shadow
+    const { children, media, removeMedia } = this.props; // eslint-disable-line no-shadow
     debug('component:APPLICATION', 'Render');
 
     return (
       <div>
         <Helmet {...config.app.head} />
         <FontStyles />
-        {React.cloneElement(children, {footer: <Footer />})}
+        {children}
+        <Footer />
         <Modal bsSize="large" show={!!media.content} onHide={removeMedia}>
           <ModalHeader closeButton>
             <ModalTitle className="montserrat">
               {media.content && media.content.resource.name}
             </ModalTitle>
           </ModalHeader>
           <ModalBody>
-            {
-              media.content &&
-                <iframe
-                  width="100%"
-                  height="515"
-                  src={media.content.url}
-                  frameBorder="0"
-                  allowFullScreen
-                />
-            }
+            <div className="embed-responsive embed-responsive-16by9">
+              {
+                media.content &&
+                  <iframe
+                    className="embed-responsive-item"
+                    src={media.content.url}
+                    allowFullScreen
+                  />
+              }
+            </div>
           </ModalBody>
         </Modal>
       </div>

diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
@@ -1,12 +1,14 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
 import Navbar from 'react-bootstrap/lib/Navbar';
 const Header = Navbar.Header;
 
 import debug from '../../../helpers/debug';
 
-const ornamentLeft = require('../../../../static/images/ornament-left.png');
-const ornamentRight = require('../../../../static/images/ornament-right.png');
+// const ornamentLeft = require('../../../../static/images/ornament-left.png');
+// const ornamentRight = require('../../../../static/images/ornament-right.png');
 
 const styles = require('./style.scss');
 
@@ -16,61 +18,68 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
   return (
     <Navbar className="montserrat surah" fixedTop fluid>
       <Header>
-        <button type="button" className="navbar-toggle collapsed" onClick={handleToggleSidebar}>
-          <span className="sr-only">Toggle navigation</span>
-          <span className="icon-bar"></span>
-          <span className="icon-bar"></span>
-          <span className="icon-bar"></span>
-        </button>
-        <ul className={`list-inline ${styles.container}`}>
-          <li className={styles.verticalAlign}>
-            {/* <img
-              src={ornamentLeft}
-              className={`${styles.ornament} pull-left hidden-xs hidden-sm`}
-              alt="Ornament left"
-            /> */}
-            {
-              surah.id > 1 &&
-                <Link
-                  data-metrics-event-name="Title:PreviousSurah"
-                  className="navbar-text previous-chapter"
-                  to={`/${surah.id - 1}`}
-                >
-                  <i
-                    data-metrics-event-name="Title:PreviousSurah"
-                    className="ss-icon ss-navigateleft"
-                  />
-                  <span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
-                </Link>
-            }
-          </li>
-          <li className={styles.verticalAlign}>
-            {
-              surah &&
-                <p className="navbar-text text-uppercase surah-name">
-                  {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
-                </p>
-            }
-          </li>
-          <li className={styles.verticalAlign}>
-            {
-              surah.id < 114 &&
-                <Link
-                  data-metrics-event-name="Title:NextSurah"
-                  className="navbar-text next-chapter"
-                  to={`/${surah.id + 1}`}
-                >
-                  <span className="hidden-xs hidden-sm">NEXT SURAH </span>
-                  <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
-                </Link>
-            }
-            {/* <img
-              src={ornamentRight}
-              className={`${styles.ornament} hidden-xs hidden-sm`}
-              alt="Ornament right"
-            /> */}
-          </li>
-        </ul>
+        <Row>
+          <Col xs={1}>
+            <button type="button" className="navbar-toggle collapsed" onClick={handleToggleSidebar}>
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+          </Col>
+          <Col xs={10}>
+            <ul className={`list-inline ${styles.container} text-center`}>
+              <li className={styles.verticalAlign}>
+                {/* <img
+                  src={ornamentLeft}
+                  className={`${styles.ornament} pull-left hidden-xs hidden-sm`}
+                  alt="Ornament left"
+                /> */}
+                {
+                  surah.id > 1 &&
+                    <Link
+                      data-metrics-event-name="Title:PreviousSurah"
+                      className="navbar-text previous-chapter"
+                      to={`/${surah.id - 1}`}
+                    >
+                      <i
+                        data-metrics-event-name="Title:PreviousSurah"
+                        className="ss-icon ss-navigateleft"
+                      />
+                      <span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
+                    </Link>
+                }
+              </li>
+              <li className={styles.verticalAlign}>
+                {
+                  surah &&
+                    <p className="navbar-text text-uppercase surah-name">
+                      {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
+                    </p>
+                }
+              </li>
+              <li className={styles.verticalAlign}>
+                {
+                  surah.id < 114 &&
+                    <Link
+                      data-metrics-event-name="Title:NextSurah"
+                      className="navbar-text next-chapter"
+                      to={`/${surah.id + 1}`}
+                    >
+                      <span className="hidden-xs hidden-sm">NEXT SURAH </span>
+                      <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
+                    </Link>
+                }
+                {/* <img
+                  src={ornamentRight}
+                  className={`${styles.ornament} hidden-xs hidden-sm`}
+                  alt="Ornament right"
+                /> */}
+              </li>
+            </ul>
+          </Col>
+        </Row>
+
       </Header>
     </Navbar>
   );

diff --git a/src/containers/Surah/Header/style.scss b/src/containers/Surah/Header/style.scss
@@ -2,7 +2,7 @@
 
 .container{
   margin: 0px;
-  width: 80%;
+  width: 100%;
   margin-left: 15px;
   display: inline-block;
 }

diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -13,7 +13,7 @@ import Navbar from 'react-bootstrap/lib/Navbar';
 const NavbarHeader = Navbar.Header;
 
 import Helmet from 'react-helmet';
-import Sidebar from 'react-sidebar';
+import Sidebar from 'components/Sidebar';
 
 // components
 import LazyLoad from 'components/LazyLoad';
@@ -428,35 +428,32 @@ class Surah extends Component {
         />
         <Header surah={surah} handleToggleSidebar={() => this.setState({sidebarOpen: true})} />
         <Sidebar
-          sidebarClassName={style.sidebar}
-          sidebar={this.renderSidebar()}
           open={this.state.sidebarOpen}
           onSetOpen={(open) => this.setState({sidebarOpen: open})}
-          styles={{sidebar: {zIndex: 9999}}}
         >
-          <div className={`container-fluid ${style['surah-container']}`}>
-            <Row>
-              <SurahInfo
-                surah={surah}
-                isShowingSurahInfo={options.isShowingSurahInfo}
-                onClose={this.handleSurahInfoToggle}
-              />
-              <Col md={10} mdOffset={1}>
-                <TopOptions options={options} actions={actions} surah={surah} />
-                <Bismillah surah={surah} />
-                {options.isReadingMode ? this.renderLines() : this.renderAyahs()}
-              </Col>
-              <Col md={10} mdOffset={1}>
-                {this.renderPagination()}
-              </Col>
-            </Row>
-          </div>
-          <Audioplayer
-            surah={surah}
-            onLoadAyahs={this.handleLazyLoadAyahs}
-          />
-          {footer}
+          {this.renderSidebar()}
         </Sidebar>
+        <div className={`container-fluid ${style['surah-container']}`}>
+          <Row>
+            <SurahInfo
+              surah={surah}
+              isShowingSurahInfo={options.isShowingSurahInfo}
+              onClose={this.handleSurahInfoToggle}
+            />
+            <Col md={10} mdOffset={1}>
+              <TopOptions options={options} actions={actions} surah={surah} />
+              <Bismillah surah={surah} />
+              {options.isReadingMode ? this.renderLines() : this.renderAyahs()}
+            </Col>
+            <Col md={10} mdOffset={1}>
+              {this.renderPagination()}
+            </Col>
+          </Row>
+        </div>
+        <Audioplayer
+          surah={surah}
+          onLoadAyahs={this.handleLazyLoadAyahs}
+        />
       </div>
     );
   }

diff --git a/src/containers/Surah/style.scss b/src/containers/Surah/style.scss
@@ -33,17 +33,3 @@
     padding-top: 100px;
   }
 }
-
-.sidebar{
-  background: #fff;
-  width: 30%;
-
-  @media(max-width: $screen-sm) {
-    width: 80%;
-
-    .sidebarTitle{
-      margin-left: 15px;
-    }
-
-  }
-}
diff --git a/src/helpers/ApiClient.js b/src/helpers/ApiClient.js
@@ -18,6 +18,10 @@ function formatUrl(path) {
     return `${config.api}${adjustedPath}`;
   }
 
+  if (adjustedPath.startsWith('/onequran')) {
+    return adjustedPath;
+  }
+
   return `/api${adjustedPath}`;
 }