Pavilion Header Search Theme Component

:warning: This theme component is no longer maintained. See below for more information

Alternatives include Advanced Header Search and Advanced Search Banner

Repository: GitHub - paviliondev/discourse-header-search-theme · GitHub

Preview on Theme Creator

This is a re-packaging of the Header Search Plugin so it can be used as a theme.

The functionality is the same as the plugin.

See further:

https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/15043/16?u=angus

37 „Gefällt mir“

Welche Version von Discourse unterstützt dieses Theme?

Ich bin noch bei v 1.9.0.beta4 und dieses Theme funktioniert nicht, weil die APIs nicht unterstützt werden (Version nicht unterstützt):

lINfEQp
Wenn es Ihre Absicht ist, dass dieses Theme nur ab v 1.9.0.beta5 und höher funktioniert, fügen Sie diese Information bitte dem OP hinzu. :wink:

BTW: Wenn man das Skript von version='0.8.9' auf version='0.8' ändert, funktioniert es zumindest in Beta 4.

4 „Gefällt mir“

Hallo @angus, ich habe festgestellt, dass mein Forum im Internet Explorer nicht lädt (es funktioniert mit Firefox, Chrome, Opera und Edge). Nach vielen Neuaufbauten habe ich herausgefunden, dass das Problem anscheinend von diesem Theme stammt.

Wenn ich es in meinem Standard-Theme deaktiviere, wird das Forum normal geladen.


Kann jemand, der dieses Theme verwendet, bitte prüfen, ob seine Seite im IE lädt?

5 „Gefällt mir“

IE still doesn’t support Object.keys? Ok I’m downloading a few IE vms to do some more thorough testing…

6 „Gefällt mir“

@Trash @bombledmonk Fixed for IE 11 :sunny:

Note: To test Discourse on IE on Mac:

  1. dl the relevant IE vm here.
  2. Load vm into VirtualBox and start it.
  3. Run Discourse at localhost:3000 on the host (i.e. your normal browser).
  4. Open IE in the virtual guest and navigate to http://10.0.2.2:3000/ and your local instance will load.

There’s no need to edit the C:\windows\system32\drivers\etc\hosts file on the guest.

8 „Gefällt mir“

Thank you master :wink:, it works now on Windows.

5 „Gefällt mir“

I was wondering if it would be possible to make the search bar be on the right, beside the hamburger menu, instead of having it beside the icon?

1 „Gefällt mir“

It’s not possible to use settings in a theme, so you will need to apply css via the site customizer or fork the theme. It should be doable with css. I can take a look at what css would be required on Sunday, unless you want to take a look sooner.

3 „Gefällt mir“

A little late, but here’s the css if you want the search bar to appear on the right of the header instead of the left. Add it in Admin > Customize.

.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;
   }
    
   .search-input {
     float: right;
     margin-left: 10px;
     margin-right: 0;
   }
    
   .search-context {
     padding-top: 5px;
     float: right;
   }

   .results {
     right: 0;
   }
}

You’ll, need to update to the latest for it to work properly.

https://github.com/angusmcleod/discourse-header-search-theme/commit/c65ee64071ef70c46654270bce7ff79bd2fc8850

The same CSS will also work for the Header Search Plugin.

See e.g. https://discourse.angusmcleod.com.au/

5 „Gefällt mir“

@angus, das Suchsymbol ist sichtbar, wenn du die Seite öffnest (auch wenn es nicht funktioniert), und verschwindet, wenn du ein Thema öffnest oder auf die Suchleiste in der Kopfzeile klickst.

OunZGtq
Mir scheint, das ist auch schon beim Plugin passiert, und du hattest bereits eine Korrektur vorgenommen.

3 „Gefällt mir“

hm. I did apply the same fix to the theme at the time.

https://github.com/angusmcleod/discourse-header-search-theme/commit/84d359276485110c53b3e5992526c36cfe8cb7f7

Are you sure your theme is up to date?

I’m using the theme in my sandbox and it seems to be working ok.

Does it always happen, or only sometimes?

5 „Gefällt mir“

Oh damn, you are right.
I never remember that the themes should be updated manually…my bad :flushed:

5 „Gefällt mir“

If you have the header search bar up and slowly shrink the width of the browser, there will come a point where the hamburger menu is moved above the user avatar if the search bar is aligned right:


and the hamburger menu and user avatar is moved slightly down if the bar is in it’s default position:
image

3 „Gefällt mir“

The theme automatically hides the search bar when the header becomes too small to contain it + the logo + the right icons. I had to increase the absolute width of the search bar to properly handle right alignment which threw that calculation off. The search bar should now disappear and the search icon re-appear in that scenario.

https://github.com/angusmcleod/discourse-header-search-theme/commit/22409b3eeb0c05473f688e42e4fc30ef2b59efab

7 „Gefällt mir“

I’ve tweaked the size calculation logic here so that you can arbitrarily set the width of the header-search using css and the show hide behaviour will respond accordingly. This helps those with wide site logos.

The default width of the search-header contains, which holds both the search input and the contextual search options, is 600px.

This was an issue for sites with wide logos, as there wasn’t enough space to fit the element comfortably (particularly with the sign up / login buttons on the right).

Now you can add something like this to your custom css.

div.search-header {
    width: 400px;
}

And that new size will be factored into the calculation that determines whether to show / hide the search input when the window is resized.

https://github.com/angusmcleod/discourse-header-search-theme/commit/80b7d8ea8975c3eac26f8c6fa01fbe744a2c5b4a

cc @pradeepkumar

5 „Gefällt mir“

Thank you so much @angus, works like a charm! :slight_smile:

3 „Gefällt mir“

With the search bar aligned right, the hamburger and and user menu doesn’t connect to the icons:

1 „Gefällt mir“

Fixed: Style tweaks · paviliondev/discourse-header-search-theme@ab51e85 · GitHub

I’ve made a slight change to the right alignment css, so please re-copy / paste that.

3 „Gefällt mir“

When in a topic, scrolling down until the search icon appears, clicking it and scrolling back up will make it so that there are two search bars on the screen at the same time. (Some times there’s a delay before the header search bar appears)

I think I did that part of that intentionally, the idea being that if you have one search open already, it would be jarring to have the search input suddenly jump to the header if you happened to scroll up. But it seems to be working imperfectly. I’ll take a look tomorrow.