Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

@@ -7,8 +7,6 @@ var $ = require('jquery');
 
 var $footer = $('#yoho-footer');
 
-var FOOTERHEIGHT = 120; //footer height
-
 function cookie(name) {
     var cookies = document.cookie,
         cookieVal,
@@ -100,7 +98,7 @@ function rePosFooter() {
         return;
     }
 
-    if ($('body').height() < $(window).height() - FOOTERHEIGHT) {
+    if ($('body').height() <= $(window).height()) {
         $footer.addClass('bottom');
     } else {
         $footer.removeClass('bottom');
@@ -113,7 +111,7 @@ function rePosFooter() {
 
     var user = getUser();
 
-    if ($('body').height() < $(window).height() - FOOTERHEIGHT) {
+    if ($('body').height() <= $(window).height()) {
         $footer.addClass('bottom');
     }
 

@@ -8,7 +8,7 @@ var $searchBox = $('.search-box'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
 
-$searchBox.find('input').on('focus', function() {
+function showBigSearch() {
     $indexLogo.css({
         width: 0
     });
@@ -19,7 +19,9 @@ $searchBox.find('input').on('focus', function() {
         width: '15.5rem'
     });
     $('.clear-text, .no-search').show();
-}).on('blur', function() {
+}
+
+function hideBigSearch() {
     $indexLogo.css({
         width: '5.4rem'
     });
@@ -30,12 +32,22 @@ $searchBox.find('input').on('focus', function() {
         width: '9.6rem'
     });
     $('.clear-text, .no-search').hide();
+}
+
+$searchBox.find('input').on('focus', function() {
+    showBigSearch();
 });
-$searchBox.find('.clear-text').click(function() {
-    $searchBox.find('input').val('').trigger('focus');
+
+$searchBox.find('.clear-text').on('touchend', function() {
+    $searchBox.find('input').val('');
 });
-$searchBox.find('.search-icon').click(function() {
+$searchBox.find('.search-icon').on('touchend', function() {
     $indexSearch.submit();
 });
 
+$('.no-search').on('touchend', function() {
+    $searchBox.find('input').val('');
+    hideBigSearch();
+});
+
 window.rePosFooter();

@@ -108,7 +108,7 @@
             padding: 0 20rem / $pxConvertRem;
             a {
                 display: block;
-                padding-top: 10rem / $pxConvertRem;
+                // padding-top: 10rem / $pxConvertRem;
                 height: 76rem / $pxConvertRem;
                 line-height: 76rem / $pxConvertRem;
                 font-size: 28rem / $pxConvertRem;
@@ -116,13 +116,14 @@
                 border-top: 1px solid #f9f9f9;                    
                 i {
                     display: inline-block;
+                    margin-top: -4rem / $pxConvertRem;
                     margin-left: 24rem / $pxConvertRem;
                     width: 58rem / $pxConvertRem;
                     height: 38rem / $pxConvertRem;
                     text-align: center;
                     vertical-align: middle;
                     font-size: 18rem / $pxConvertRem;
-                    line-height: 39rem / $pxConvertRem;
+                    line-height: 38rem / $pxConvertRem;
                     color: #fff;
                     border-radius: 50rem / $pxConvertRem;;
                 }

@@ -4,12 +4,12 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    // left: 0;
+    left: -540rem / $pxConvertRem;
     right: 640rem / $pxConvertRem;
     width: 540rem / $pxConvertRem;
     z-index: -1;
     overflow: hidden;
-    @include transition(right .3s);
+    @include transition(all .3s);
 
     ul {
         background: #f0f0f0;
@@ -107,6 +107,7 @@
 }
 
 .side-nav.on {
+    left: 0;
     right: 100rem / $pxConvertRem;
     z-index: 3;
 }

@@ -24,7 +24,8 @@
             width: 384rem / $pxConvertRem;
             height: 112rem / $pxConvertRem;
             overflow: hidden;
-            transition: width 400ms;
+            z-index: 3;
+            @include transition(width .4s);
             .search-box {
                 float: left;
                 position: relative;
@@ -96,10 +97,10 @@
            min-height: 800rem / $pxConvertRem;
 
            .index-channel-list {
-                padding-top: 50%;
+                margin-top: -50%;
                 width: 100%;
                 position: absolute;
-                top: -180rem / $pxConvertRem;
+                top: 50%;
 
                 .list-item {
                     display: block;
@@ -114,6 +115,9 @@
                     background: #000;
                     border: 4px solid #fff;
                     font-weight: bold;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
                 }
                 .lighter {
                     font-weight: lighter;