Skip to content

Conversation

Roene-JustBetter
Copy link
Member

@Roene-JustBetter Roene-JustBetter commented Aug 20, 2024

Before:
Scherm­afbeelding 2024-08-20 om 11 42 47
Scherm­afbeelding 2024-08-20 om 11 45 28

After:
Scherm­afbeelding 2024-10-08 om 14 50 02
Scherm­afbeelding 2024-10-08 om 14 50 43
Scherm­afbeelding 2024-10-08 om 14 51 22
Scherm­afbeelding 2024-10-08 om 14 51 37

Hover:
Scherm­afbeelding 2024-10-09 om 10 35 56

What is changed:

  • Styling see Before vs After screenshots.
  • Show maximum of 3 products.
  • Show maximum of 3 categories.
  • Add "Show all results { search query }.
  • Add no results state.

@Roene-JustBetter
Copy link
Member Author

Jade-GG
Jade-GG previously approved these changes Aug 27, 2024
jordythevulder
jordythevulder previously approved these changes Sep 6, 2024
Jade-GG
Jade-GG previously approved these changes Sep 6, 2024
Comment on lines 38 to 40
{{-- These classes are only used when you come from a page with a product listing, --}}
{{-- click on a link that leads to a 404 page and try to use the search there --}}
class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
class="relative [&_*]:!m-0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you test this case?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tested the case local:

  1. Created a link that leads to a 404 page.
  2. Navigated to a page where a product listing is used.
  3. Clicked on the link that leads to a 404 page.
  4. Used the autocomplete to search.

Tested running yarn dev & yarn prod

inactive: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
inactive: {
DEFAULT: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
100: 'rgb(var(--inactive-100) / <alpha-value>)', // Inactive light background color
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#580 --> inactive will change here.

Jade-GG
Jade-GG previously approved these changes Oct 9, 2024
jordythevulder
jordythevulder previously approved these changes Oct 15, 2024
@royduin
Copy link
Member

royduin commented Dec 5, 2024

Could you arrange a follow-up on this with the latest changes implemented like the colors and named z-indexes?

@royduin royduin marked this pull request as draft December 5, 2024 09:38
@Roene-JustBetter
Copy link
Member Author

Moved this Pull request to a new one because this one is created from a fork. New pull request can be found here: #670

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants