Modified search button (#1417)

src/backend/_scss/application.scss

@@ -1469,6 +1469,10 @@ a {
 
 .search-filter {
 
+  @media only screen and (max-width: 350px) {
+    display: none;
+  }
+
   .fossasia-filter {
     background-color: $white;
     border: 1px solid $gray-dim;
@@ -2001,3 +2005,46 @@ a.skip:hover {
   }
 }
 
+
+.search-box {
+  $tl: .3s; // transition length
+  border: 0;
+  height: 40px;
+  outline: 0;
+  transition: width $tl;
+  width: 40px;
+
+  label {
+    .search-icon {
+      color: $black;
+    }
+  }
+
+  &:focus {
+    border: 1px solid $black;
+    border-radius: 20px;
+    box-shadow: none;
+    cursor: text;
+    padding-left: 15px;
+    transition: width $tl;
+    width: 90%;
+  }
+
+  &:not(:focus) {
+    text-indent: -5000px;
+  }
+}
+
+.search-icon {
+  left: -30px;
+  position: relative;
+}
+
+.search-container {
+  @media only screen and (min-width: 350px) {
+    display: none;
+  }
+
+  margin: 7.5px -15px;
+}
+

src/backend/templates/partials/navbar.hbs

@@ -28,6 +28,10 @@
     <div class="hidden-lg hidden-md hidden-sm clearfix"></div>
     <div class="side-collapse in">
       <nav role="navigation" class="navbar-collapse">
+        <div class="search-container">
+          <input id="search-box" type="text" class="search-box fossasia-filter">
+          <label for="search-box"><span class="search-icon"><i class="fa fa-search" aria-hidden="true"></i></span></label>
+        </div>
       <ul class="nav navbar-nav navbar-right">
         {{#if single_session}}
           <li class="navlink"><a id="homelink" href="../index.html">Home</a></li>

src/backend/templates/rooms.hbs

@@ -290,7 +290,7 @@
           e.stopPropagation();
         });
 
-        $('.fossasia-filter:first').change(function() {
+        $('.fossasia-filter').change(function() {
           var filterVal = $(this).val();
           if (filterVal) {
             $('.date-filter').each(function() {

src/backend/templates/schedule.hbs

@@ -412,7 +412,7 @@
          var val = $(this).parent().parent().find('.speakers-inputbox').val();
          $(this).parent().parent().find('.speakers-inputbox').val(window.location.href.split('#')[0] + '#'  + val.split('#').pop());
         });
-      $('.fossasia-filter:first').change(function() {
+      $('.fossasia-filter').change(function() {
               var filterVal = $(this).val();
               if (filterVal) {
                 $('.day-filter').each(function() {

src/backend/templates/speakers.hbs

@@ -206,7 +206,7 @@
             var val = $(this).parent().parent().find('.speakers-inputbox').val();
             $(this).parent().parent().find('.speakers-inputbox').val(window.location.href.split('#')[0] + '#'  + val.split('#').pop());
         });
-        $('.fossasia-filter:first').change(function() {
+        $('.fossasia-filter').change(function() {
                 var filterVal = $(this).val();
                 if (filterVal) {
                     $('.speaker').each(function() {

src/backend/templates/tracks.hbs

@@ -283,7 +283,7 @@
           e.stopPropagation();
         });
 
-        $('.fossasia-filter:first').change(function () {
+        $('.fossasia-filter').change(function () {
           var filterVal = $(this).val();
           var temp = JSON.parse(localStorage[eventName]);
           if (filterVal) {
@@ -399,7 +399,13 @@
               $(this).find('.room-filter').each(function () {
                 var elemId = $(this).attr('id');
                 var bookFlag = 0, searchFlag = 0, elemFlag = 0;
-                var filterVal = $('.fossasia-filter:first').val();
+                var filterVal;
+
+                $('.fossasia-filter').each(function() {
+                  if($(this).is(':visible')) {
+                    filterVal = $(this).val();
+                  }
+                });
 
                 if ($(this).find('.tip-description').text().toUpperCase().indexOf(filterVal.toUpperCase()) >= 0 ||
                   $(this).find('.session-speakers-list a span').text().toUpperCase().indexOf(filterVal.toUpperCase()) >= 0 ||

src/selenium/basePage.js

@@ -76,7 +76,16 @@ var BasePage = {
   },
 
   search: function(text) {
-    return this.find(By.className('fossasia-filter')).sendKeys(text);
+    var self = this;
+    var searchClass = 'fossasia-filter';
+
+    // There are two search input box with the class fossasia-filter. One of them is for mobile view and other is for bigger
+    // screens. We are doing this test on bigger screen so we have to select that input element and enter text in it. The second
+    // input element is for the bigger screens so working with it
+
+    return self.findAll(By.className(searchClass)).then(function(inputArr) {
+      return inputArr[1].sendKeys(text);
+    });
   },
 
   commonSearchTest: function(text, idList) {
@@ -102,7 +111,12 @@ var BasePage = {
   },
 
   resetSearchBar: function() {
-    return this.find(By.className('fossasia-filter')).clear();
+    var self = this;
+    var searchClass = 'fossasia-filter';
+
+    return self.findAll(By.className(searchClass)).then(function(inputArr) {
+      return inputArr[1].clear();
+    });
   },
 
   countOnesInArray: function(arr) {