XF 2.3 How to change the way my nodes present themselves on mobile?

[TMF Jeff]

On the mobile version of xenforo, only the node titles and the number of threads show up. I'd like to be able to customize that a little, so certain nodes also include the description when viewed on phones. Is that possible? If so, where would I find that?

Thanks!
Jeff

 

[forumSolution]

On the mobile version of xenforo, only the node titles and the number of threads show up. I'd like to be able to customize that a little, so certain nodes also include the description when viewed on phones. Is that possible? If so, where would I find that?

Thanks!
Jeff

not all node will have description ? only selected one right ?

 

[TMF Jeff]

Yes, I just have one or two where I think that would be more effective.

But that being said, if the only way is to do it by changing all of them I'd consider that too, because thinking about it now that would probably be more appropriate anyway.

Thanks very much for responding,
Jeff

 

[Old Nick]

By adding this code to your extra.less template forum descriptions will be displayed even on mobile:

@media (max-width: @xf-responsiveMedium) {
    .node-description {
        display: block;
    }
}

If you want to target only some forum, there is some code for this too, let me know the forum IDs.
That's free, no need to pay something for this kind of stuff...

 

[TMF Jeff]

Thanks very much! I really appreciate your time.

The specific nodes I have in mind are called "general-discussion.58" and "links-page-updates.26" which I guess means the IDs are 58 and 26? Those are the ones I think are really important for making this change, and I like to think I'm competent enough to at least extrapolate from one specific example into re-using it by changing the ID and any other identifiers if I need to

The only reason I'm not just doing it for all of them is that some of my descriptions are wordy, which works fine on desktop but I'm afraid would be obnoxious on mobile.

Thank you sir,
Jeff

 

[BassMan]

Try with this:

@media (max-width: @xf-responsiveMedium) {
    .node--id26, .node--id58 {
        .node-description {
            display: block;
        }
    }
}

 

[Old Nick]

Well done @BassMan !

I had gone so far from my side!!

in node_list_forum replacing :

<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>

By

<div class="node-description {{ in_array({$node.node_id}, [26, 58]) ? 'node-descriptionMobile' : '' }} {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>

And adding this to extra.less template:

@media (max-width: @xf-responsiveMedium) {
    .node-descriptionMobile {
        display: block!important;
    }
}

I didn't even think to add this to the code .node--id26, .node--id58 {

 

[TMF Jeff]

I really appreciate you guys being so willing to help!

 

[BassMan]

Oh, yes, we all like to complicate things from time to time.