Merge pull request #1195 from duckduckgo/jag/currency-mobile

Currency Mobile Update
duckduckgo · Oct 29, 2014 · 1cb36df · 1cb36df
2 parents 59afd6e + 90c0812
commit 1cb36df
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 31 deletions.
diff --git a/share/spice/currency/currency.css b/share/spice/currency/currency.css
@@ -22,26 +22,22 @@
         white-space: inherit;
     }
 
-    .is-mobile .zci--currency-second-part img {
-        height: 32px;
-        vertical-align: middle;
-        border: 0.2em solid #d0d0d0;
-        border-radius: 50%;
-        background-color: #d0d0d0;
-    }
-
     .is-mobile .zci--currency-first-part {
         text-align: center;
     }
 
-    .is-mobile .zci--currency-first-part img {
+    .is-mobile .zci--currency .tile--s img {
         height: 32px;
-        vertical-align: middle;
+        vertical-align: top;
         border: 0.2em solid #d0d0d0;
         border-radius: 50%;
         background-color: #d0d0d0;
     }
 
+    .is-mobile .zci--currency .tile--s.large img {
+        vertical-align: middle;
+    }
+
 .zci--currency-ratesinfo {
     border-left: 1px solid #d0d0d0;
     margin-top: 1.5em;
@@ -73,7 +69,10 @@
 
     .is-mobile .zci--currency-amount {
         font-size: 2.2em;
-        padding-top: 0.3em;
+    }
+
+    .is-mobile .large .zci--currency-amount {
+        display: block;
     }
 
 .zci--currency-symbol {
@@ -83,12 +82,36 @@
 }
 
     .is-mobile .zci--currency-symbol {
-        font-size: 1.2em;
+        font-size: 1em;
         font-weight: 300;
+    }
+
+    .is-mobile .zci--currency-symbol-large {
+        font-size: 1.2em;
         padding-left: 0.3em;
-        vertical-align: middle;
     }
 
+    .is-mobile .zci--currency-symbol-small {
+        display: none;
+    }
+
+    .is-mobile .zci--currency-symbol-large {
+        display: none;
+    }
+
+    .is-mobile .small .zci--currency-symbol-small {
+        display: initial;
+        vertical-align: top;
+        line-height: 27px;
+    }
+
+    .is-mobile .large .zci--currency-symbol-large {
+        display: initial;
+    }
+
+
+
+
 .zci--currency-equal {
     font-size: 2em;  
     margin: 0 0.5em;
@@ -99,7 +122,7 @@
     }
 
     .is-mobile .zci--currency-equal .horizontal {
-        border-bottom: 1px solid #d0d0d0;
+        border-bottom: 1px solid #dfdfdf;
         display: inline-block;
         width: 41%;
         vertical-align: 0.35em;
@@ -147,6 +170,9 @@
 .is-mobile .tile--s {
     padding-left: 0;
     padding-right: 0;
+    padding-top: 1.5em;
+    padding-bottom: 1.5em;
+    color: inherit;
 }
 
 .is-mobile .zci--currency .zci__metabar__more-at {
@@ -159,13 +185,13 @@
 
 .is-mobile .zci--currency .market-rates {
     float: left;
-    line-height: 1em;
+    line-height: 1.3em;
     padding-left: 0.5em;
     padding-top: 0.1em;
 }
 
 .is-mobile .zci--currency-ratesinfo-mobile .horizontal {
-    border-bottom: 1px solid #d0d0d0;
+    border-bottom: 1px solid #ddd;
     display: inline-block;
     width: 84.5%;
     vertical-align: 0.35em;

diff --git a/share/spice/currency/currency.js b/share/spice/currency/currency.js
@@ -26,7 +26,7 @@
 
     // Resize the size of the outer container if the content of the inner container
     // overflows.
-    function resizeContainer() {        
+    function resize() {        
         var resultHeight = $(".zci--currency-result").outerHeight();
 
         if(resultHeight > 65) {
@@ -36,6 +36,17 @@
         }
     }
 
+    // Change the look of the mobile view if the content overflows.
+    function resizeMobile() {
+        var tileHeight = $(".zci--currency .tile--s").outerHeight();
+
+        if(tileHeight > 155) {
+            $(".zci--currency .tile--s").addClass("large").removeClass("small");
+        } else {
+            $(".zci--currency .tile--s").addClass("small").removeClass("large");
+        }
+    }
+
     env.ddg_spice_currency = function(api_result) {
 
         // Check if there are any errors in the response.
@@ -83,10 +94,14 @@
         }
 
         // Add commas to the numbers for display.
-        function numberWithCommas(x) {
-            var parts = x.toString().split(".");
-            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return parts.join(".");
+        function formatNumber(x) {
+            // Check if the number has a decimal point.
+            // If it does, only show the first two digits after the decimal place.
+            if(/\./.test(x.toString())) {
+                x = x.toFixed(2);   
+            }
+
+            return DDG.commifyNumber(x);
         }
 
         Spice.add({
@@ -108,8 +123,8 @@
                 return {
                     fromCurrencySymbol: item["from-currency-symbol"],
                     toCurrencySymbol: item["to-currency-symbol"],
-                    amount: numberWithCommas(+item["from-amount"]),
-                    convertedAmount: numberWithCommas(+item["converted-amount"]),
+                    amount: formatNumber(+item["from-amount"]),
+                    convertedAmount: formatNumber(+item["converted-amount"]),
                     rate: item["conversion-rate"],
                     inverseRate: item["conversion-inverse"],
                     xeUrl: 'http://www.xe.com/currencycharts/?from=' + item["from-currency-symbol"] + '&to=' + item["to-currency-symbol"],
@@ -129,8 +144,11 @@
                 // The desktop template depends on a JS function that manages the
                 // size of the container.
                 if(!is_mobile) {
-                    $(window).load(resizeContainer);
-                    $(window).resize(resizeContainer);
+                    $(window).load(resize);
+                    $(window).resize(resize);
+                } else {
+                    $(window).load(resizeMobile);
+                    $(window).resize(resizeMobile);
                 }
             }
         });

diff --git a/share/spice/currency/detail.handlebars b/share/spice/currency/detail.handlebars
@@ -29,6 +29,10 @@
 
         <div class="clear"></div>
         <a href="http://www.xe.com/currencyconverter/convert/?Amount={{from-amount}}&From={{fromCurrencySymbol}}&To={{toCurrencySymbol}}" class="zci__more-at"><img class="zci__more-at__icon" src="//images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.xe.com%2Ffavicon.ico&amp;f=1">More at xe.com</a>
+        <a href="http://www.xe.com/currencycharts/?from={{fromCurrencySymbol}}&to={{toCurrencySymbol}}" class="zci__more-at--info">
+            <span class="zcm__sep"></span>  
+            View Chart
+        </a>
     </div>
 </div>
 

diff --git a/share/spice/currency/detail_mobile.handlebars b/share/spice/currency/detail_mobile.handlebars
@@ -7,11 +7,12 @@
 
 <div class="clear"></div>
 
-<div class="tile--s">
+<a class="tile tile--s small" href="http://www.xe.com/currencycharts/?from={{fromCurrencySymbol}}&to={{toCurrencySymbol}}">
     <div class="zci--currency-first-part">
         <img src="{{fromFlag}}" alt="Flag of {{fromCurrencySymbol}}">
-        <span class="zci--currency-symbol">{{fromCurrencySymbol}}</span>
-        <div class="zci--currency-amount" data-original="{{from-amount}}" data-processed="{{amount}}">{{amount}}</div>
+        <span class="zci--currency-symbol-large">{{fromCurrencySymbol}}</span>
+        <span class="zci--currency-amount" data-original="{{from-amount}}" data-processed="{{amount}}">{{amount}}</span>
+        <span class="zci--currency-symbol-small">{{fromCurrencySymbol}}</span>
     </div>
 
     <div class="zci--currency-equal">
@@ -22,10 +23,11 @@
 
     <div class="zci--currency-second-part">
         <img src="{{toFlag}}" alt="Flag of {{toCurrencySymbol}}">
-        <span class="zci--currency-symbol">{{toCurrencySymbol}}</span>
-        <div class="zci--currency-amount" data-original="{{converted-amount}}" data-processed="{{convertedAmount}}">{{convertedAmount}}</div>
+        <span class="zci--currency-symbol-large">{{toCurrencySymbol}}</span>
+        <span class="zci--currency-amount" data-original="{{converted-amount}}" data-processed="{{convertedAmount}}">{{convertedAmount}}</span>
+        <span class="zci--currency-symbol-small">{{toCurrencySymbol}}</span>
     </div>
-</div>
+</a>
 
 <div class="zci--currency-ratesinfo-mobile text--secondary">
     <div>{{rate}}</div>