XF 2.0 Show thread view count on mobile version

[Xiomera]

I would like to show the Thread views count on the mobile version too. Via a custom template edit.

I found the section where this is implemented in the template, but I have no clue, which section or templates are responsible for the mobile version.
I need a hint where I can change the layout of this part in the mobile version, or anything else that helps me to accomplish this feature.

Desktop

Mobile


Thanks in advance.

-Xiomera

 

[Jordyn]

In template structured_list.less if you remove

.structItem-minor
{
display: none;
}

The views show on mobile. So if you can work with the position using .structItem-minor, it may just work for you.

 

[Xiomera]

In template structured_list.less if you remove

.structItem-minor
{
display: none;
}

The views show on mobile. So if you can work with the position using .structItem-minor, it may just work for you.

I'm sry, but in the structured_list.less is only this

.structItem-minor
{
    font-size: @xf-fontSizeSmaller;
    color: @xf-textColorMuted;

    .m-hiddenLinks();
}

And if I remove this, only the font format of the view count is changed ...

 

[Jordyn]

I'm sry, but in the structured_list.less is only this

.structItem-minor
{
    font-size: @xf-fontSizeSmaller;
    color: @xf-textColorMuted;

    .m-hiddenLinks();
}

And if I remove this, only the font format of the view count is changed ...

Sorry mate, there is 2 .structItem-minor. The first one is for normal view. The second one is for mobile view.

Normal view

.structItem-minor
{
    font-size: @xf-fontSizeSmaller;
    color: @xf-textColorMuted;

    .m-hiddenLinks();
}

Mobile view

            .structItem-minor
            {
                display: none;
            }

 

[Xiomera]

for me this still doesn't work ....
I now managed to achieve my goal of displaying the thread view count on the mobile version.
+ don't show the threadstarter and reply count
+ change color of the thread view count (desktop and mobile version)
In the following I share my own intern documentation.

PS: I use a theme, so this is not the default XF template code.

Before

After

 

[Xiomera]

core_list.less
Copy/paste the existing pairs--justified css class below the original one and change the color.

&.pairs--justified

&.pairs--justifiedorange
    {
        .m-clearFix();

        > dt
        {
            float: left;
            max-width: 100%;
            margin-right: @xf-paddingMedium;
            color: @xf-paletteAccent3;
        }

        > dd
        {
            float: right;
            text-align: right;
            max-width: 100%;
            color: @xf-paletteAccent3;
        }
    }

color: @xf-paletteAccent3;

structured_list.less
Change what is shown at the mobile version.
(There are to identical ones. Work with the one under @media (max-width: @xf-uix_discussionListCollapseWidth), I guess it's for the resolution we need)

&.structItem-cell--meta
        {
            display: block;
            width: auto;
            float: left;
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
            color: @xf-textColorMuted;
            font-size: @xf-fontSizeSmaller;
            display: none;

            .structItem-minor
            {
                display: none;
            }
            .pairs
            {
                > dt,
                > dd
                {
                    display: inline;
                    float: none;
                    margin: 0;
                }
  
                dt {display: none;}
                dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
                dd:after {
                    content: "\00A0\00B7\20";
                    color: @xf-textColorMuted;
                }
               &.pairs--justified{display:none;}
            }

display: none;
.structItem-minor{display: none;}
display all infos (views, etc.)
dt {display: none;}
dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
dd:after {
content: "\00A0\00B7\20";
color: @xf-textColorMuted;}
don't display the reply icon
&.pairs--justified{display:none;}
overwrite this css class that this normal one is not shown (we have a custom other one we will use)

&.structItem-cell--latest
        {
            display: block;
            width: auto;
            float: left;
            padding-top: 0;
            padding-left: 0;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            line-height: 1;
            display:none;

display:none;
don't display thread starter and date/time

thread_list_macros
Use our custom css class for the html, which displays the thread view count.

            <dl class="pairs pairs--justifiedorange structItem-minor">
                <dt>{{ phrase('views') }}</dt>
                <dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number : number($thread.reply_count+1)) }}</dd>
            </dl>

<dl class="pairs pairs--justifiedorange structItem-minor">

 

[Hotfix]

core_list.less
Copy/paste the existing pairs--justified css class below the original one and change the color.

&.pairs--justified

&.pairs--justifiedorange
    {
        .m-clearFix();

        > dt
        {
            float: left;
            max-width: 100%;
            margin-right: @xf-paddingMedium;
            color: @xf-paletteAccent3;
        }

        > dd
        {
            float: right;
            text-align: right;
            max-width: 100%;
            color: @xf-paletteAccent3;
        }
    }

color: @xf-paletteAccent3;

structured_list.less
Change what is shown at the mobile version.
(There are to identical ones. Work with the one under @media (max-width: @xf-uix_discussionListCollapseWidth), I guess it's for the resolution we need)

&.structItem-cell--meta
        {
            display: block;
            width: auto;
            float: left;
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
            color: @xf-textColorMuted;
            font-size: @xf-fontSizeSmaller;
            display: none;

            .structItem-minor
            {
                display: none;
            }
            .pairs
            {
                > dt,
                > dd
                {
                    display: inline;
                    float: none;
                    margin: 0;
                }
 
                dt {display: none;}
                dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
                dd:after {
                    content: "\00A0\00B7\20";
                    color: @xf-textColorMuted;
                }
               &.pairs--justified{display:none;}
            }

display: none;
.structItem-minor{display: none;}
display all infos (views, etc.)
dt {display: none;}
dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
dd:after {
content: "\00A0\00B7\20";
color: @xf-textColorMuted;}
don't display the reply icon
&.pairs--justified{display:none;}
overwrite this css class that this normal one is not shown (we have a custom other one we will use)

&.structItem-cell--latest
        {
            display: block;
            width: auto;
            float: left;
            padding-top: 0;
            padding-left: 0;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            line-height: 1;
            display:none;

display:none;
don't display thread starter and date/time

thread_list_macros
Use our custom css class for the html, which displays the thread view count.

            <dl class="pairs pairs--justifiedorange structItem-minor">
                <dt>{{ phrase('views') }}</dt>
                <dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number : number($thread.reply_count+1)) }}</dd>
            </dl>

<dl class="pairs pairs--justifiedorange structItem-minor">

Did you ever get this to work?