Make 'Recent Topics...
 
Notifications
Clear all

Suggestion [Solved] Make 'Recent Topics' and 'First post and replies' text clickable, not just the arrow

9 Posts
3 Users
2 Reactions
214 Views
Posts: 35
Topic starter
(@golabs)
Trusted Member
Joined: 3 years ago

With the 2022 theme, there is the 'Recent Topics' text with an arrow next to it in the Extended Layout.

Today - only the arrow is clickable to toggle the list with topics. This is not really practicle on mobile devices. Would it be an idea to make the text clickable as well?

Same applies for the 'First post and replies' text further down.

Please let me know when you require screenshots or is the explaination above sufficient?

8 Replies
Sofy
Posts: 4416
 Sofy
Admin
(@sofy)
Support Team
Joined: 6 years ago

Hi @golabs 

You should customize the wpForo theme files.

Please read attentively this doc: https://wpforo.com/docs/wpforo-v2/forum-themes/theme-files/ You'll find more information about wpForo theme files here

For an update-safe way of customization, please refer to this documentation: https://wpforo.com/docs/wpforo-v2/forum-themes/theme-customization/

1 Reply
(@golabs)
Joined: 3 years ago

Trusted Member
Posts: 35

Hi @sofy I'm currently working on updating my customizations and this is something I noticed which is not handy at all when on a mobile device hence my 'suggestion' tag to the post as this will benefit everyone once incorporated in the core files.

At the moment I'm looking into getting a temp solution in place via my customized theme files BUT that should just be temp as this is a pretty significant UI/UX problem that will frustrate forum users on mobile devices.

Posts: 35
Topic starter
(@golabs)
Trusted Member
Joined: 3 years ago
For now, I turned
<span class="wpfcl-5"><?php wpforo_phrase('Recent Topics'); ? ></span> &nbsp;
<i id="img-arrow-<?php echo intval($forum['forumid']) ? >" class="topictoggle fas fa-chevron-<?php echo ( $topic_toggle == 1 ? 'up' : 'down' ) ? >" style="color: rgb(67, 166, 223);font-size: 14px; cursor: pointer;"></i>
 
into
<span class="wpfcl-5" id="trigger-topictoggle-<?php echo intval($forum['forumid']); ?>"><?php wpforo_phrase('Recent Topics'); ?></span> &nbsp;
<i id="img-arrow-<?php echo intval($forum['forumid']); ?>" class="topictoggle fas fa-chevron-<?php echo ($topic_toggle == 1 ? 'up' : 'down'); ?>" style="color: rgb(67, 166, 223); font-size: 14px; cursor: pointer;"></i>
 
in my custom theme file and added this JS code
document.addEventListener('DOMContentLoaded', function() {
var triggers = document.querySelectorAll('[id^="trigger-topictoggle-"]'); // Selects all elements whose ID starts with "trigger-topictoggle-"

    triggers.forEach(function(trigger) {
        trigger.addEventListener('click', function() {
            // Extract the forum ID from the element's ID
var forumId = this.id.replace('trigger-topictoggle-', ''); // Remove the prefix to get the forum ID
            
            // Construct the ID of the corresponding arrow
            var arrowId = 'img-arrow-' + forumId;

            // Trigger a click on the corresponding arrow
            document.getElementById(arrowId).click();
        });
    });
});
 
This will do as a temp workaround but as I mentioned, it would be nicer/better when the text would trigger the toggle by default from the actual 2022 theme files as well to improve UI/UX on mobile devices!

Besides the 'Recent Topics' there are more of these elements around (e.g. 'Recent Questions').

2 Replies
Sofy
 Sofy
Admin
(@sofy)
Joined: 6 years ago

Support Team
Posts: 4416

I'll ask the developers to take this into consideration for future versions. 

(@golabs)
Joined: 3 years ago

Trusted Member
Posts: 35

@sofy thanks, I'm sure many will enjoy it when it's being implemented 🙂

Robert
Posts: 10518
Admin
(@robert)
Support Team
Joined: 8 years ago

Hi @golabs,

I'm really sorry but I cannot follow you what are you trying to change. Please provide some screenshot and explain on the screenshot.

2 Replies
(@golabs)
Joined: 3 years ago

Trusted Member
Posts: 35

Hi @robert see this image from the documentation:

Currently only the blue arrow is triggering the toggle to show the list with recent topics. On a mobile device you won't always be able to get it to toggle as it's a small area. When the blue arrow + the orange text together would be clickable to trigger the toggle, than the issue is gone on mobile devices and you get a 100% hit rate on the toggle.

Besides Recent Topics there are more of these toggles (e.g. Recent Questions) that would benefit from this change.

Robert
Admin
(@robert)
Joined: 8 years ago

Support Team
Posts: 10518

@golabs,

Ok I see, thank you for the description. I've added this in our to-do list.