<div dir="ltr">Thanks for sharing, Jenny! These look great!<div><br></div><div>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.</div><div><br></div><div>It also looks like "Clear All Filters" and "150 Results | Select All" can display in the same line. </div><div><br></div><div>Both of these changes would give you back two lines.<br></div><div><br></div><div>For example:</div><div><br></div><div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><span style="background-color:rgb(0,0,255)"><font color="#ffffff">Browser: Firefox  X</font></span> <span style="background-color:rgb(0,0,255)"><font color="#ffffff">CSS Grade: A  X</font></span><br></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><font color="#0000ff">Clear All Filters</font><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px">       </span><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> </span><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> 150 results  |  </span><span style="background-color:transparent;white-space:pre;font-family:arial;font-size:13.3333px"><font color="#0000ff">Select All</font></span><br></div></blockquote></div><div><br></div><div>Versus:</div><div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><br>Active filters:<br><span style="background-color:rgb(0,0,255)"><font color="#ffffff">Browser: Firefox  X</font></span> <span style="background-color:rgb(0,0,255)"><font color="#ffffff">CSS Grade: A  X</font></span><br></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><font color="#0000ff">Clear All Filters</font><br><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px">   </span><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> </span><span style="background-color:transparent;white-space:pre;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> </span><span style="white-space:pre;background-color:transparent;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> </span><span style="white-space:pre;background-color:transparent;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> </span><span style="white-space:pre;background-color:transparent;color:rgb(0,0,0);font-family:arial;font-size:13.3333px"> 150 results  |  </span><span style="white-space:pre;background-color:transparent;font-family:arial;font-size:13.3333px"><font color="#0000ff">Select All</font></span></blockquote></div><div><br></div><div><br></div><div><br></div><div>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. </div><div><br></div></div><div class="gmail_extra"><br clear="all"><div><div class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div dir="ltr" style="font-size:12.8px"><br></div><div dir="ltr" style="font-size:12.8px">Jenn Giardino  <br></div><div dir="ltr" style="font-size:12.8px"><div><font color="#999999">Senior Interaction Designer</font></div><div><font color="#999999">User Experience Design Team</font></div><div><font color="#999999">Red Hat, Inc.</font></div><div><font color="#999999"><span style="font-size:12.8px">1-919-716-5045</span><br></font></div><div><a href="mailto:jgiardin@redhat.com" style="font-size:12.8px" target="_blank"><font color="#999999">jgiardin@redhat.com</font></a><br></div></div></div></div></div>
<br><div class="gmail_quote">On Mon, Jan 23, 2017 at 1:42 PM, Jenny Haines <span dir="ltr"><<a href="mailto:jhaines@redhat.com" target="_blank">jhaines@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hello,<div><br></div><div>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!)</div><div><br></div><div>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.)</div><div><br></div><div>Some points to note about the mobile screen translation:</div><div><ul><li>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.)</li><li>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.</li><li>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.)</li><li>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.</li><li>I have decided to turn off the "15^ per page" functionality for mobile, for a couple of reasons.</li><ul><li>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.</li><li>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.</li></ul></ul></div><div>Thanks for your feedback on these mobile layouts!</div><span class="HOEnZb"><font color="#888888"><div><br clear="all"><div><div class="m_-993901689359498950gmail_signature"><div dir="ltr"><div><div dir="ltr"><b><font size="2">Jenny Haines</font></b><div><b><font size="1">UI/VISUAL DESIGNER</font></b></div><div><font size="1">(m) <a href="tel:(443)%20889-2881" value="+14438892881" target="_blank">443-889-2881</a></font></div><div><font size="1"><a href="mailto:jhaines@redhat.com" target="_blank">jhaines@redhat.com</a></font></div><div><font size="1"><a href="mailto:jennyhaines10@gmail.com" target="_blank">jennyhaines10@gmail.com</a></font></div></div></div></div></div></div>
</div></font></span></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/<wbr>mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br></div>