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

fix: improve alerts & reports modal on small devices #19294

Conversation

diegomedina248
Copy link
Contributor

SUMMARY

The alerts & report modal content is divided into columns, but the content is neither responsive nor fluid, so it doesn't play well on small screen sizes.

This PR introduces small tweaks to ensure the content from one column does not overflow to the next.
The timezone selector is reduced when needed & the text inside it is truncated (on small screens).

A better way to approach this would require using media queries, but the viewport meta tag is not defined and thus the media queries based on width do not work.
It's a larger discussion to be had the path to introduce responsive design.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
Clipboard 2021-06-10 at 2 38 32 PM

After:
Screen Shot 2022-03-21 at 20 34 35

TESTING INSTRUCTIONS

  1. Open alerts & reports menu item
  2. Create an alert or report
  3. With the modal up, make your browser narrow

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@codecov
Copy link

codecov bot commented Mar 22, 2022

Codecov Report

Merging #19294 (a932cdd) into master (9ae51f7) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #19294   +/-   ##
=======================================
  Coverage   66.63%   66.64%           
=======================================
  Files        1670     1670           
  Lines       64570    64590   +20     
  Branches     6504     6507    +3     
=======================================
+ Hits        43028    43047   +19     
- Misses      19858    19860    +2     
+ Partials     1684     1683    -1     
Flag Coverage Δ
javascript 51.39% <100.00%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...frontend/src/views/CRUD/alert/AlertReportModal.tsx 52.38% <ø> (ø)
...frontend/src/components/TimezoneSelector/index.tsx 96.96% <100.00%> (+0.09%) ⬆️
superset-frontend/src/views/components/SubMenu.tsx 87.50% <0.00%> (-1.87%) ⬇️
superset-frontend/src/SqlLab/actions/sqlLab.js 60.73% <0.00%> (ø)
superset-frontend/src/views/components/Menu.tsx 60.00% <0.00%> (ø)
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx 38.09% <0.00%> (ø)
...perset-frontend/src/views/CRUD/welcome/Welcome.tsx 75.00% <0.00%> (+0.51%) ⬆️
superset-frontend/src/views/CRUD/utils.tsx 65.57% <0.00%> (+0.61%) ⬆️
...tend/src/views/CRUD/data/database/DatabaseList.tsx 67.39% <0.00%> (+1.91%) ⬆️
...perset-frontend/src/views/components/MenuRight.tsx 67.69% <0.00%> (+1.97%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9ae51f7...a932cdd. Read the comment docs.

@rusackas rusackas requested a review from eschutho April 6, 2022 05:03
@rusackas rusackas merged commit 32239b0 into apache:master Apr 13, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels Preset-Patch size/XS 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants