Issue: [4.1 Beta 3] Styling tweaks: Miscellaneous minor issues for area and content lists, tab-less mode

This issue covers a few really minor styling-related issues for your consideration.

1) Sub-areas in Area block: Empty node-statsMeta and whitespace.

On my test site, the .node-statsMeta element (shown for narrower responsive width) contains a <dl></dl> element with nothing within it. This causes unnecessary whitespace on narrow displays. Whether or not the lack of any dt/dd child elements is expected, it might be worth implementing an XF content check for this section of vw_area_bit. For example, find:
Replace with:

Attachment 1697


2) Area content list block: Latest wrapping to new line.

In the default XF style, the last change timestamp in area page lists (vw-content-list-update structItem-cell structItem-cell--latest) can sometimes wrap onto a new line when the printed time is long, e.g. Wednesday at x:xx PM. It seems that the width is a few pixels too small in order to fit the status icon and time. Lowering the right padding for .vw-content-list-update dt helps to an extent when the timestamp is x:xx PM, but not for xx:xx PM e.g. Wednesday 10:01 PM.


Attachment 1696


3) Tab-less 'controls' button: Shown despite zero menu items, border-radius not applied.

Navigating to a red link (uncreated page) with an account that lacks the relevant permission to create new pages reveals a scenario where the 'controls' menu is displayed without any visible menu options. In this scenario, it'd make sense to not display this button.

In the XF default style, this button lacks the border-radius on the top right and bottom right corners because it isn't the last element in the button group. As soon as this button is clicked, the menu element is relocated within in the DOM structure and this border-radius styling is resolved. XFMG seems to workaround this by wrapping the "..." button and menu in a containing .buttonGroup-buttonWrapper element, i.e.:
4) Tab-less watch button icon: Use fa-eye instead of fa-bell. Update 08/2020: No longer applicable due to changes in XF 2.2.

In XenForo 2.0/2.1, the bell icon represents the 'Alerts' menu in the main navigation, while the eye icon is utilised in structured lists to show the watched status of content (e.g. threads in forum view). For this reason I think that fa-eye might be more appropriate for this VaultWiki feature. Update 08/2020: I take back this concern. Due to XF2.2 changes, fa-bell has replaced fa-eye in watched lists.


5) Tab-less 'main' button: fa-undo icon.

In certain scenarios, e.g. editing a page or viewing revision history, this button could be ambiguous to people not already familiar with its purpose. These people might think it means 'undo this revision'. But as for an alternative icon, I don't have a solid answer. Perhaps fa-file-alt could work. Or even the default icon for each page content type, e.g. template page would use fa-puzzle-piece category fa-sitemap, and so on.


6) Area-tree top border and responsive medium/narrow widths.

The existing CSS border-top: none; for :nth-child(2), :nth-child(3) could be adjusted when window width crosses responsiveMedium and responsiveNarrow breakpoints. The suggestion I offered in issue 5730 didn't cater for borders. The below CSS edit to vw_area.less seems to do the trick:

Find:
Replace with:
This works backwards to a lot of the XF media queries, with min-width instead of max-width. I figured that this method might be more compatible with custom styles as it does not require re-adding borders from node_list.less (which may be different from style to style). Or you might have a different approach/idea .


----

Comments, thoughts, etc on any/all of these tweaks?