Widgets should be more responsive #333
Comments
|
Here is an example of the Points logs screen right now on
There are several different strategies that we could use here. The most obvious is hiding columns. Although we could also determine a sane minimum width of the table and let users scroll. Or we could have a minimum and automatically display the overflow on hover. That could become annoying though. Not sure what experience would be best on mobile. |
|
Here is what it looks like with the description hidden:
With the time hidden:
With the points and time hidden:
The problem with hiding columns though is that different columns will have priority for different people, probably. So just doing this automatically is probably not going to work well. It would be better to give users the option as to which columns to show in the widget. |
|
Using scrolling instead, with a minimum width of 500px:
Some users may prefer this, but it is really not the best experience not to be able to see all the information at once. So maybe it should be another option for users, but some folks would probably rather hide columns than have it use scrolling. |
|
The option of having it fly out looks like this:
This is nice, however, it has the most potential issues. Small screens, different background colors, z-index issues, etc. It may have its place, but for some users it would just be asking for bugs. |
|
Here is what the widget looks like in the Customizer with the option to disable each column:
And here is what it looks like with the additional option of forcing horizontal scrolling:
I toyed with the idea of also letting the user set a width here, but after further reflection I decided against it, because I am trying to avoid inline CSS (everything being done with classes on the table right now). So I just let it default to 500px. |
|
Something that I noticed was that the table columns are being forced to all be the same width, despite the fact that they contain disproportionate amounts of content. This is a result of the default styling for tables in TwentyFifteen including
|
|
Y'know, another thing that we could do here is hide the user names and only display the avatars. Again, that is something that could be controversial, but we might want to give users that option. I don't think that there is a good way for us to just hide the text, we'd have to wrap it in a span that we can target with CSS. Probably that's a good idea anyway. |
|
Here is what it looks like with the usernames hidden:
Obviously, this is something that will only be useful on sites where most people have their avatar set. |
|
So much for the points logs widget. Let's consider the other widgets now. Here is what the Top Users widget looks like right now on TwentyFifteen:
Just adding
Really, I'm not sure that we need to do much else beside that for it right now. Although some users do want the option to hide the rank, maybe we should make that an option for this widget. |
|
Or maybe we should just not display the rank title of the users in the widget by default. Decisions, not options. It would break back-compat in UX, but the fact is that we've had several requests to not display it, probably for the very reason that it doesn't do well in the widget. Here is what it would look like:
|
|
Another improvement would be to change the title of the Position column, since the length of that word makes the entire column wider. Something like this is better (though we'd need to still have screen-reader text for a11y):
|
|
I also noticed that there is a double-border along the top of each row. It turns out that this is a part of our CSS for the table, and I'm not sure why. It doesn't appear to be needed here though. Perhaps it was designed in a theme that didn't have borders between table rows, and we thought that was bad. But really, that is a design decision I think that we can safely leave up to theme authors. It looks better:
|
|
I missed the border on the bottom of the table in that screenshot. Also, we apparently had some extra padding in the cells also, which isn't necessary (unless a theme is not styling tables at all). It looks like these styles go all the way back to the beginning, so I have no clear idea why I originally added them anyway. Removing them expands the padding just slightly on TwentyFifteen:
|
|
Now on to the My Points widget. Here is what it currently looks like:
I guess for consistency with the Points Logs widget, we should add the column hiding and horizontal scrolling options. |
|
To reduce duplication, I've decided to extend the points logs widget here. I've also decided to just go ahead and give users the option to display the user column if they want to here as well. In the process I realized that the horizontal scrolling option (and the hide usernames option) were not able to be turned off, and fixed this in the
I guess if we are going to enable the display of the user column here, we might want to enable the hiding of usernames as well, though I doubt that the option to display the user column is likely to be used often. I could be wrong though. |
|
Final cut:
|
|
Note that because of the way that we had to set the
That is all the options we have with |
The table can quickly become cramped on small sidebars, especially the description column. To alleviate this, we give the user some more options in regard to how the table is displayed: - We allow the user to hide any of the columns of the table via the widget settings. - We allow horizontal scrolling to be forced an teh table width to be set at 500px. In addition, we make sure that the table does not used fixed layout, since that isn't a good experience for the nature of this table. And, we've intentionally done all of this without any inline styles. See #333
It improves display when a theme normally displays tables with fixed layout. See #333
This improves the display in the widget, which is often cramped. We define the `.screen-reader-text` class styles for ourselves, which are not guaranteed to be defined by all themes. See #333
These date back to the dawn of WordPoints, but aren't really needed. See #333
On many themes the widget areas are too cramped to present data in a table like this when there is too much of it. Showing the rank is probably best left out of there by default. See #333
This allows us to easily take advantage of the new options added to the logs widget to improve display on skinny sidebars. The `widget_body()` method of the points logs widget is now more configurable via class properties. And the `form()` method is broken up into several different functions for each set of fields, for easier sub-classing. In the process a bug in the saving of the horizontal scrolling and hide user names options was discovered, that prevented the disabling of these options, and was fixed. See #333
The logs tables in the widgets can easily look bad on skinny sidebars (or just any average sidebar, really). We should make them more responsive, so that they look better by default. We may also want to consider adding some settings that will allow them to be styled.
The text was updated successfully, but these errors were encountered: