Provide default styles for search

How do I reproduce this? Is there a special recipe to install or something? I don't see it in Project Browser.

Got answer from @phenaproxima

ddev apply-recipe recipes/drupal_cms_search

This reminds me of #3172696: Search API-made exposed forms are not styled within Olivero → , maybe it's time to revisit that. Olivero has some really nice search styling out of the box, but it hasn't played nicely with Search API.

The styles from the patches in #6 look nice. The styles I provided are only for reference. I tried to comment them as good as possible, so it is easy to understand what should be styled.

Current status looking good at wide widths. But we need some changes to the recipe, so assigning back to @breidert

Changes needed:

I moved the region of the search to secondary_menu... but, we need another instance of this search block added into the primary_menu region. This is for accessibility reasons (decided back in the day by accessibility maintainers) to maintain focus order.

Evidently I can't assign tickets in this project. Will ping on Slack.

One more change pls :D

a.dmitriiev → made their first commit to this issue’s fork.

I have added one more instance of search block to primary_menu region.

Also the label was added to the views exposed form (search keywords). There is no option in views to set the label display options, so it was just added above the input.

Thanks! It's now styled. There's one bug:

The autocomplete dropdown doesn't work on the mobile version. To be honest, I think this is fine because it operates like normal. But just wanted to call it out.

@a.dmitriiev, @breidert: Can you give this a review and let me know if something is out of place or doesn't look right?

Great work, thank you Mike. I only found some minor errors.

Steps to reproduce:

1. Install and enable recipes for review

git clone git@git.drupal.org:issue/drupal_cms-3489037.git
cd drupal_cms-3489037/
ddev start
ddev drush site:install --yes
ddev drush recipe ../recipes/drupal_cms_blog
ddev drush recipe ../recipes/drupal_cms_events
ddev drush recipe ../recipes/drupal_cms_search

2. Create example content

3. Test desktop and mobile resolution

Results

Desktop resolution

Autocomplete works well:

Search also works well, but I would recommend to decrease the space between search results (views rows):

I personally think the styling of the autocomplete looks nice in the header, but I feel it should styled differently on the search result page:

However, for some reason autocomplete in the header only works when you are logged in.

When you are not logged in there is an error:

The error is search-wide.js?snyum7:21 Uncaught TypeError: Cannot set properties of undefined (setting 'searchIsVisible'). The link to the code is: https://git.drupalcode.org/issue/drupal_cms-3489037/-/blob/search-wide-s...

Mobile resolution

For mobile I found a bug, when you type in the search menu, the autocomplete is not visible. I think this is a z-index problem.

On the search page autocomplete is accessible, but the alignment seems to be off:

The search itself works nicely on mobile resulution.

How to proceed

As I see it three things should be fixed to create a good experience for search:

1. Fix autocomplete for non-logged-in-users
2. Fix styling of autocomplete in header for mobile resulutions
3. Style autocomplete differently in the search area

I can live with the spacing of the search results not being updated.

Please also add styles for facets. Currently facets is not part of the search recipe due to uncertainty in data model and content strategy. But was already created and is working.

To install facets do the following steps:

1. Pull branch somewhere (for example in test folder):

mkdir test
cd test/
git clone git@git.drupal.org:issue/drupal_cms-3488715.git

2. Copy the recipe from the branch to the recipes folder in Drupal CMS:

cp -rp recipes/drupal_cms_search_filters/ ../../recipes/

3. Add core patch for config actions for views to composer.json of Drupal CMS: https://git.drupalcode.org/project/drupal_cms/-/merge_requests/266/diffs...

"#3305859: Add config actions for views": "https://www.drupal.org/files/issues/2024-11-15/3305859-views-config-actions_0.patch"

4. Require modules:

ddev composer require drupal/facets:^3.0
ddev composer require drupal/better_exposed_filters:^7.0

5. Delete code and re-install with composer

rm -rf web/core
rm -rf vendor
rm patches.lock.json
ddev composer install

After this, when you to to /search you should see the facets

I'd like to progress this without worrying about facets for now, because we don't yet have a design for them, and the functionality is not yet merged.

Getting in the styles for search as it exists now is a top priority. Once this and the other baseline critical styling is done, we can see what else we have time for.

Fixed a couple things including the anonymous JS error.

However, I'm stuck on the styling for the dropdown. The issue is

• The wide search dropdown needs to have custom styling (dark background etc).
• The regular search dropdowns should not have this styling
• There's no dependable CSS selector where I can only style the wide search dropdown results.
• I delved into jQuery UI's autocomplete API to see if there was any type of pointer, reference, etc in the returned data. However, I struck out here too. Not sure quite how to proceed.

  Drupal.behaviors.searchWideForm = {
    attach(context) {
      once('search-wide-form', '[data-drupal-selector="simple-search-form"]', context).forEach(
        () => {
          $('.block-search-wide :is([type="text"], [type="search"])').autocomplete({
            open: function (event, ui) {
              // This doesn't reliably add the class to the correct dropdown. The event object doesn't point to it anywhere. The UI object is empty.
              document.querySelector('.search-api-autocomplete-search:has(.ui-menu-item)').classList.add('search-wide-dropdown');
            }
          });
        }
      );
    },
  };

I ended up "fixing" #24 with the latest commit.

When the wide search opens, it adds a CSS class to all search dropdowns (since we can't know which one is the correct one). On close, it removes the CSS class.

OK! I believe all items in #17 have been resolved!

So great to see this! Let's merge it, there are a couple of follow ups needed but don't want to hold this up any further.

Also just went ahead and made the change to show this recipe in PB here :)

It's pretty obvious to everyone by now that I really like committing things, but I especially like committing stable blockers. This is great work, well done all. Merged into 1.x. Thanks!

I reviewed and it looks good.

For reviewing I went to https://www.1xinternet.de/en/drupal-cms-start-demo and started a full demo with demo content for a better search experience.

Initially the search is only in the sidebar, because the main menu is crowded. For testing the search with the desktop menu I disabled some menu entries.

All search UIs look nice.

Automatically closed - issue fixed for 2 weeks with no activity.