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

divyamtayal · 2020-12-11T20:19:40Z

Short description of what this resolves:

Move the search feature to the top bar and substitute "Browse Events" with "Search Events"

Changes proposed in this pull request:

Implement the search in the place of "Browse Events"
Use a similar style and show "Search Events"
Expand the search box similar to GitHub when the user enters something
Delete the main search bar below the header
Show the top search bar on the same pages as Browse Events at the moments (do not change anything here)
Implement search box on Mobile view

Screenshot

Desktop

Mobile(sideBar)	Mobile(Navbar Search Icon)	Mobile(Navbar Search Icon(on click))
	!

Checklist

I have read the Contribution & Best practices Guide.
My branch is up-to-date with the Upstream development branch.
The acceptance, integration, unit tests and linter pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

vercel · 2020-12-11T20:19:45Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/eventyay/open-event-frontend/bazf13va4
✅ Preview: https://open-event-frontend-git-search-bar-5927.eventyay.now.sh

codecov · 2020-12-11T21:06:04Z

Codecov Report

Merging #6007 (40647e2) into development (6c78c0d) will increase coverage by 0.00%.
The diff coverage is 18.18%.

@@             Coverage Diff              @@
##           development    #6007   +/-   ##
============================================
  Coverage        23.45%   23.46%           
============================================
  Files              511      512    +1     
  Lines             5478     5490   +12     
  Branches            67       67           
============================================
+ Hits              1285     1288    +3     
- Misses            4176     4185    +9     
  Partials            17       17

Impacted Files	Coverage Δ
app/components/side-bar.js	`78.94% <0.00%> (-14.81%)`	⬇️
app/components/nav-bar.js	`25.00% <20.00%> (-8.34%)`	⬇️
app/controllers/application.js	`43.75% <33.33%> (-2.41%)`	⬇️
app/controllers/public/session/view.js	`0.00% <0.00%> (ø)`
app/controllers/events/view/videoroom/list.js	`0.00% <0.00%> (ø)`
...able/cell/events/view/videoroom/cell-stream-url.js	`100.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6c78c0d...40647e2. Read the comment docs.

mariobehling · 2020-12-12T01:06:10Z

Thank you. Please change the following:

Switch search one position to the left
Do not keep a straight line to the left
Do not keep a border for the search box
Add a search lens
Expand search box length to the left when the user clicks into it
Also add more space above "Featured Events" - compare to "Upcoming Events" (Ensure the same space as above Upcoming Events)

divyamtayal · 2020-12-12T18:20:02Z

@mariobehling Pls have a look

iamareebjamal · 2020-12-12T18:49:21Z

Please use #fafafa as bg color. Make default size of search bar smaller and don't expand it too much. GitHub expands it to show suggestions, we are not doing that currently.

iamareebjamal · 2020-12-12T18:51:02Z

And it should also display and work on mobile

iamareebjamal · 2020-12-12T22:05:38Z

Great, however I think mobile view should also contain the search bar in NavBar, or people won't notice it

divyamtayal · 2020-12-12T22:35:33Z

Then pls let me know where should I implement that. Bcz no space is in navbar

iamareebjamal · 2020-12-12T23:10:13Z

Lot of space

iamareebjamal · 2020-12-12T23:11:07Z

If there is no space, do what eventbrite does

mariobehling · 2020-12-13T07:45:53Z

Yes, please implement it in the top menu bar. Thanks

mariobehling · 2020-12-13T08:04:56Z

Please also:

Make the expanded version of the search box 20px longer
Make the lens icon in the same color as the "Search Events" font

divyamtayal · 2020-12-13T18:26:13Z

@iamareebjamal Pls have a look

vercel · 2020-12-13T18:31:01Z

Deployment failed with the following error:

Invalid request: `target` should be string.

iamareebjamal · 2020-12-13T23:26:42Z

Search icon still black. Can't click on cross till I type something

divyamtayal · 2020-12-14T05:33:49Z

Search icon still black. Can't click on cross till I type something

cross icon is working for me

divyamtayal · 2020-12-14T15:08:06Z

@iamareebjamal I have made the changes and cross icon is working

sachinchauhan2889

look nice to me.
only github actions / lint annotations needs to fix.

divyamtayal · 2020-12-14T17:59:14Z

look nice to me.
only github actions / lint annotations needs to fix.

lint is not giving any error

maze-runnar

Looks good 👍🏻

iamareebjamal · 2020-12-14T18:55:53Z

app/components/nav-bar.js

+
+  @action
+  toggleSearchBar() {
+    document.querySelector('#mobile-bar').classList.toggle('show-bar');


Why not using ember for this? Merging this as it has been too long, but please create a follow up PR to change DOM manipulation to ember

iamareebjamal · 2020-12-14T18:56:49Z

Great job @daretobedifferent18

Please follow up with a PR with minor change I mentioned

divyamtayal · 2020-12-14T18:59:01Z

@iamareebjamal also should I do #6017 with it bcz I think it will be easy to do it together bring search bar there as well

iamareebjamal · 2020-12-14T19:01:45Z

Yes

Add search bar

ab8ac7e

vercel bot deployed to Preview December 11, 2020 20:19 View deployment

Merge branch 'development' into search-bar-5927

48b9742

vercel bot deployed to Preview December 11, 2020 20:24 View deployment

Deleted search bar below header and fix test

768d18e

vercel bot deployed to Preview December 11, 2020 20:58 View deployment

Expand Search bar

464c270

vercel bot deployed to Preview December 12, 2020 18:17 View deployment

Fix test-1

17bd877

vercel bot deployed to Preview December 12, 2020 18:30 View deployment

Add Search bar on Mobile view

17320f3

vercel bot deployed to Preview December 12, 2020 21:56 View deployment

divyamtayal requested a review from iamareebjamal December 12, 2020 21:57

Add Search bar in Navbar in mobile view

3083eef

vercel bot deployed to Preview December 13, 2020 18:18 View deployment

Add Search bar in Navbar in mobile view-1

31dafae

vercel bot deployed to Preview December 13, 2020 18:25 View deployment

Add Search bar in Navbar in mobile view-3

4d80f42

vercel bot deployed to Preview December 13, 2020 18:30 View deployment

Update nav-bar.hbs

c1ace0d

vercel bot deployed to Preview December 13, 2020 18:33 View deployment

Change color

40647e2

vercel bot deployed to Preview December 14, 2020 15:07 View deployment

divyamtayal mentioned this pull request Dec 14, 2020

Search Page: Further enhance design #6017

Closed

iamareebjamal requested review from maze-runnar and sachinchauhan2889 December 14, 2020 17:15

sachinchauhan2889 suggested changes Dec 14, 2020

View reviewed changes

maze-runnar reviewed Dec 14, 2020

View reviewed changes

iamareebjamal changed the title ~~Front Page: Move Search Function to Top Bar~~ feat: Front Page: Move Search Function to Top Bar Dec 14, 2020

auto-label bot added the feature label Dec 14, 2020

iamareebjamal reviewed Dec 14, 2020

View reviewed changes

iamareebjamal approved these changes Dec 14, 2020

View reviewed changes

iamareebjamal merged commit ebadb84 into fossasia:development Dec 14, 2020

divyamtayal mentioned this pull request Dec 14, 2020

feat: Search Page Further enhance design #6030

Closed

10 tasks

sachinchauhan2889 mentioned this pull request Dec 15, 2020

fix: Search term should not get added to event categories #6039

Merged

5 tasks

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

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

Uh oh!

Conversation

divyamtayal commented Dec 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Short description of what this resolves:

Changes proposed in this pull request:

Screenshot

Checklist

Uh oh!

vercel bot commented Dec 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mariobehling commented Dec 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

divyamtayal commented Dec 12, 2020

Uh oh!

iamareebjamal commented Dec 12, 2020

Uh oh!

iamareebjamal commented Dec 12, 2020

Uh oh!

iamareebjamal commented Dec 12, 2020

Uh oh!

divyamtayal commented Dec 12, 2020

Uh oh!

iamareebjamal commented Dec 12, 2020

Uh oh!

iamareebjamal commented Dec 12, 2020

Uh oh!

mariobehling commented Dec 13, 2020

Uh oh!

mariobehling commented Dec 13, 2020

Uh oh!

divyamtayal commented Dec 13, 2020

Uh oh!

vercel bot commented Dec 13, 2020

Uh oh!

iamareebjamal commented Dec 13, 2020

Uh oh!

divyamtayal commented Dec 14, 2020

Uh oh!

divyamtayal commented Dec 14, 2020

Uh oh!

sachinchauhan2889 left a comment

Choose a reason for hiding this comment

Uh oh!

divyamtayal commented Dec 14, 2020

Uh oh!

maze-runnar left a comment

Choose a reason for hiding this comment

Uh oh!

iamareebjamal Dec 14, 2020

Choose a reason for hiding this comment

Uh oh!

iamareebjamal commented Dec 14, 2020

Uh oh!

divyamtayal commented Dec 14, 2020

Uh oh!

iamareebjamal commented Dec 14, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

divyamtayal commented Dec 11, 2020 •

edited

Loading

vercel bot commented Dec 11, 2020 •

edited

Loading

codecov bot commented Dec 11, 2020 •

edited

Loading

mariobehling commented Dec 12, 2020 •

edited

Loading