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.

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

Typeahead visual fixes #494

Merged
merged 1 commit into from
Jan 10, 2022
Merged

Typeahead visual fixes #494

merged 1 commit into from
Jan 10, 2022

Conversation

denniskigen
Copy link
Member

@denniskigen denniskigen commented Jan 10, 2022 •
edited
Loading

Requirements

  • This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.
  • My work conforms to the OpenMRS 3.0 Styleguide.
  • I checked for feature overlap with existing widgets.

Summary

UI fixes to the typeahead search inputs in the Conditions and Visit Note forms that include:

  • Addition of a bit of top margin and a border around the search results container to help distinguish it from the rest of the form content.
  • Application of just enough padding to the search results so that the last result gets partially hidden from view. The intention here is to make it apparent to the user that the search results container is scrollable when it has more than five results. Without this, it might not be immediately obvious that the container is scrollable.
  • Making the search input in the Conditions form full-width. I think this is an improvement especially for conditions with longer names that might not be immediately parseable on first viewing.

Screenshots

Before

Screenshot 2022-01-10 at 12 03 32

After

Screenshot 2022-01-10 at 11 39 56

Screenshot 2022-01-10 at 11 39 17

Screenshot 2022-01-10 at 11 39 00

@denniskigen
Typeahead visual fixes
1fc68b2 
Applies some UI fixes to the typeahead search inputs for conditions and diagnoses. These include:

- Use of a border around the search results container to distinguish it visually from the rest of the form content.
- Use of enough padding for each search result so that the last visible result gets partially hidden from view. The hope is that this makes it apparent to the user that the results container is scrollable. I'm keen to hear if a different approach would work better here.
- Making the conditions search input in the `Conditions` form full-width. Constraining it to just 50% of the viewport meant search results with long names aren't instantly parseable on first viewing. Full-width might be too wide but it certainly looks better than half-width.
@brandones brandones merged commit 6a802ce into master Jan 10, 2022
@brandones brandones deleted the typeahead-fixes branch January 10, 2022 22:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandones brandones brandones approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@denniskigen @brandones