Move StaffBar to Navbar (with badges)

[kolakube]

Pandemix submitted a new resource:

Move staff links to dropdown menu (with badges) - Merge the XF staff bar into the general navigation area with dropdown menu and alerts

Instead of adding the gray bar to the top of the page with staff links this mod adds the Admin/Reports/Approval links to a dropdown menu in your site's navigation and hides the original staff bar with CSS.

This resource was modified from @ShikiSuen's Put StaffBar into Navbar who has given me full permission to re-post my modification here....

Read more about this resource...

 

[ShikiSuen]

I am afraid that you may want to use @media commands in the LESS template to control whether this dropdown icon is to be shown for cellphone view.

Cellphone browsers have insufficient viewing widths.

Add this line beneath your LESS code block:

@media (max-width: @xf-responsiveNarrow) {.p-navStaffBar {display: none;} .p-staffBar {display: inline-block;}}

P.S.: Enable the dev mode of XenForo and you will see lots of system built-in variables to use directly in LESS templates.
Also, you can use data template selectors to control the effectiveness of certain LESS code block on specified XenForo webpages.

 

[kolakube]

Cellphone browsers have insufficient viewing widths.

Not always, the XF menu handles holding many icons pretty well so I opted to keep it there for admins by default.

 

[🔥Iggy🔥]

thank you for this....i did have one minor hangup implementing the hack however....

at first it did not work for me.....after carefully going over each step.....then i searched the page container template further and discovered there are actually 2 instances of the 'insert after code' suggested......adding the template call after the second instance made it work...

i suppose you may want to update this in the tutorial, but im wondering now should i delete the first instance of the template call i made? are they both needed or only the second one?

regards

 

[ShikiSuen]

thank you for this....i did have one minor hangup implementing the hack however....

at first it did not work for me.....after carefully going over each step.....then i searched the page container template further and discovered there are actually 2 instances of the 'insert after code' suggested......adding the template call after the second instance made it work...

i suppose you may want to update this in the tutorial, but im wondering now should i delete the first instance of the template call i made? are they both needed or only the second one?

regards

You are inserting one-line sentence to the PAGE_CONTAINER calling the HTML template of this plugin.
The CSS(LESS) code block you are going to insert (for example, the current plugin) controls the style of the HTML template of this plugin.

 

[🔥Iggy🔥]

You are inserting one-line sentence to the PAGE_CONTAINER calling the HTML template of this plugin.
The CSS(LESS) code block you are going to insert (for example, the current plugin) controls the style of the HTML template of this plugin.

yes, to be more clear this code appears 2 times in the page_container template:

<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
data-href="{{ link('account/visitor-menu') }}"
data-load-target=".js-visitorMenuBody">
<div class="menu-content js-visitorMenuBody">
<div class="menu-row">
{{ phrase('loading...') }}
</div>
</div>
</div>

i had to double check i wasnt imagining things, but it seems to be the case...the template call seems to need to be inserted after the second instance....however i didnt remove the other yet as i was confused some by this..

or maybe it needs it in both places idk..

 

[ShikiSuen]

yes, to be more clear this code appears 2 times in the page_container template:




i had to double check i wasnt imagining things, but it seems to be the case...the template call seems to need to be inserted after the second instance....however i didnt remove the other yet as i was confused some by this..

or maybe it needs it in both places idk..

His explanation of anchor spot may be misleading to you. The statement you said above shouldn't appear twice in this template unless.
My explanation is based on a vanilla PAGE_CONTAINER template:
---------

Forget his step 2, using my step 2 instead (a different explanation but does the same thing):

Find:

<a href="{{ link('conversations') }}"
                                class="p-navgroup-link

and put the following line right above it:

<xf:include template="template_pnavStaffBar" />

Step 2 done.

 

[ShikiSuen]

Before my better idea comes out, let me give you a hint which you can use it to improve your (this) mod by yourself:

Your (this) mod doesn't need double content checks. Only one content check is enough.
I mean: contents unselected below are unnecessary:

 

[ShikiSuen]

A simpler example of using contentcheck.

<xf:if contentcheck="true">
    Confirmed the existence of generated sub-content, displaying current content.
    <xf:contentcheck>
        This sub-content generated.
    </xf:contentcheck>
</xf:if>

 

[kolakube]

Your (this) mod doesn't need double content checks. Only one content check is enough.

Thanks for showing me, it makes the template look even more beautiful. Good luck on the next idea.

 

[ShikiSuen]

This is my latest design.

My design is to make the wrench-screw icon badged if AdminCP has error reports or must-attentions. However, there might be technical causes that hindered my scripts from checking whether such must-attention is detectable by public (non-Admin) templates.

The wrench-screw icon is no longer a dropdown-menu icon. It only shows to Admin.

Approval Qs and Reports are always shown up in the alerts. I am gonna make the Alerts icon badged for Approval Qs and Reports.