Mixcloud player added.

ntslive · Sep 8, 2017 · cb3b104 · cb3b104
1 parent 161678d
commit cb3b104
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -80,7 +80,7 @@
     </div>
 
     <div class="header__radio-player">
-        <div class="header__radio-player__text primary-font">
+        <div class="header__radio-player__text primary-font hidden">
             <span id="before-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">Live Radio Broadcast 7th September 18:00 BST<span id="ellipsis" class="header-fuzzy-text header-fuzzy-text--dark"></span></span>
             <span id="during-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">
                 <i id="live-now-circle" class="fa fa-circle header-fuzzy-text header-fuzzy-text--red" aria-hidden="true"></i>
@@ -89,6 +89,10 @@
             <span id="after-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">Listen Back Available Here 8th September</span>
         </div>
 
+        <div class="header__mixcloud-container">
+            <iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2FNTSRadio%2Fmount-kimbie-7th-september-2017%2F&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>
+        </div>
+
         <div id="header__radio-player__handler--desktop" class="header__radio-player__handler hidden">
             <i id="radio-handler-icon-desktop" class="radio-handler-icon fa fa-play header-fuzzy-text header-fuzzy-text--dark" aria-hidden="true"></i>
             <span style="display: none; visibility: hidden;">
@@ -102,10 +106,10 @@
 
     <div class="header__right primary-font">
         <a id="pre-save-link" href="http://s.warp.net/lws-presave" target="_blank">
-            <span class="header-fuzzy-text">Pre-Save</span>
+            <span class="header-fuzzy-text">Save</span>
         </a>
         <a id="pre-order-link" href="http://s.warp.net/mk-survives" target="_blank">
-            <span class="header-fuzzy-text">Pre-Order</span>
+            <span class="header-fuzzy-text">BUY</span>
         </a>
     </div>
 </div>

diff --git a/public/css/style.min.css b/public/css/style.min.css
diff --git a/public/css/style.min.css.map b/public/css/style.min.css.map
diff --git a/public/js/app.min.js b/public/js/app.min.js
diff --git a/public/js/app.min.js.map b/public/js/app.min.js.map
diff --git a/react/RadioPlayerMobile/RadioPlayerMobile.jsx b/react/RadioPlayerMobile/RadioPlayerMobile.jsx
@@ -50,8 +50,7 @@ class RadioPlayerMobile extends React.Component {
                                 <div className="header-fuzzy-text header-fuzzy-text--dark">Love What Survives</div>
                             </span>
                             <span id="after-text-mobile" className="hidden">
-                                <div className="header-fuzzy-text header-fuzzy-text--dark">Listen Back Available Here</div>
-                                <div className="header-fuzzy-text header-fuzzy-text--dark">8th September</div>
+                                <iframe width="100%" height="" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2FNTSRadio%2Fmount-kimbie-7th-september-2017%2F&hide_cover=1&light=1" frameborder="0"></iframe>
                             </span>
                         </div>
                     </div>

diff --git a/style.scss b/style.scss
@@ -44,8 +44,8 @@ a {
 }
 
 .hidden {
-    display: none;
-    visibility: hidden;
+    display: none !important;
+    visibility: hidden !important;
 }
 
 $logo-size: 40px;
@@ -111,7 +111,11 @@ $header-padding: 5px;
     vertical-align: bottom;
 }
 .header__mixcloud-container {
-
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+    left: 71px;
+    right: 337px;
 }
 
 #pre-save-link, #pre-order-link {
@@ -367,6 +371,17 @@ img {
             padding-bottom: 6px;
         }
     }
+
+    #after-text-mobile {
+        iframe {
+            position: absolute;
+            top: 50%;
+            left: 0; right: 0;
+            transform: translateY(-20%);
+
+            border-style: none;
+        }
+    }
 }
 
 /** Misc **/