Header search plugin

** Please note ***

I am no longer supporting this plugin. Please use the Header Search Theme instead.

See further.

Repo: https://github.com/angusmcleod/discourse-header-search

Also available as a theme: Header Search Theme Component

Makes the search bar visible in the header in the Desktop UI and hides the search menu icon. It only affects the Desktop UI. It does not affect mobile web.

When you scroll down on a topic the header search bar is hidden and the normal search menu icon reappears. This is to allow the topic title, category labels and tags to display (aka the ‘extra info’).

If you want the search bar to be right-aligned:

Add this CSS in admin customise:

.header-search-enabled .contents {
   display: flex;
   justify-content: space-between;
    
   &:before, &:after {
     display: none;
   }
    
   .title {
     flex: 1 1 auto;
   }
    
   .search-header {
     float: right;
     margin-left: 0;
     margin-right: 10px;
   }
}
27 Likes

@angus nice! Just one issue: it did indeed affect mobile, causing formatting to mess up.

The culprit:

.d-header .contents {
  min-width: 740px;
}

That should not have affected mobile css but it did. Once I overrode that on mobile css, I was good.

2 Likes

Ah! Indeed. I added that without checking it properly. Thanks, will fix.

@Joey_Tuan That should do the trick

https://github.com/angusmcleod/discourse-header-search/commit/26547b992e984934f3b9383af40ac3d8468891be

3 Likes

@angus just a heads up: there’s also a css conflict between this and the popular babble plugin: https://meta.discourse.org/t/babble-a-chat-plugin. I’ll dig into the cause too.

Causes the chat pane to get stretched out super wide:

@angus it’s this line that caused the conflict:

.d-header .contents {
  min-width: 740px;
}

I removed it, and it seemed to not break the header search UI from what I can tell?

@Joey_Tuan It stops the UI from breaking if the window size is less than the width of the combined header elements. It’s a relatively marginal case, but if you reduce the width your window with the plugin installed you’ll see what I mean. Nevertheless, you’re right. It’s a ham-fisted approach to the issue. One sec, I’ll come up with a different way to do the same thing…

@Joey_Tuan I’ve made the search fully responsive and removed that css rule. Now the search input will resize if you resize the window and auto-hide if the header bar becomes too small to contain it. All CSS (and JS for that matter) is contained to the plugin elements, so there is no possibility of further conflict.

https://github.com/angusmcleod/discourse-header-search/commit/6ebe6284ab0b2bc0739e2ca24cd10d815ba5e48c

4 Likes

Hi, first of all thanks for the plugin, it’s very useful.
Now, we have an issue related to the button text that could be too long and it will ruin the site aspect with the text underneath the menu. This happens when the category/subcategory name is long enough or the screen size is small enough. You can see a sample in the attached screen capture:

As a fix, I was thinking of giving a possibility to enable/disable the category title from the seach button, so it will just say Search or something like that, and you can place the category title in the search box if you would like.

Thanks again.

1 Like

Thanks for the feedback. Yes I think the setting is not a bad idea. I may do that on the weekend. In the meantime, I’ve made the category search title format the same as the topic search title format, i.e.: “Search this category” so you can continue to use this.

https://github.com/angusmcleod/discourse-header-search/commit/11ee96c0ac00f92c5a1fb50dbc0e63f3fb0d4bd4

3 Likes

Hi,
Just done an update for discourse and it messed up the search bar

I was on an update frenzy and this time was not a good idea :frowning:

discourse-header-search (11ee96c)

Discourse version:
Version v1.5.0.beta13b +3 - discourse (03a1aa0)
+2 crashed the search bar

Waiting for any advise. Thanks!

PS: I believe this affected the search bar https://github.com/discourse/discourse/commit/1b4e0f3300e5927c4531322a0beb1928a484a9e7

@neil

Update 2:
discourse (77242e4) - back to normal. Thanks @sam

3 Likes

@dcgavril You’re all good for now? Any other issues with this plugin?

3 Likes

@angus Yes, everything seems ok now, we just need to keep an eye on the commit that @sam reverted https://github.com/discourse/discourse/commit/37ccfbdb2a63a4ffe84dab056469f894d69b7b3a
As it’s going to affect the search bar placement.

Thank you all for the quick fix.

1 Like

awesome plugin.
just an other issue:
if i minimize my window, the search field is shrinking and won’t get bigger any more until I refresh my site,
log at this picture.

any idea why?
thanks for your help

Hey @Fred_vom_Jupiter. Thanks for the bug report.

May I ask what browser you are using? Also, could you perhaps take a screencast?

The bar should be resizing automatically when you resize the browser window. Playing around with it just now it seems to be working OK in Chrome.

Cheers.

Can this plugin be installed if you hosted Discourse through a one-click install?

Depends on which one-click install you’re talking about. There might be some installers out there that don’t use our standard Docker image, which could make them incompatible with custom plugins.

But the Digital Ocean installer? Yes.

1 Like

The header search plugin interferes with the poll plugin, in particular the un-ordered list elements to hide the search area also hide the poll’s results.

I listed the bug here and removed all plugins to see where the issue was. After re-adding the header search plugin, the polls results start being hidden again (when scrolling or clicking away from the poll area).

I believe the problem is this line in the SCSS, which seems to effect all ul elements, so I’m guessing it instead needs to specify the header search’s class or id only.

2 Likes

@romdos Hey thanks for the bug report. tbh I’ve never made a poll before. On a brief attempt on my local the plugin doesnt seem to work…aren’t you just mean’t to include 'Poll: ’ in the topic title?

In terms of the source of the issue I doubt it’s that line of CSS as that is actually nested inside header-search-contents. See here: https://github.com/angusmcleod/discourse-header-search/blob/master/assets/stylesheets/header-search.scss#L6

In other words, that CSS selector actually resolves to .header-search-contents .results ul.

1 Like

It’s changed, make a list surrounded by [poll].

[poll]
- A banana charade
- Defensive egg fortress
[/poll]
3 Likes