From 30a7015907f2298a72605bc6a94cec8bc7ebb010 Mon Sep 17 00:00:00 2001
From: Sabeur Thabti <thabti.sabeur@gmail.com>
Date: Wed, 6 Jul 2016 03:09:18 +0100
Subject: [PATCH] - ayah's have link (discuss, maybe not needed) (#379)

- Fix audio player playing text
- Remove unneeded padding on mobile
- Hide Share on mobile devices (native share is built into the browsers)
---
 src/components/Audioplayer/style.scss | 1 -
 src/components/Ayah/index.js          | 8 +++++++-
 src/components/Share/index.js         | 2 +-
 src/components/Share/style.scss       | 6 +++---
 src/components/SurahInfo/style.scss   | 5 +++++
 src/containers/Home/style.scss        | 4 ++++
 src/containers/Surah/index.js         | 1 -
 7 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Audioplayer/style.scss b/src/components/Audioplayer/style.scss
index 7bc80fe37..4c30b6689 100644
--- a/src/components/Audioplayer/style.scss
+++ b/src/components/Audioplayer/style.scss
@@ -33,7 +33,6 @@
   text-align: center;
 
   :global(li){
-    padding-left: 15px;
     padding-right: 15px;
     display: table-cell;
   }
diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index 236562954..a7dcc67a9 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -189,7 +189,13 @@ export default class Ayah extends Component {
       );
     }
 
-    return content;
+    return (
+      <Link
+        to={`/${this.props.ayah.surahId}:${this.props.ayah.ayahNum}`}
+        data-metrics-event-name="Ayah:Link"
+      >
+        {content}
+      </Link>);
   }
 
   renderControls() {
diff --git a/src/components/Share/index.js b/src/components/Share/index.js
index aa26cc3c8..9a18e2d8e 100644
--- a/src/components/Share/index.js
+++ b/src/components/Share/index.js
@@ -18,7 +18,7 @@ export default class Share extends Component {
     const surahUrl = encodeURIComponent(`http://quran.com/${surahId}`);
 
     return (
-      <div className={Style.shareContainer}>
+      <div className={`${Style.shareContainer} hidden-xs`}>
 
         <i
           onClick={() => this.onClickPopup(`https://www.facebook.com/sharer/sharer.php?u=${surahUrl}`, 'Facebook')}
diff --git a/src/components/Share/style.scss b/src/components/Share/style.scss
index 00aaec617..2c75b9202 100644
--- a/src/components/Share/style.scss
+++ b/src/components/Share/style.scss
@@ -1,7 +1,9 @@
+@import '../../styles/variables';
+
 .shareContainer {
   position: relative;
-  bottom: 2px;
   left: 5px;
+  top: 2px;
 
   .iconContainer {
     padding: 0 30px 10px 0;
@@ -30,5 +32,3 @@
   }
 
 }
-
-
diff --git a/src/components/SurahInfo/style.scss b/src/components/SurahInfo/style.scss
index c7bdc2f98..0ed2fea89 100644
--- a/src/components/SurahInfo/style.scss
+++ b/src/components/SurahInfo/style.scss
@@ -9,6 +9,11 @@ $transition-speed: 0.75s;
   min-height: 0px;
   transition: max-height $transition-speed, height $transition-speed;
 
+
+  @media(max-width: $screen-xs-max) {
+    margin-bottom: 0;
+  }
+
   &.show{
     max-height: 600px;
     max-height: 70vh;
diff --git a/src/containers/Home/style.scss b/src/containers/Home/style.scss
index e500bd3e3..a84815c37 100644
--- a/src/containers/Home/style.scss
+++ b/src/containers/Home/style.scss
@@ -5,6 +5,10 @@
     padding: 50px 0px;
     font-size: 14px;
     margin: 0px;
+
+    @media(max-width: $screen-xs-max) {
+      padding: 10px 0;
+    }
   }
 
   .lastVisit{
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 0364b0f5b..b600945ab 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -398,7 +398,6 @@ export default class Surah extends Component {
                 onReadingModeToggle={toggleReadingMode}
               />
             </li>
-            <li>|</li>
             <li><Share surah={surah} /></li>
           </ul>
         </Col>