[4.1 Beta 2] Content list stats do not look right on narrow-width displays. Suggest to implement more of XF2's structItem-cell--meta structure
Currently, content list item stats look rather ugly on narrow width devices (e.g. phones) under XenForo 2.x.
Attachment 1678
Compare this with regular XF threads and this is better set out.
Attachment 1679
The issue here is the VaultWiki HTML structure for stats is different to XenForo's thread stats, so XF's responsive media query CSS doesn't kick in here. XenForo separates each row of stats into a separate dt/dd pair in their own dl container. VaultWiki only specifies the one dl container. While not shown the above screenshot, the second row of stats in VW is also sometimes cut off by 1-2 pixels for the characters that lie below the baseline (e.g. g, j, p, q, y) - this affects "Pa
ges".
VW stats example:
Code:
<div class="vw-content-list-meta structItem-cell structItem-cell--meta">
<div class="vw-content-list-stats-contain">
<div class="vw-content-list-stats-contain2">
<dl class="vw-content-list-stats vw-floatcontainer" style="max-height: 36px;">
<dt title="Views">Views:</dt>
<dd>1</dd>
<dt title="Pages">Pages:</dt>
<dd>0</dd>
</dl>
</div>
</div>
</div>
XF2 thread stats example:
Code:
<div class="structItem-cell structItem-cell--meta" title="First message reaction score: 0">
<dl class="pairs pairs--justified">
<dt>Replies</dt>
<dd>0</dd>
</dl>
<dl class="pairs pairs--justified structItem-minor">
<dt>Views</dt>
<dd>1</dd>
</dl>
</div>
----
In addition to tweaking the stats HTML structure, I suggest that 'Pages' (for category and book content types) or 'Edits' (for other content types) should take priority over 'Views'. Tweaking this ought to allow XF CSS to kick in and hide 'Views' for narrow width devices. The narrow view could then look something like the below picture:
Attachment 1680
To improve the structItem-cell--latest column styling for narrow widths, I added the following CSS to vw_content_list.less:
Code:
@media (max-width: @xf-responsiveWide)
{
.vw-content-list-update dl {
& .vw-icon-small:before {
font-size: @xf-fontSizeSmaller;
height: @xf-fontSizeSmaller;
width: @xf-fontSizeSmaller;
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.vw-content-list-update dl {
display: inline-flex;
}
.vw-content-list-update dt {
padding-right: 0.25em;
}
}