[Patternfly] Responsive Filtering/Pagination Bars Contribution

[Jenn Giardino]

Thanks for sharing, Jenny! These look great!

I'm wondering if the text "Active Filters" is necessary, or if the act of
filtering is enough for the user to understand what the listed filters are.

It also looks like "Clear All Filters" and "150 Results | Select All" can
display in the same line.

Both of these changes would give you back two lines.

For example:

Browser: Firefox  X CSS Grade: A  X

Clear All Filters 150 results | Select All


Versus:


Active filters:
Browser: Firefox  X CSS Grade: A  X

Clear All Filters
150 results | Select All




Also, right now it looks like the separator between "150 results" and
"Select All" is the pipe character "|", but in the toolbar above the
filters, the separator is a gray border. I'm interested in seeing how you
would handle the visual styling of that separator so that it's more
visually consistent with the separators in the toolbar.



Jenn Giardino
Senior Interaction Designer
User Experience Design Team
Red Hat, Inc.
1-919-716-5045
jgiardin at redhat.com

On Mon, Jan 23, 2017 at 1:42 PM, Jenny Haines <jhaines at redhat.com> wrote:

> Hello,
>
> I am curious what the PatternFly community thinks about how I've
> translated filtering and pagination bars for the smallest possible mobile
> screen size. (320px width!)
>
> I've attached an image of the new desktop-width filtering and pagination
> bars. Using the content from this desktop layout, I've rearranged and
> optimized it for the smallest possible screen width. (See also the three
> attached mobile layouts.)
>
> Some points to note about the mobile screen translation:
>
>    - I have decided to hide the "Delete Rows" and "Restore Rows" buttons
>    inside the kebab to save precious mobile space. (This is a very common
>    solution to optimize content for mobile screens. The table content is
>    paramount, so condensing additional functionality is a smart move to see
>    more data.)
>    - You'll notice a new "Filter" button at the top left (solely for
>    mobile). This helps to save vertical screen space upon default screen load.
>    If the user wants to create a filter, they simply select this "Filter"
>    button to expose the filter form field. Selecting the same button again
>    hides this form field.
>    - Please ignore the actual table content on mobile, as we have not
>    gotten to optimizing tables for mobile at this time. (That's why I've
>    blurred it out.)
>    - I have determined that the pagination bar at the bottom should
>    become sticky for mobile, as the user shouldn't have to scroll far to see
>    these controls.
>    - I have decided to turn off the "15^ per page" functionality for
>    mobile, for a couple of reasons.
>       - It takes up additional vertical space, as it would need to be
>       stacked above the rest of the pagination controls. Stacking it above the
>       rest of the pagination controls would mean that we could not use a "sticky"
>       pagination bar solution.
>       - On a mobile screen, there is not a huge need for more than 15
>       consecutive table rows. More than this number, and the scrolling would seem
>       endless, as the user can probably only see about 4 rows "above the fold" at
>       any given time.
>
> Thanks for your feedback on these mobile layouts!
>
> *Jenny Haines*
> *UI/VISUAL DESIGNER*
> (m) 443-889-2881 <(443)%20889-2881>
> jhaines at redhat.com
> jennyhaines10 at gmail.com
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/570d2772/attachment.htm>