[Patternfly] Responsive Filtering/Pagination Bars Contribution

[Jenny Haines]

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
jhaines at redhat.com
jennyhaines10 at gmail.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/e066742e/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: responsive-desktop.png
Type: image/png
Size: 263901 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/e066742e/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: responsive-320x480.png
Type: image/png
Size: 150033 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/e066742e/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: responsive-320x480-openfilter.png
Type: image/png
Size: 146520 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/e066742e/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: responsive-320x480-selectedkebab.png
Type: image/png
Size: 146923 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170123/e066742e/attachment-0003.png>