Merge pull request binary-com#1114 from negar-binary/negar/add_appstore

negar/add_appstore

Author: jy-deriv

src/javascript/binary/pages/trade/common.js

@@ -774,14 +774,19 @@ function displayTooltip(market, symbol){
     'use strict';
     var tip = document.getElementById('symbol_tip'),
         guide = document.getElementById('guideBtn'),
-        app = document.getElementById('androidApp');
+        app = document.getElementById('androidApp'),
+        appstore = document.getElementById('appstore');
     if (market.match(/^volidx/) || symbol.match(/^R/) || market.match(/^random_index/) || market.match(/^random_daily/)){
+        if (guide) guide.hide();
         tip.show();
         tip.setAttribute('target', page.url.url_for('/get-started/volidx-markets'));
         app.show();
+        appstore.show();
     } else {
       app.hide();
+      appstore.hide();
       tip.hide();
+      if (guide) guide.show();
     }
     if (market.match(/^otc_index/) || symbol.match(/^OTC_/) || market.match(/otc_stock/) || markets.by_symbol(symbol).submarket.name.match(/otc_stock/)){
         tip.show();

src/sass/pages/android_app.scss

@@ -1,22 +1,35 @@
-#androidApp {
+#app-container {
+  text-align: center;
+}
+
+#androidApp, #appstore {
   width: 100px;
   height: 30px;
   display: inline-block;
-  background: url("../images/pages/trade/google-play-badge.png") no-repeat;
-  background-size: 100px 30px;
   position: relative;
 }
 
+#appstore {
+  background: url("../images/pages/applications/appstore.svg") 0 0/100px 30px no-repeat;
+  margin-left: 10px;
+}
+
+#androidApp {
+  background: url("../images/pages/trade/google-play-badge.png") 0 0/100px 30px no-repeat;
+}
+
 /* trading page */
 #trading_socket_container {
-    #androidApp {
+    #androidApp, #appstore {
         float: if($LANGUAGE_DIRECTION == ltr, right, left);
     }
     @media (max-width: 768px) {
         #androidApp {
+          margin-left: 10px;
+        }
+        #appstore, #androidApp {
           margin: 0 auto;
           padding-bottom: 10px;
-          display: block;
           float: none;
         }
     }

src/templates/toolkit/bet/static.html.tt

@@ -3,7 +3,10 @@
    <div id="loading_container" class="overlay_container">
    </div>
    <div id="guideBtn"></div>
-   <a href="https://goo.gl/5KmSsU" target="_blank" id="androidApp"></a>
+   <div id="app-container">
+     <a href="https://itunes.apple.com/app/apple-store/id1091187567?pt=117911266&ct=trading_page&mt=8" target="_blank" id="appstore"></a>
+     <a href="https://goo.gl/5KmSsU" target="_blank" id="androidApp"></a>
+   </div>
    <div class="row" id="contract_symbol_container">
       <div id="contract_markets_container">
          <select id="contract_markets"></select>