Skip to content

UX: header search mobile support - follow up #32306

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 14 commits into from
Apr 17, 2025
Merged

UX: header search mobile support - follow up #32306

merged 14 commits into from
Apr 17, 2025

Conversation

yuriyaran
Copy link
Contributor

@yuriyaran yuriyaran commented Apr 15, 2025 •
edited
Loading

Follows up my initial PR on mobile search in header improvements.

Changes made

Styling

  1. added 4px spacing between search input and cancel button
  2. increased cancel button size (with padding) to match input height
  3. decreased search panel padding by 1/2 from 16px to 8px
  4. animation show/hide changed (from vertical to horizontal) and made it quicker (300ms->200ms)
  5. set html unscrollable when search panel is open

Dev

  1. changed data-test- value to be consistent with other element's attrs values
  2. clear search action tag changed from <a> to <DButton>

@yuriyaran yuriyaran self-assigned this Apr 15, 2025
@yuriyaran yuriyaran force-pushed the ux/header-search-mobile-support-follow-up branch from 8cc4324 to 4c43f74 Compare April 15, 2025 18:08
@yuriyaran yuriyaran marked this pull request as draft April 15, 2025 18:49
@yuriyaran yuriyaran force-pushed the ux/header-search-mobile-support-follow-up branch 2 times, most recently from 650f5b0 to 03c2743 Compare April 17, 2025 06:45
yuriyaran added 14 commits April 17, 2025 19:10
@yuriyaran
DEV: mobile search: changes show/hide animation
4cfc98e
@yuriyaran
DEV: increases padding for cancel mobile search button
deb35e4
@yuriyaran
DEV: cuts padding by 1/4 for .search-menu-panel
4c58649
@yuriyaran
DEV: search mobile: adds gap between input and button
bfe68a8
@yuriyaran
DEV: mobile search: renames for consistency
ae559e1
@yuriyaran
DEV: mobile search: sets search input unscrollable
d2fe2ed
@yuriyaran
DEV: mobile search: decreases .search-menu-panel padding
f865cb4
@yuriyaran
DEV: mobile search: makes html unscrollable on open search
c097cd0
@yuriyaran
DEV: mobile search: adds explanation on search hide behaviour
27720c7
@yuriyaran
DEV: mobile search: improves look of empty search panel
dcb1b39
@yuriyaran
DEV: header search: aligns icons inside input
eeb7121 
- clear button tag changed from a to button for consistency
- spinner, advanced search, and clear buttons aligned for consistency
@yuriyaran
DEV: mobile search: adds panel height animation
0765561
@yuriyaran
DEV: search-iput-wrapper: switches z-index to use z() func
664245f
@yuriyaran
DEV: clearSearch: fixes event handling
1ee51d0 
I overlooked removing event handling in clearSearch after I transitioned action handling from <a> to <DButton>. DButton handles event itself.
@yuriyaran yuriyaran force-pushed the ux/header-search-mobile-support-follow-up branch from 03c2743 to 1ee51d0 Compare April 17, 2025 11:11
@yuriyaran yuriyaran marked this pull request as ready for review April 17, 2025 11:24
@yuriyaran yuriyaran requested a review from jjaffeux April 17, 2025 11:24
@jjaffeux
Copy link
Contributor

@chapoi Im not convinced by the new animation at all, especially on closing that feels very odd and unlike anything else we have in the app.

jjaffeux
jjaffeux reviewed Apr 17, 2025
View reviewed changes
jjaffeux
jjaffeux approved these changes Apr 17, 2025
View reviewed changes
Copy link
Contributor

@jjaffeux jjaffeux left a comment

Choose a reason for hiding this comment

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

nice improvement

@yuriyaran yuriyaran merged commit ff334fd into main Apr 17, 2025
20 checks passed
@yuriyaran yuriyaran deleted the ux/header-search-mobile-support-follow-up branch April 17, 2025 12:01
yuriyaran added a commit that referenced this pull request May 15, 2025
@yuriyaran
Revert "UX: header search mobile support - follow up (#32306)"
44bb733 
This reverts commit ff334fd.
@yuriyaran yuriyaran mentioned this pull request May 15, 2025
Merged
jjaffeux pushed a commit that referenced this pull request May 15, 2025
@yuriyaran
Revert UX: header search mobile support (#32748)
215a129 
This reverts the complete work on "Improvements to mobile search" while
respecting all the related changes that were made after the next two
PRs:

- #32306
- #31711
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jjaffeux jjaffeux jjaffeux approved these changes

Assignees

@yuriyaran yuriyaran

Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@yuriyaran @jjaffeux