Issue: [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

Issue Tools
- View Changes

August 6, 2019 1:17 PM
ACL

Regular Member
[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 "Pages".

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; } }

Issue Details

Issue Number 5814

Issue Type Bug

Project VaultWiki 4.x Series

Category Styling / CSS

Status Fixed

Priority 5 - Minor Bugs / Small Tweaks

Affected Version 4.1.0 Beta 2

Fixed Version 4.1.0 Beta 3

Milestone (none)

Software DependencyXenForo 2.x

License TypePaid

Users able to reproduce bug 0

Users unable to reproduce bug 0

Attachments 3

Assigned Users (none)

Tags (none)

August 11, 2019 1:17 PM

pegasus

VaultWiki Team

This is mostly fixed in the next release. Note that VaultWiki content list items can have more than 2 stats, which transform into a drop-down menu, and this is why the standard structItem-meta structure is not used. So the HTML structure has not been changed, but the CSS has been updated for more consistent styling at lower widths.

There was a bug where 3+ stats were not transforming into a drop-down in XF2.
As part of fixing this issue, 2+ stats transform into a drop-down at lower widths.

Reply

+ Reply

All times are GMT -4. The time now is 5:00 PM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: [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

Issue Tools