binary-com · raunakkathuria · Aug 24, 2015 · Aug 21, 2015 · Aug 21, 2015 · Aug 21, 2015
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,7 +1,6 @@
 module.exports = function (grunt) {
 
     require('time-grunt')(grunt);
-    //require('grunt-notify')(grunt);
 
     require('load-grunt-config')(grunt, {
         configPath: process.cwd() + '/build',

diff --git a/build/aliases.yaml b/build/aliases.yaml
@@ -1,6 +1,6 @@
 css:
   - 'sass'
-  - 'autoprefixer'
+  - 'postcss'
   - 'cssmin'
 
 js:

diff --git a/build/autoprefixer.js b/build/autoprefixer.js
diff --git a/build/postcss.js b/build/postcss.js
@@ -0,0 +1,10 @@
+module.exports = {
+    options: {
+        processors: [
+            require('autoprefixer-core')({browsers: ['last 2 version']})
+        ]
+    },
+    dist: {
+        src: 'dist/css/binary.css'
+    }
+};
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/binary-com/binary-static",
   "devDependencies": {
+    "autoprefixer-core": "^5.2.1",
     "grunt": "^0.4.5",
-    "grunt-autoprefixer": "^1.0.0",
     "grunt-bump": "^0.0.16",
     "grunt-cachebuster": "^0.1.5",
     "grunt-contrib-clean": "^0.5.0",
@@ -37,6 +37,7 @@
     "grunt-gh-pages": "^0.9.1",
     "grunt-json-merge": "^0.2.2",
     "grunt-notify": "^0.3.1",
+    "grunt-postcss": "^0.5.5",
     "grunt-shell": "^0.7.0",
     "grunt-uncss": "^0.3.5",
     "load-grunt-config": "^0.13.1",

diff --git a/src/javascript/binary/pages/trade/common.js b/src/javascript/binary/pages/trade/common.js
@@ -261,3 +261,38 @@ var displayPriceMovement = function (element, oldValue, currentValue) {
         element.classList.add('price_moved_down');
     }
 };
+
+/*
+ * function to toggle active class of menu
+ */
+var toggleMobileNavMenu = function (nav, eventElement) {
+    var liElements = nav.getElementsByTagName("li");
+    var classes = eventElement.classList;
+
+    if (!classes.contains('active')) {
+        for (var i = 0, len = liElements.length; i < len; i++){
+            liElements[i].classList.remove('active');
+        }
+        classes.add('active');
+    }
+};
+
+/*
+ * function to set placeholder text based on current market, used for mobile menu
+ */
+var setMarketPlaceholderContent = function (name) {
+    var marketPlaceholder = document.getElementById('market_nav_placeholder');
+    if (marketPlaceholder) {
+        marketPlaceholder.textContent = name || sessionStorage.getItem('market');
+    }
+};
+
+/*
+ * function to set placeholder text based on current form, used for mobile menu
+ */
+var setFormPlaceholderContent = function (name) {
+    var formPlaceholder = document.getElementById('contract_form_nav_placeholder');
+    if (formPlaceholder) {
+        formPlaceholder.textContent = name || sessionStorage.getItem('formname');
+    }
+};
diff --git a/src/javascript/binary/pages/trade/event.js b/src/javascript/binary/pages/trade/event.js
@@ -6,39 +6,51 @@ var marketNavElement = document.getElementById('contract_market_nav');
 if (marketNavElement) {
     marketNavElement.addEventListener('click', function(e) {
         if (e.target && e.target.nodeName === 'LI') {
-            sessionStorage.setItem('market', e.target.id);
+            var clickedMarket = e.target;
+            var isMarketActive = clickedMarket.classList.contains('active');
+            sessionStorage.setItem('market', clickedMarket.id);
+
+            setMarketPlaceholderContent();
+
             // as different markets have different forms so remove from sessionStorage
             // it will default to proper one
             sessionStorage.removeItem('formname');
-            marketChangeEvent();
+            toggleMobileNavMenu(marketNavElement, clickedMarket);
+            // if market is already active then no need to send same request again
+            if (!isMarketActive) {
+                processMarketOfferings();
+            }
+            var marketFormCheckbox = document.getElementById('market_show_menu');
+            if (marketFormCheckbox) {
+                marketFormCheckbox.checked = false;
+            }
         }
     });
 }
 
-var marketChangeEvent = function () {
-    'use strict';
-    processMarketOfferings();
-};
-
 /*
  * attach event to form list, so when client click on different form we need to update form
  * and request for new Contract details to populate the form and request price accordingly
  */
 var formNavElement = document.getElementById('contract_form_name_nav');
-var removeActiveFormNav = function () {
-    var liElements = formNavElement.getElementsByTagName("li");
-    for (var i = 0, len = liElements.length; i < len; i++){
-        liElements[i].classList.remove('active');
-    }
-};
-
 if (formNavElement) {
     formNavElement.addEventListener('click', function(e) {
         if (e.target && e.target.nodeName === 'LI') {
-            removeActiveFormNav();
-            sessionStorage.setItem('formname', e.target.id);
-            e.target.classList.add('active');
-            contractFormEventChange(e.target.id);
+            var clickedForm = e.target;
+            var isFormActive = clickedForm.classList.contains('active');
+            sessionStorage.setItem('formname', clickedForm.id);
+
+            setFormPlaceholderContent();
+            // if form is already active then no need to send same request again
+            toggleMobileNavMenu(formNavElement, clickedForm);
+
+            if (!isFormActive) {
+                contractFormEventChange(clickedForm.id);
+            }
+            var contractFormCheckbox = document.getElementById('contract_form_show_menu');
+            if (contractFormCheckbox) {
+                contractFormCheckbox.checked = false;
+            }
         }
     });
 }

diff --git a/src/javascript/binary/pages/trade/message.js b/src/javascript/binary/pages/trade/message.js
@@ -17,11 +17,11 @@ var Message = (function () {
                 processMarketOfferings();
             } else if (type === 'contracts_for') {
                 processContractFormOfferings(response);
-                hideOverlayContainer();
             } else if (type === 'payout_currencies') {
                 sessionStorage.setItem('currencies', msg.data);
                 displayCurrencies();
             } else if (type === 'proposal') {
+                hideOverlayContainer();
                 Price.display(response, Contract.contractType()[Offerings.form()]);
                 hidePriceLoadingIcon();
             } else if (type === 'open_receipt') {

diff --git a/src/javascript/binary/pages/trade/process.js b/src/javascript/binary/pages/trade/process.js
@@ -12,9 +12,16 @@ var processMarketOfferings = function () {
     // populate the Offerings object
     Offerings.details(JSON.parse(offerings), market.charAt(0).toUpperCase() + market.substring(1), formname);
 
+    // change the market placeholder content as per current market (used for mobile menu)
+    setMarketPlaceholderContent(market);
+
     // display markets, submarket, underlyings corresponding to market selected
     displayListElements('contract_market_nav', Offerings.markets().sort(compareMarkets), market);
     displayListElements('contract_form_name_nav', Object.keys(Offerings.contractForms()).sort(compareContractCategory), formname);
+
+    // change the form placeholder content as per current form (used for mobile menu)
+    setFormPlaceholderContent(formname);
+
     displayOptions('submarket',Offerings.submarkets());
     displayUnderlyings();
 

diff --git a/src/sass/trade/trade.scss b/src/sass/trade/trade.scss
@@ -2,12 +2,7 @@
     from {transform: rotate(0deg);}
     to {transform: rotate(360deg);}
 }
-@-webkit-keyframes spinning {
-    from {transform: rotate(0deg);}
-    to {transform: rotate(360deg);}
-}
 .spinner {
-    -webkit-animation: spinning .2s * 5 infinite linear;
     animation: spinning .2s * 5 infinite linear;
 }
 
@@ -34,24 +29,54 @@
     flex-direction: column;
 }
 
+.nav_placeholder {
+    display: none;
+    overflow: hidden;
+    width: 100%;
+    background-color: $COLOR_BLUE;
+    padding: 3px 0 3px 10px;
+    margin: 10px 0;
+    color: $COLOR_WHITE;
+    text-transform: capitalize;
+}
+
+.nav_placeholder:after {
+    content: '\25BC';
+    font-size: 50%;
+    right: 0;
+    position:absolute;
+    margin-right: 10px;
+}
+
+input[type=checkbox].show_menu {
+    display: none;
+}
+
+input[type=checkbox]#market_show_menu:checked ~ #contract_market_nav {
+    display: flex;
+}
+
+input[type=checkbox]#contract_form_show_menu:checked ~ #contract_form_name_nav {
+    display: flex;
+}
+
 ul[role=segmented] {
     box-shadow: inset 0px 0px 0px 1px rgba($COLOR_BLUE, 0.2);
     background-color: $COLOR_LIGHT_GRAY;
-    border-radius: $BORDER_RADIUS;
     color: $COLOR_BLUE;
     display: flex;
     overflow: hidden;
     margin-bottom: 1rem;
     width: 100%;
     li {
         flex: 1;
-        text-align: center;
         display: flex;
         flex-direction: column;
-        justify-content: center;
         cursor: pointer;
         margin: 0;
         text-transform: capitalize;
+        padding: 3px 0;
+        text-align: center;
         &.active {
             color: white;
             background-color: $COLOR_BLUE;
@@ -172,16 +197,13 @@ ul[role=segmented] {
     left: 45%;
 }
 
-@keyframes spin
-{
-    from { transform: rotate(0deg); opacity: 0.2; }
-    50%  { transform: rotate(180deg); opacity: 1; }
-    to   { transform: rotate(360deg); opacity: 0.2; }
-}
-
 @media all and (max-width: 640px) {
     ul[role=segmented] {
         flex-direction: column;
+        display: none;
+    }
+    .nav_placeholder {
+        display: flex;
     }
     #contract_container.row {
         flex-direction: column;

diff --git a/src/templates/toolkit/bet/static.html.tt b/src/templates/toolkit/bet/static.html.tt
@@ -1,11 +1,17 @@
-<div class="row" id="contract_market_container">
+<div id="contract_market_container">
+    <label for="market_show_menu" class="nav_placeholder" id="market_nav_placeholder"></label>
+    <input type="checkbox" class="show_menu" id="market_show_menu" role="button">
     <ul class="nav" id="contract_market_nav" role="segmented">
     </ul>
 </div>
-<div class="row" id="contract_market_form_container">
+
+<div id="contract_market_form_container">
+    <label for="contract_form_show_menu" class="nav_placeholder" id="contract_form_nav_placeholder"></label>
+    <input type="checkbox" class="show_menu" id="contract_form_show_menu" role="button">
     <ul class="nav" id="contract_form_name_nav" role="segmented">
     </ul>
 </div>
+
 <div class="row" id="contract_container">
     <div id="contract_form_container" class="big-col">
         <div id="contract_form_content">