Only show Fontawesome Icon in tab

lazarote

web enthusiastic
Collaborate
Registered
Joined
Jun 24, 2019
Messages
141
Points
53

Reputation:

Hi everyone, I have a question, I am currently using [XFA] Forum List Tabs 2.1.0 to split my forum sections, my result so far:

PC View:

1641988055706.png


Responsive:

1641988078298.png



The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/

But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?

my test enviroment:

1641988269964.png


The template code:

PHP:
<xf:if is="$xf.options.j_fl_enable">
    <xf:foreach loop="$xf.options.forumlist_tabs" value="$tab">
        <xf:if is="$tab.id is not empty">
            <xf:css>
                .content{$tab.id}{
                    display:none;
                }
                input#tab{$tab.id} {
                    display: none;
                }
                #tab{$tab.id}:checked ~ .content{$tab.id} {
                      display: block !important;
                    padding: 20px 0 0;
                }
            </xf:css>
            <input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> >
            <label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
        </xf:if>
    </xf:foreach>

<xf:js>
$("input[name='tabs']").change(function(){
    var tabid = $('input[type=radio][name=tabs]:checked').attr('id');
    XF.Cookie.set('tabid', tabid); 
});

$(window).on('load', function()
{
    var tabid = XF.Cookie.get('tabid');
    var inputid = 'input[type=radio][name=tabs][id='+tabid+']';
    $(inputid).prop("checked", true);
});
</xf:js>
<xf:css src="j_tabs_forum_list.less" />
</xf:if>

I think it could be done with this piece of code
PHP:
<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> ><label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

Javascript has nothing to do with it. You need to change the layout of the template a little. Then add LESS code with xenforo breakpoints like @xf-responsiveMedium and for FA icons you can just use .m-faBase();
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

Hi everyone, I have a question, I am currently using [XFA] Forum List Tabs 2.1.0 to split my forum sections, my result so far:

PC View:

View attachment 27396

Responsive:

View attachment 27397


The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/

But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?

my test enviroment:

View attachment 27398

The template code:

PHP:
<xf:if is="$xf.options.j_fl_enable">
    <xf:foreach loop="$xf.options.forumlist_tabs" value="$tab">
        <xf:if is="$tab.id is not empty">
            <xf:css>
                .content{$tab.id}{
                    display:none;
                }
                input#tab{$tab.id} {
                    display: none;
                }
                #tab{$tab.id}:checked ~ .content{$tab.id} {
                      display: block !important;
                    padding: 20px 0 0;
                }
            </xf:css>
            <input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> >
            <label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
        </xf:if>
    </xf:foreach>

<xf:js>
$("input[name='tabs']").change(function(){
    var tabid = $('input[type=radio][name=tabs]:checked').attr('id');
    XF.Cookie.set('tabid', tabid);
});

$(window).on('load', function()
{
    var tabid = XF.Cookie.get('tabid');
    var inputid = 'input[type=radio][name=tabs][id='+tabid+']';
    $(inputid).prop("checked", true);
});
</xf:js>
<xf:css src="j_tabs_forum_list.less" />
</xf:if>

I think it could be done with this piece of code
PHP:
<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> ><label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
lazaroteHey! How is it going? Understood or need help?
 

lazarote

web enthusiastic
Collaborate
Registered
Joined
Jun 24, 2019
Messages
141
Points
53

Reputation:

Hey! How is it going? Understood or need help?
notwonderfulI couldn't get it to work on localhost, I'm currently using the XFA addon, I'd like to use the other one since it loads faster, but I couldn't even center the tabs. I have noticed that there is also a small delay when the forum index is loaded :(
 
Top