FLUID-5532: Responsive UIO #825
Conversation
Also added meta tags for initial size to examples, manual-tests, and demos that use the sliding panel.
- panels take up full width - descriptions are hidden offscreen - headers centred and icons removed Also added missing/incorrect headers for adjusters in desktop view
For mobile view.
Otherwise if we trigger the onSignificantDOMChange event on window resize, needed for switching between large and small screen presentations, it will show the panel contents when the panel is closed.
As adjustments are applied the panels will need to be scrolled.
Reducing padding so that reset icon shows even when text size, text style and enhance inputs are enabled.
demos/prefsFramework/index.html
Outdated
| @@ -93,14 +95,22 @@ | |||
| <div class="flc-overviewPanel fl-overviewPanel-container"></div> | |||
| <!-- BEGIN markup for Preference Editor --> | |||
| <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel"> | |||
| <!-- This div is for the sliding panel that shows and hides the Preference Editor controls in the mobile view--> | |||
| <div class="fl-panelBar fl-panelBar-above"> | |||
There was a problem hiding this comment.
What's the reason to have two identical divs for showing prefs editor in the mobile view and in the desktop view?
There was a problem hiding this comment.
@cindyli one is above the sliding panel and one is below. The one above is used for mobile and the one below for desktop. It is possible to have a single one and change the placement with styling; however, doing so will break the tab order for one of the implementations. I had spoken to Lisa about that, and she indicated that it would be a WCAG failure. In the future we plane to only have the panel bar above, in all cases. However, there needs to be some design consideration worked out for how this will affect the interactions on the desktop view first. Meaning that the change won't happen in the near future.
| min-width: 15em; | ||
| .fl-prefsEditor-buttons { | ||
| width: 100%; | ||
| height: 66px; |
There was a problem hiding this comment.
Is there a reason that the button height is defined in "px" instead of "rem"? The same comment applies to line 68 & 74.
There was a problem hiding this comment.
@cindyli yes, so that the button size remains fixed on mobile. When using rem values, it will cause the button to grow and push the sliding panel down as a user is interacting with it. For the other lines, it's to save space when adjusting text size in the panels. I'll add some comments to the styl file.
| } | ||
|
|
||
| .fl-prefsEditor-reset { | ||
| // border-right: 1px solid #ccc; |
|
Please add the border for "show preference" button when UIO is set to be used: 1. on a mobile device; 2. when a high contrast theme is turned on.
|
In mobile the bottom border could go missing if the line height was increased and other adjustments were applied.
|
@cindyli fixed the missing border. The border was actually always there, it was just being hidden when the line-spacing and other adjustments were applied. |
|
According to the mobile designs specified in FLUID-5532 JIRA, moving in between UIO panels is by touching "<" to go to the previous panel and ">" to go to the next panel. The implementation in this pull request doesn't have this functionality. Instead, panels are separated with a vertical line and the scrolling of panels is same as what's for the larger screen devices (see attached screenshot). I wonder what's the thought of this implementation. Is it intermediate?
|
|
Yes it's intermediate. |
|
Merged at f8d92a5 |
Responsive styling for UIO.
Notes:
https://issues.fluidproject.org/browse/FLUID-5532