Improved UI for Juz tab and fixes

package.json

@@ -107,7 +107,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.78",
+    "quran-components": "^0.0.80",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

src/components/Audioplayer/Track/index.js

@@ -16,8 +16,7 @@ const Progress = styled.div`
   position: relative;
   padding-left: 12px;
 
-
-  &:after{
+  &:after {
     content: '';
     height: 12px;
     width: 12px;
@@ -27,7 +26,7 @@ const Progress = styled.div`
     display: block;
     background: #fff;
     top: -3px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
     transition: height 0.5s;
   }
 `;

src/components/Audioplayer/index.js

@@ -64,12 +64,14 @@ export class Audioplayer extends Component {
       audio
     });
 
-    load({
-      chapterId: nextVerse.chapterId,
-      verseId: nextVerse.id,
-      verseKey: nextVerse.verseKey,
-      audio
-    });
+    if (nextVerse) {
+      load({
+        chapterId: nextVerse.chapterId,
+        verseId: nextVerse.id,
+        verseKey: nextVerse.verseKey,
+        audio
+      });
+    }
 
     return false;
   }
@@ -480,18 +482,20 @@ export class Audioplayer extends Component {
           style.isPlaying} ${style.container} ${className}`}
       >
         <Wrapper>
-          {currentFile &&
+          {currentFile && (
             <Track
               progress={currentTime / duration * 100}
               onTrackChange={this.handleTrackChange}
-            />}
+            />
+          )}
           {segments &&
-            segments[currentVerse.verseKey] &&
-            <Segments
-              segments={segments[currentVerse.verseKey]}
-              currentVerse={currentVerse.verseKey}
-              currentTime={currentTime}
-            />}
+            segments[currentVerse.verseKey] && (
+              <Segments
+                segments={segments[currentVerse.verseKey]}
+                currentVerse={currentVerse.verseKey}
+                currentTime={currentTime}
+              />
+            )}
         </Wrapper>
         <ul className="list-inline" style={{ margin: 0 }}>
           <ControlItem>
@@ -501,15 +505,9 @@ export class Audioplayer extends Component {
             />
             : {currentVerse.verseKey.split(':')[1]}
           </ControlItem>
-          <ControlItem>
-            {this.renderPreviousButton()}
-          </ControlItem>
-          <ControlItem>
-            {this.renderPlayStopButtons()}
-          </ControlItem>
-          <ControlItem>
-            {this.renderNextButton()}
-          </ControlItem>
+          <ControlItem>{this.renderPreviousButton()}</ControlItem>
+          <ControlItem>{this.renderPlayStopButtons()}</ControlItem>
+          <ControlItem>{this.renderNextButton()}</ControlItem>
           <ControlItem>
             <RepeatDropdown
               repeat={repeat}

src/components/Audioplayer/style.scss

@@ -8,9 +8,9 @@
   z-index: 1;
   padding: 10px 20px 5px;
   background: #fff;
-  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
   min-width: 340px;
-  @media(max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     bottom: 0;
     width: 100%;
   } // border: 0.08333rem solid transparent !important;
@@ -20,7 +20,7 @@
   width: 100%;
   display: inline-block;
   cursor: pointer;
-  padding-right: 1.5%;
+  padding: 0 10px;
   color: $text-color;
   outline: none;
   &:focus,
@@ -53,21 +53,21 @@
 }
 
 .popover {
-   :global(.popover-title) {
+  :global(.popover-title) {
     font-family: $font-montserrat;
     text-transform: uppercase;
     color: $cream;
     padding-top: 15px;
     padding-bottom: 15px;
     font-size: 0.75em;
   }
-   :global(.popover-content) {
-     :global(a) {
+  :global(.popover-content) {
+    :global(a) {
       font-size: 0.8em;
     }
   }
   .pill {
-     :global(a) {
+    :global(a) {
       padding: 10px 15px;
     }
   }

src/components/Footer/index.js

@@ -147,8 +147,7 @@ const Footer = () => (
                 .
               </p>
               <p className="monserrat">
-                © { new Date().getFullYear() } Quran.com.
-                {' '}
+                © {new Date().getFullYear()} Quran.com.{' '}
                 <LocaleFormattedMessage
                   id="nav.rightsReserved"
                   defaultMessage="All Rights Reserved"

src/components/GlobalNav/Surah/index.js

@@ -22,9 +22,9 @@ class GlobalNavSurah extends Component {
   handleVerseDropdownClick = (verseNum) => {
     const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow
 
-    this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
-
     if (versesIds.has(verseNum)) {
+      this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
+
       return false;
     }
 

src/components/GlobalSidebar/index.js

@@ -12,20 +12,20 @@ const NavbarHeader = Navbar.Header;
 const List = styled.ul`
   padding-left: 0;
 
-  li{
+  li {
     color: #777;
 
-    a{
+    a {
       color: #777;
       padding: 10px 15px;
       display: block;
 
-      .ss-icon{
+      .ss-icon {
         font-size: 18px;
         margin-right: 20px;
       }
 
-      &:hover{
+      &:hover {
         background: #f5f5f5;
         color: #333;
       }

src/components/GlobalSidebar/style.scss

@@ -1,37 +1,68 @@
 @import '../../styles/variables.scss';
+
 $width: 280px;
-.container {
+
+.container{
   position: fixed;
   left: $width * -1;
   top: 0;
   bottom: 0;
   background: #fff;
   z-index: 1031;
-  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2);
   visibility: hidden;
+
   background: #fff;
   width: $width;
-  transition: left 0.35s cubic-bezier(0.24, 1, 0.32, 1), visibility 0.2s;
-  &.open {
+  transition: left 0.35s cubic-bezier(0.24,1,0.32,1), visibility 0.2s;
+
+  &.open{
     left: 0;
-    visibility: visible;
-    ;
+    visibility: visible;;
   }
-   :global(.navbar-text) {
+
+  :global(.navbar-text){
     margin-left: 0;
-    .backToHome {
-      margin-right: 23px;
-      font-size: 17px;
-    }
+      .backToHome {
+          margin-right: 23px;
+          font-size: 17px;
+      }
   }
+
   @media(max-width: $screen-sm) {
     width: $width;
     left: -1 * $width;
-    &.open {
+
+    &.open{
       left: 0;
     }
-     :global(.navbar-text) {
+
+    :global(.navbar-text){
       padding-left: 15px;
     }
   }
 }
+
+.list{
+  padding-left: 0;
+
+  :global(li){
+    color: #777;
+
+    :global(a){
+      color: #777;
+      padding: 10px 15px;
+      display: block;
+
+      :global(.ss-icon){
+        font-size: 18px;
+        margin-right: 20px;
+      }
+
+      &:hover{
+        background: #f5f5f5;
+        color: #333;
+      }
+    }
+  }
+}

src/components/Home/JuzList/index.js

@@ -11,22 +11,40 @@ class JuzList extends Component {
     const juzzChapters = Object.keys(juz.verseMapping);
 
     const list = juzzChapters.map(chapter => (
-      <div className={`col-xs-10 col-xs-offset-2 ${styles.translated_name}`}>
-        <span className={'text-uppercase'}>
-          {chapters[chapter].nameSimple}
-        </span>
-        <span>
-          <Link
-            to={`/${chapter}/${juz.verseMapping[chapter]}`}
-            className={`${styles.link} row`}
+      <div className={`col-md-12 ${styles.translated_name}`}>
+        <Link
+          to={`/${chapter}/${juz.verseMapping[chapter]}`}
+          className={`${styles.link} row`}
+        >
+          <div className="col-xs-9">
+            <span className={styles.chapterName}>
+              {chapters[chapter].nameSimple}
+            </span>
+
+            <span className="h5">
+              <small>{juz.verseMapping[chapter]}</small>
+            </span>
+          </div>
+          <div className={`col-xs-3 text-left ${styles.arabic}`}>
+            <span className={`icon-surah${chapters[chapter].id}`} />
+          </div>
+
+          <div
+            className={`col-xs-10 text-uppercase ${styles.translated_name} ${chapters[chapter].languageName}`}
           >
-            {juz.verseMapping[chapter]}
-          </Link>
-        </span>
+            <small>{chapters[chapter].translatedName.name}</small>
+          </div>
+        </Link>
       </div>
     ));
 
-    return list;
+    return (
+      <div className="col-md-10">
+        <div className="row">
+          {list}
+        </div>
+      </div>
+    );
   }
 
   render() {
@@ -36,14 +54,10 @@ class JuzList extends Component {
     return (
       <ul className="col-md-4 list-unstyled">
         {juzs.map(juz => (
-          <li className={`${styles.item}`} key={juz.juzNumber}>
-            <div className="col-xs-2 text-muted">
+          <li className={`${styles.item} row`} key={juz.juzNumber}>
+            <div className="col-xs-2 col-md-1 text-muted">
               {juz.juzNumber}
             </div>
-            <div className="col-xs-7">
-              {juz.nameArabic}
-              {juz.nameSimple}
-            </div>
             {this.renderJuz(juz)}
           </li>
         ))}

src/components/Home/JuzList/styles.scss

@@ -3,19 +3,26 @@
 .item {
   color: $brand-primary;
 
-  &:hover {
-    background: #f1f1f1;
-  }
-
   .link {
     display: block;
     padding: 10px 10px;
+
+    &:hover {
+      background: #f1f1f1;
+    }
   }
 
   .translated_name {
     font-size: 10px;
+    color: #777;
   }
+
   .arabic {
     font-size: 14px;
   }
+
+  .chapterName{
+    margin-right: 5px;
+    font-size: 14px;
+  }
 }

src/components/Home/LastVisit/index.js

@@ -15,13 +15,10 @@ const LastVisit = (props) => {
         <LocaleFormattedMessage
           id="surah.index.continue"
           defaultMessage="Continue"
-        />
-        {' '}
+        />{' '}
         <Link to={`/${props.chapter.chapterNumber}/${props.verse}`}>
           <span>
-            {props.chapter.nameSimple}
-            {' '}
-            (
+            {props.chapter.nameSimple} (
             {props.chapter.chapterNumber}
             :
             {props.verse}