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

TimePicker: Prevent TimePicker overflowing viewport on small screens #59808

Merged
merged 6 commits into from Dec 9, 2022

Conversation

ashharrison90
Copy link
Contributor

What is this feature?

  • places the TimePickerContent in a modal for sm screen sizes

Why do we need this feature?

  • prevent content overflowing the viewport and creating a poor experience

Who is this feature for?

  • people using smaller viewports (e.g. mobile/tablet users)

Which issue(s) does this PR fix?:

Fixes #32369

Special notes for your reviewer:

Alternative to #59274

@ashharrison90 ashharrison90 added type/bug add to changelog timepicker The time picker is used on explore & dashboards backport v9.3.x labels Dec 5, 2022
@ashharrison90 ashharrison90 added this to the 9.3.2 milestone Dec 5, 2022
@ashharrison90 ashharrison90 self-assigned this Dec 5, 2022
@ashharrison90 ashharrison90 requested a review from a team as a code owner December 5, 2022 12:07
@ashharrison90 ashharrison90 requested review from joshhunt, JoaoSilvaGrafana and lpskdl and removed request for a team December 5, 2022 12:08
Copy link
Contributor

@lpskdl lpskdl left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

@ashharrison90 ashharrison90 merged commit 1497ad4 into main Dec 9, 2022
@ashharrison90 ashharrison90 deleted the ash/32369 branch December 9, 2022 15:02
grafanabot pushed a commit that referenced this pull request Dec 9, 2022
…59808)

* render timepicker in a modal style on small screens

* remove top: -1

* apply styles

* prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded

* Revert "prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded"

This reverts commit 7090443.

(cherry picked from commit 1497ad4)
ashharrison90 added a commit that referenced this pull request Dec 9, 2022
… screens (#60100)

TimePicker: Prevent TimePicker overflowing viewport on small screens (#59808)

* render timepicker in a modal style on small screens

* remove top: -1

* apply styles

* prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded

* Revert "prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded"

This reverts commit 7090443.

(cherry picked from commit 1497ad4)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
GuYounes pushed a commit to paul-wurth/BIXpert that referenced this pull request Feb 8, 2023
… screens (grafana#60100)

TimePicker: Prevent TimePicker overflowing viewport on small screens (grafana#59808)

* render timepicker in a modal style on small screens

* remove top: -1

* apply styles

* prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded

* Revert "prevent bug where selecting a relative range wouldn't apply if the absolute ranges were expanded"

This reverts commit 7090443.

(cherry picked from commit 1497ad4)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Time Menu on mobile phone (small screen) not readable
3 participants