Search bar implementation

I added a new search aspect to the static about.gitlab.com website. I used Google Custom Search and modified (the heck out of) the CSS so that it didn't look so awful. Any commentary is welcome, and I can change the CSS more if needed.

This is what the new nav-bar header looks like:

And this is an example search screen:

Title changed from Search bar implementation to WIP: Search bar implementation

Things to change:

1. Search button messes up when resizing. Everything is fine when resizing (results and white search bar input) other than the search button with the magnifying glass. It does not change width. Must change.

2. Text when typing into the search bar is not perfectly vertically aligned center. Really bothering me.

3. Change blinking cursor color to the same purple as the text.

Also this:

Added 1 commit:

• aa6014d2 - Fixed Robert's comments

@darby I agree with your list of things to change, but I love that it works!!

I'd add to change the background color to be less contrasting with the rest.

Also, feel free to remove the 'X'. The input is cleared on search, so I don't think it's necessary.

the only thing left is the search button resizing. Doing now

@darby Also check what happens when the window is very small (i.e., mobile) and you click the "hamburger" button to show the menu in a drop-down. When I was looking at it a few days ago the search box was showing in the drop-down and looked weird.

@rspeicher I will look into all resizing issues now

Added 1 commit:

• 85945e9d - Changed CSS features of search bar

oof @rspeicher you are right. this looks awful:

it looks like it throws EVERYTHING off

@darby Yeah =/ We'll probably need to do some media queries and either hide the search completely on certain widths or dramatically restyle it.

@darby just hide it on mobile. Use .hidden-xs and .hidden-sm to do this.

Added 1 commit:

• 982ab515 - Updated resizing issue, still WIP

Added 1 commit:

• b7a1562b - FINALLY FIXED THE RESIZING THANK YOU UNIVERSE

Title changed from WIP: Search bar implementation to Search bar implementation

No longer WIP!!!! @JobV @sytses

Awesome, trying it out..

@darby it's not good yet. on certain resolutions (see screenshot below) the collapse doesn't work well enough yet.

Here's a suggestion: let's stop wrapping the navigation items in a container and let them fall to the edges of the window.

Added 1 commit:

• fbeafac0 - Changed px width for display:none

@JobV Tell me what you think of this. I didn't push the right fix before, and had the wrong pixel width for when the search bar should be hidden. It's now hidden on screens smaller than 1200px. I think this should be fine and it looks good.

@JobV The only problem with the top nav bar now is something that has been there for a while (it's on the live site, but I didn't see it until now when I was messing with pixel widths). It's super strange. I think it's a bootstrap problem. Here it is:

at 992px width:

at 991px width:

at 990px width:

I will look into the problem, but the nav bar with search bar looks good.

it's ready to be merged @JobV

The thing above was already an issue on the website, but I'll look into it when I have time.

@darby I'm not yet happy with it. It breaks the navigation bar too easily: If I resize, it breaks.

A very easy start is to do what I suggested before. Remove the container around the navigation bar, this gives you much more space.

Then it's just a matter of playing with the responsive breakpoints.

I don't like that it's slow to load either, but I don't know how we could fix that. Where do you load the element now? Can you load it before other js code?

The search bar is hard and right now not a priority.

Status changed to closed