quran · mmahalwy · Nov 17, 2016 · Nov 17, 2016
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "react-router-redux": "4.0.5",
     "react-router-scroll": "0.2.1",
     "react-scroll": "1.2.0",
+    "react-sidebar": "2.2.1",
     "redux": "3.5.2",
     "redux-connect": "2.4.0",
     "reselect": "2.5.3",

diff --git a/src/components/Audioplayer/ScrollButton/index.js b/src/components/Audioplayer/ScrollButton/index.js
@@ -16,13 +16,14 @@ const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
       <input type="checkbox" id="scroll" className={style.checkbox} />
       <OverlayTrigger
         overlay={tooltip}
-        placement="right"
+        placement="top"
         trigger={['hover', 'focus']}
       >
         <label
           htmlFor="scroll"
           className={`pointer ${style.buttons} ${shouldScroll ? style.scroll : ''}`}
           onClick={onScrollToggle}
+          style={{marginBottom: 0}}
         >
           <i className="ss-icon ss-link" />
         </label>

diff --git a/src/components/Audioplayer/Track/index.js b/src/components/Audioplayer/Track/index.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-const style = require('./style.scss');
+const styles = require('./style.scss');
 
 export default class Track extends Component {
   static propTypes = {
@@ -9,7 +9,6 @@ export default class Track extends Component {
   };
 
   handleClick = (event) => {
-    console.log(this.refs.container.getBoundingClientRect());
     const { onTrackChange } = this.props;
 
     const fraction = (
@@ -24,8 +23,8 @@ export default class Track extends Component {
     const { progress } = this.props;
 
     return (
-      <div ref="container" className={style.track} onClick={this.handleClick}>
-        <div className={style.progress} style={{width: `${progress}%`}} />
+      <div ref="container" className={styles.container} onClick={this.handleClick}>
+        <div className={styles.progress} style={{width: `${progress}%`}}/>
       </div>
     );
   }

diff --git a/src/components/Audioplayer/Track/style.scss b/src/components/Audioplayer/Track/style.scss
@@ -1,18 +1,19 @@
 @import '../../../styles/variables.scss';
 
-:local .track{
-  background-color: $olive;
-  display: block;
-  height: 100%;
+.container{
+  height: 6px;
   width: 100%;
-  user-select: none;
+  background-color: #f7f7f7;
   cursor: pointer;
+  margin-bottom: 5px;
 }
 
 .progress{
-  background: $brand-primary;
-  position: relative;
   height: 100%;
+  background-color: $brand-primary;
+  position: relative;
+  padding-left: 12px;
+
 
   &:after{
     content: '';
@@ -23,7 +24,7 @@
     right: 0px;
     display: block;
     background: #fff;
-    top: -5px;
+    top: -3px;
     box-shadow: 0 1px 2px rgba(0,0,0,0.45);
     transition: height 0.5s;
   }

diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
@@ -44,10 +44,6 @@ export class Audioplayer extends Component {
     currentFile: PropTypes.object
   };
 
-  static defaultProps = {
-    className: 'col-md-3'
-  };
-
   componentDidMount() {
     const { isLoadedOnClient, buildOnClient, surah, currentFile } = this.props; // eslint-disable-line no-shadow, max-len
 
@@ -340,7 +336,7 @@ export class Audioplayer extends Component {
     }
 
     return (
-      <a className={`pointer ${style.buttons}`} onClick={isPlaying ? pause : this.play}>
+      <a className={`pointer text-center ${style.playingButton} ${style.buttons}`} onClick={isPlaying ? pause : this.play}>
         {icon}
       </a>
     );
@@ -388,6 +384,7 @@ export class Audioplayer extends Component {
       currentTime,
       duration,
       surah,
+      isPlaying,
       isLoadedOnClient,
       repeat, // eslint-disable-line no-shadow
       shouldScroll, // eslint-disable-line no-shadow
@@ -403,46 +400,46 @@ export class Audioplayer extends Component {
     }
 
     return (
-      <div className={`${style.padding_left} ${style.container} ${className}`}>
-        <ul className={style.list}>
-          <li className={style.verse}>
-            Playing: {currentAyah.split(':')[1]}
+      <div className={`${isPlaying && style.isPlaying} ${style.container} ${className}`}>
+        <div className={style.wrapper}>
+          {isLoadedOnClient ?
+            <Track
+              progress={currentTime / duration * 100}
+              onTrackChange={this.handleTrackChange}
+            /> : null}
+          {isLoadedOnClient && segments[currentAyah] && typeof segments[currentAyah] !== 'string' ?
+            <Segments
+              audio={currentFile}
+              segments={segments[currentAyah]}
+              currentAyah={currentAyah}
+              currentTime={currentTime}
+            /> : null}
+        </div>
+        <ul className={`list-inline ${style.controls}`}>
+          <li className={style.controlItem}>
+            Ayah: {currentAyah.split(':')[1]}
           </li>
-          <li>
+          <li className={style.controlItem}>
             {this.renderPreviousButton()}
           </li>
-          <li>
+          <li className={style.controlItem}>
             {this.renderPlayStopButtons()}
           </li>
-          <li>
+          <li className={style.controlItem}>
             {this.renderNextButton()}
           </li>
-          <li>
+          <li className={style.controlItem}>
             <RepeatDropdown
               repeat={repeat}
               setRepeat={setRepeat}
               current={parseInt(currentAyah.split(':')[1], 10)}
               surah={surah}
             />
           </li>
-          <li>
+          <li className={style.controlItem}>
             <ScrollButton shouldScroll={shouldScroll} onScrollToggle={this.handleScrollToggle} />
           </li>
         </ul>
-        <div className={style.wrapper}>
-          {isLoadedOnClient ?
-            <Track
-              progress={currentTime / duration * 100}
-              onTrackChange={this.handleTrackChange}
-            /> : null}
-          {isLoadedOnClient && segments[currentAyah] && typeof segments[currentAyah] !== 'string' ?
-            <Segments
-              audio={currentFile}
-              segments={segments[currentAyah]}
-              currentAyah={currentAyah}
-              currentTime={currentTime}
-            /> : null}
-        </div>
       </div>
     );
   }

diff --git a/src/components/Audioplayer/style.scss b/src/components/Audioplayer/style.scss
@@ -1,22 +1,31 @@
 @import '../../styles/variables.scss';
 
-:local .container{
-  position:relative;
+.container{
+  position: fixed;
+  bottom: 15px;
   display: block;
   user-select: none;
-  height: 40px;
-  padding: 10px 20px;
+  height: auto;
+  padding: 10px 20px 5px;
+  background: #fff;
+  box-shadow: 0 0 0.5rem 0 rgba(0,0,0,.2);
+  min-width: 340px;
+  @media(max-width: $screen-sm){
+    bottom: 0px;
+    width: 100%;
+  }
+  // border: 0.08333rem solid transparent !important;
 }
 
-:local .wrapper{
+.wrapper{
   width: 100%;
   position: absolute;
-  top: 90%;
+  top: 0;
   left: 0px;
   height: 10%;
 }
 
-:local .options{
+.options{
   border-radius: 4px;
   width: 100%;
   display: inline-block;
@@ -25,6 +34,14 @@
   text-align: center;
 }
 
+.controls{
+  margin: 0px;
+  .controlItem{
+    vertical-align: middle;
+    padding-right: 20px;
+  }
+}
+
 .list{
   margin-bottom: 0px;
   display: table;
@@ -43,12 +60,24 @@
   display: inline-block;
   cursor: pointer;
   padding-right: 1.5%;
-  color: $olive;
+  color: $text-color;
   outline: none;
 
-  &.playing{
-    color: $brand-primary;
+  &.playingButton{
+    background: $brand-primary;
+    color: #fff;
+    height: 32px;
+    width: 32px;
+    padding: 8px;
+    border-radius: 50%;
+    position: relative;
+    vertical-align: middle;
+
+    &:hover{
+      opacity: 0.75;
+    }
   }
+
   i.fa{
     color: inherit;
     font-size: 100%;
@@ -65,7 +94,7 @@
   color: $brand-primary;
 }
 
-:local .disabled{
+.disabled{
   opacity: 0.5;
   cursor: not-allowed !important;
   pointer-events: none;
@@ -76,7 +105,7 @@
   color: $olive;
 }
 
-:local .popover{
+.popover{
   :global(.popover-title){
     font-family: $font-montserrat;
     text-transform: uppercase;

diff --git a/src/components/Ayah/style.scss b/src/components/Ayah/style.scss
@@ -62,8 +62,8 @@
       border-radius: 0px;
       display: inline-block;
       margin-bottom: 15px;
-      color: darken($text-muted, 30%);
       font-weight: 300;
+      color: $text-color;
 
       &:hover{
         opacity: 0.7;
@@ -112,7 +112,6 @@
   b, a{
     font-weight: 100;
     margin: 0px 2px;
-    white-space: pre;
     color: #000;
     &:hover{
       color: $brand-primary;

diff --git a/src/components/ContentDropdown/style.scss b/src/components/ContentDropdown/style.scss
@@ -27,28 +27,12 @@
   }
 }
 
-:global(.in) {
-  .item{
-    .label{
-      &:after, &:before{
-        color: $olive !important;
-        border-color: $olive !important;
-      }
-    }
-  }
-}
-
 .item{
   $checkbox-left: 20px;
   $checkbox-top: 9px;
   $checkbox-height: 12px;
   $checkbox-width: 12px;
 
-  .label{
-    color: lighten($cream, 15%);
-    font-weight: 300;
-  }
-
   .checkbox:not(:checked),
   .checkbox:checked {
     position: absolute;
@@ -72,7 +56,7 @@
     top: $checkbox-top;
     width: $checkbox-width;
     height: $checkbox-height;
-    border: 1px solid lighten($cream, 15%);
+    border: 1px solid $text-color;
     background: transparent;
   }
   /* checked mark aspect */
@@ -83,7 +67,7 @@
     top: $checkbox-top - 1;
     left: $checkbox-left + 2px;
     font-size: 10px;
-    color: lighten($cream, 15%);;
+    color: $text-color;
     transition: all .2s;
   }
   /* checked mark aspect changes */