feat: Front Page: Move Search Function to Top Bar (#6007)

DIVYAM TAYAL · web-flow · commit ebadb84ab994 · 2020-12-15T00:26:09.000+05:30
diff --git a/app/components/nav-bar.js b/app/components/nav-bar.js
@@ -9,6 +9,24 @@ export default class NavBar extends Component {
     return !(String(this.session.currentRouteName).includes('public'));
   }
 
+  @computed('session.currentRouteName')
+  get isNotExplorePageRoute() {
+    return !(String(this.session.currentRouteName).includes('explore'));
+  }
+
+  @action
+  handleKeyPress() {
+    if (event.code === 'Enter') {
+      this.sendAction('search');
+      document.querySelector('#mobile-bar').classList.remove('show-bar');
+    }
+  }
+
+  @action
+  toggleSearchBar() {
+    document.querySelector('#mobile-bar').classList.toggle('show-bar');
+  }
+
   @action
   logout() {
     this.authManager.logout();
diff --git a/app/components/side-bar.js b/app/components/side-bar.js
@@ -1,6 +1,7 @@
 import classic from 'ember-classic-decorator';
 import $ from 'jquery';
 import Component from '@ember/component';
+import { action } from '@ember/object';
 
 @classic
 export default class SideBar extends Component {
@@ -14,6 +15,14 @@ export default class SideBar extends Component {
     this.set('sidebarVisible', false);
   }
 
+  @action
+  handleKeyPress() {
+    if (event.code === 'Enter') {
+      this.set('sidebarVisible', false);
+      this.sendAction('search');
+    }
+  }
+
   didInsertElement() {
     super.didInsertElement(...arguments);
 
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { filterBy } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import moment from 'moment';
+import { tracked } from '@glimmer/tracking';
 
 
 @classic
@@ -17,6 +18,8 @@ export default class ApplicationController extends Controller {
   @service
   fastboot;
 
+  @tracked event_name = null;
+
   @filterBy('model.notifications', 'isRead', false)
   unreadNotifications;
 
@@ -47,4 +50,10 @@ export default class ApplicationController extends Controller {
     this.getCookieSeen(true);
     this.showCookie = false;
   }
+
+  @action
+  search() {
+    this.transitionToRoute('explore', { queryParams: { event_name: this.event_name } });
+    this.event_name = null;
+  }
 }
diff --git a/app/styles/libs/_helpers.scss b/app/styles/libs/_helpers.scss
@@ -84,7 +84,7 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
 }
 
 .space-between {
-  justify-content: space-between;
+  justify-content: space-between !important;
 }
 
 .flex-1 {
diff --git a/app/styles/pages/events.scss b/app/styles/pages/events.scss
@@ -13,3 +13,51 @@
     width: 100%;
   }
 }
+
+.search-bar {
+
+  background-color: #fafafa;
+  border-radius: .5rem;
+  color: #808080;
+
+
+  input[type='text'] {
+    background-color: #fafafa;
+    border: 0;
+    outline: 0;
+    transition: width .2s ease-in-out;
+    width: 140px;
+
+    &:focus {
+      width: 200px;
+    }
+
+  }
+
+  i {
+    margin-bottom: .5rem;
+  }
+
+  &-mobile {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-52%);
+    z-index: -1;
+    width: 20%;
+    transition: all .2s ease-in-out;
+
+    input[type='text'] {
+      width: 100%;
+
+      &:focus {
+        width: 100%;
+      }
+    }
+
+  }
+}
+
+.show-bar {
+  z-index: 1;
+  width: 80%;
+}
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
@@ -49,6 +49,10 @@
   padding: .25rem !important;
 }
 
+.p-2 {
+  padding: .5rem !important;
+}
+
 .pt-1 {
   padding-top: .25rem !important;
 }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -9,11 +9,12 @@
     {{/if}}
   </div>
 {{/if}}
-<SideBar>
+<SideBar @search={{action 'search'}} @event_name={{this.event_name}}>
   <div class="footer-pusher">
-    <NavBar />
+    <NavBar @search={{action 'search'}} @event_name={{this.event_name}}/>
+
     {{#if (eq this.routing.currentRouteName 'index')}}
-      <WelcomeHeader />
+      <WelcomeHeader @class={{'mb-4'}}/>
     {{/if}}
     <div id="main-container"
          class="ui fluid container main-container {{unless this.device.isInternetExplorer 'flexed-container' ''}}">
diff --git a/app/templates/components/nav-bar.hbs b/app/templates/components/nav-bar.hbs
@@ -5,15 +5,16 @@
       <h3>{{this.settings.appName}}</h3>
     </LinkTo>
     <div class="right menu nav-bar">
+    {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute)}}
+      <div class="search-bar d-flex items-center space-between m-2 p-2">
+        <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+        <i class="search icon"></i>
+      </div>
+    {{/if}}
     {{#if (and (not this.session.isAuthenticated) this.isNotEventPageRoute)}}
       <LinkTo
         @route="pricing" class="item"
         @activeClass="">{{t 'Pricing'}}</LinkTo>
-    {{/if}}
-    {{#if this.isNotEventPageRoute}}
-      <LinkTo
-        @route="explore" class="item"
-        @activeClass="">{{t 'Browse Events'}}</LinkTo>
     {{/if}}
       {{#if this.session.isAuthenticated}}
         <NotificationDropdown />
@@ -67,7 +68,19 @@
       @route="index" class="item" @activeClass="">
       <div class="ui header small text">{{this.settings.appName}}</div>
     </LinkTo>
+    <div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
+      <i class="search icon" style="cursor: auto;"></i>
+      <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+      <div role="button" {{action "toggleSearchBar"}}>
+        <i class="close icon" ></i>
+      </div>
+    </div>
     <div class="right menu nav-bar">
+      {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute)}}
+        <div role="button" class="item ui" {{action "toggleSearchBar"}}>
+          <i class="search icon"></i>
+        </div>
+      {{/if}}
       {{#if this.session.isAuthenticated}}
         <NotificationDropdown
           @notifications={{this.notifications}} />
diff --git a/app/templates/components/side-bar.hbs b/app/templates/components/side-bar.hbs
@@ -1,7 +1,8 @@
 <div class="ui left inverted vertical menu sidebar {{if this.sidebarVisible 'visible'}}">
-  <LinkTo
-    @route="explore" class="item"
-    @activeClass="">{{t 'Browse Events'}}</LinkTo>
+    <div class="search-bar d-flex items-center space-between m-2 p-2">
+      <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+      <i class="search icon"></i>
+    </div>
   {{#if this.session.isAuthenticated}}
     <div class="item">
       <a href="{{href-to 'account.profile'}}">
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,23 +1,14 @@
 <div class="ui container">
-  <div class="ui input fluid">
-    <Input
-      @type="text"
-      @key-up={{action "handleKeyPress"}}
-      placeholder={{t "Search for events"}}
-      @value={{this.event_name}} />
-    <button class="ui blue button large" type="button" {{action 'search'}}>{{t 'Search'}}</button>
-  </div>
-
   {{#if this.featuredEvents}}
-    <h2 class="main-heading">{{t 'Featured Events'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Featured Events'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.featuredEvents as |event|}}
         <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
       {{/each}}
     </div>
   {{/if}}
   {{#if this.filteredEvents}}
-    <h2 class="main-heading">{{t 'Upcoming Events'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Upcoming Events'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.promotedEvents as |event|}}
         <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
@@ -27,10 +18,10 @@
       {{/each}}
     </div>
   {{else}}
-    <h2 class="main-heading">{{t 'No Upcoming Events Found'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'No Upcoming Events Found'}}</h2>
   {{/if}}
   {{#if this.model.callForSpeakersEvents}}
-    <h2 class="main-heading">{{t 'Call for speakers'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Call for speakers'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.model.callForSpeakersEvents as |event|}}
         <EventCard @event={{event}} @isCFS={{true}} @shareEvent={{action "shareEvent"}} />
diff --git a/tests/integration/components/nav-bar-test.js b/tests/integration/components/nav-bar-test.js
@@ -8,6 +8,6 @@ module('Integration | Component | nav bar', function(hooks) {
 
   test('it renders', async function(assert) {
     await render(hbs`{{nav-bar}}`);
-    assert.ok(this.element.innerHTML.trim().includes('Browse Events'));
+    assert.ok(this.element.innerHTML.trim().includes('Search Events'));
   });
 });
diff --git a/tests/integration/components/side-bar-test.js b/tests/integration/components/side-bar-test.js
@@ -16,6 +16,6 @@ module('Integration | Component | side bar', function(hooks) {
         <div class="main-container">Search text</div>
       {{/side-bar}}
     `);
-    assert.ok(this.element.textContent.trim().includes('Browse Events'));
+    assert.ok(this.element.textContent.trim().includes('Search text'));
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`.space-between {`
`87`		`- justify-content: space-between;`
	`87`	`+ justify-content: space-between !important;`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`.flex-1 {`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,10 @@`
`49`	`49`	`padding: .25rem !important;`
`50`	`50`	`}`
`51`	`51`
	`52`	`+.p-2 {`
	`53`	`+ padding: .5rem !important;`
	`54`	`+}`
	`55`	`+`
`52`	`56`	`.pt-1 {`
`53`	`57`	`padding-top: .25rem !important;`
`54`	`58`	`}`