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.