Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend - Styling autocomplete #670

Merged
merged 30 commits into from
Dec 11, 2024
Merged

Conversation

Roene-JustBetter
Copy link
Member

What is changed:

  • Styling see Before vs After screenshots (below)
  • Show maximum of 3 products.
  • Show maximum of 3 categories.
  • Add "Show all results"
  • Add no results state.
  • Make use of the new colors
  • Make use of the new z-indexes.

Screenshots current autocomplete
Scherm­afbeelding 2024-12-05 om 15 01 18
Scherm­afbeelding 2024-12-05 om 15 01 48

Screenshots new autocomplete
Scherm­afbeelding 2024-12-05 om 14 50 46
Scherm­afbeelding 2024-12-05 om 14 50 54

Added no results that doesn't exist in the old autocomplete
Scherm­afbeelding 2024-12-05 om 14 50 08
Scherm­afbeelding 2024-12-05 om 14 50 18

v-on:value-selected="search"
component-id="autocomplete"
:inner-class="{ input: '{{ $inputClasses }}' }"
{{-- 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"
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

Roene-JustBetter and others added 4 commits December 6, 2024 15:40
Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
…s.blade.php

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
@royduin royduin merged commit 2564685 into master Dec 11, 2024
12 checks passed
@royduin royduin deleted the feature/frontend-autocomplete branch December 11, 2024 07:44
@royduin
Copy link
Member

royduin commented Dec 11, 2024

I still like to see a review from @jordythevulder and/or @JimmyHoenderdaal

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.

3 participants