From 74c1fbbcf76157493bf29ac25923f612efb0782d Mon Sep 17 00:00:00 2001
From: Saturnino Abril <saturnino.abril@gmail.com>
Date: Sat, 4 Mar 2017 03:20:06 +0900
Subject: Mobile Web: Auto-focus cursor in the search box (#5284)

* Mobile Web: Auto-focus cursor in the search box and open keyboard when the search icon is tapped

* fixed issue with safari mobile view

* added isFocus props to search_bar.jsx component

* used 'x' and fixed spacing

* changed 'x' icon and fixed css

* added aria-hidden='true'
---
 webapp/sass/components/_search.scss |  2 +-
 webapp/sass/responsive/_mobile.scss | 24 +++++++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'webapp/sass')

diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index bdc285300..b792ad31a 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -51,7 +51,7 @@
     top: 15px;
 }
 
-.sidebar__clear-icon {
+.sidebar__search-clear {
     @include opacity(.5);
     color: $dark-gray;
     width: 40px;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ee26045ac..37c91846e 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -933,7 +933,7 @@
             .icon--refresh {
                 @include opacity(.6);
                 color: $black;
-                right: 33px;
+                right: 30px;
                 top: 15px;
             }
 
@@ -955,12 +955,19 @@
         @include single-transition(transform, .35s, ease);
         @include translate3d(290px, 0, 0);
         border: none;
-        display: block;
         width: 290px;
+        visibility: hidden;
+
+        &.visible {
+            display: block;
+            visibility: visible;
+        }
 
         &.move--left,
         &.webrtc--show {
             @include translate3d(0, 0, 0);
+            display: block;
+            visibility: visible;
         }
     }
 
@@ -1099,15 +1106,22 @@
             display: block;
         }
 
-        .sidebar__clear-icon {
+        .sidebar__search-clear {
             display: block;
+            top: 6px;
+            height: 30px;
+            width: 35px;
+            margin-right: 18px;
             &.visible {
                 visibility: visible;
             }
         }
 
-        .fa-times {
-            margin-left: 15px;
+        .sidebar__search-clear-x {
+            margin-left: 14px;
+            font-size: 22px;
+            font-weight: 700;
+            opacity: .7;
         }
 
         .sidebar--right__close {
-- 
cgit v1.2.3-1-g7c22