Page
of 3

[free code] Convert Enjin Menu 1.0 -> Enjin Menu 2.0 (menu maker)

26 replies
Posts:
9
Likes:
+6
Will this allow for mobilization? I'm still looking for a better way to make our site mobile, and the biggest nightmare continues to be the menu bar. I haven't found a way that doesn't cost me days to get working. >_>
Posted Jan 12, 19
Posts:
4,832
Likes:
+2,748
Master
LEVEL 5
Technically this will be easier to make mobile than the existing module, but currently it is set to be not mobile friendly (to work with default Enjin).
Posted Jan 13, 19 · OP
Posts:
9
Likes:
+6
"Technically"?

I remember trying to make our site mobile about a year ago and no matter what I do within an element, the menu is the breaking point. So if I want to revamp our front page to be more of a landing/splash page, I either have to scrap that menu, or hack the crap out of the css. I got exhausted trying to go through every level of the divs on the menu 2.0 to try to make it work. </rant>

I guess what I'm saying is, if I have our site owner enable API and recreate our menu in a 1.0 element, is this still going to be a nightmare of hacking css on every single div level to try to import what bootstrap does automatically on a nav?
Posted Jan 14, 19
Posts:
4,832
Likes:
+2,748
Master
LEVEL 5
I will clarify.

This module only uses javascript to copy links of the enjin menu 1.0 and put them into a simple menu markup that can be manipulated easier. The Enjin API is only required for the site like and profile stuff.

The menu in this thread is easier to make mobile than the Enjin menu 1.0 since you have access to the base elements to manipulate directly. If you tried to make Enjin Menu 1.0 mobile, you would have to go in and override the MANY styles - So it is possible, but more difficult.

If you look at the CSS of this thread's menu, there isn't a whole lot of markup - You wouldn't be hacking anything, you just directly adjust the CSS to be mobile or fit your site's layout. There is literally only ONE static width in this whole menu and it is this:

Copy
.nav_inner{ max-width:1060px; margin-left:auto; margin-right:auto; }


Really, you just need to add rules to adjust the menu at different window sizes. For example, that static width would be placed in an @media rule.

@media all and (min-width:1060px){
.nav_inner{
max-width:1060px;
margin-left:auto;
margin-right:auto;
}
}

This means that if the browser window is 1060px or greater, don't allow the nav elements to expand to the edges of the screen (center it at 1060px wide). There would be a bunch of adjustments depending on what you are going for - I didn't make this menu mobile since the goal was to reproduce menu 2.0 (not improve it etc.).

I did make a thread on making your site mobile, it is here:https://www.enjin.com/forums/m/10826/viewthread/31774772-free-code-converting-site-to-be-mobile-responsive

Here is a thread for mobile profile/dash:https://www.enjin.com/forums/m/10826/viewthread/31787102-free-code-mobile-responsive-profile-dashboard

More here:https://atslayer.enjin.com/resources

In regards to the boostrap library / framework, I did originally (years ago) go down this route but found it to be more difficult to COMPLETELY integrate (as opposed to just adjusting Enjin to be mobile). If you want the prebuilt stuff in bootstrap, ie the collapsed navbar, I would suggest the following:

1) Using my mobile thread, add that CSS to your site
2) Download only the boostrap nav js / css and make your own menu. We shouldn't use the entire bootstrap framework since it will manipulate your site a lot (i.e .row is actively used by Enjin and bootstrap).
3) Use the like and profile JS from this thread and also copy the system nav divs to your boostrap menu ( I commented relevant divs).
4) Manually add your links to your boostrap nav (no need to use menu loader / enjin menu 1.0 if you know how to code the links)
Posted Jan 14, 19 · OP
Posts:
4
Likes:
0
Is there a way to centre the buttons?

edit: is there also a way of showing population of the server in the top section, eg next to site likes
Posted Jan 21, 19 · Last edited Jan 21, 19 by Ulterium N...
Posts:
4,832
Likes:
+2,748
Master
LEVEL 5
Add this CSS inside the <style> tags:

.nav_main .nav_inner>ul.nav_left{
float:none;
text-align:center;
display:block;
text-align:center;
}

Go to the bottom of the module and remove this:

<ul class="nav_right">
<!--Add manual <li><a href="LINKURL">LINK</a></li>... links if you want-->
</ul>
Posted Jan 22, 19 · OP
Posts:
4,832
Likes:
+2,748
Master
LEVEL 5
Sorry I cannot edit that post above, goes garbled.

In regards to Minecraft player counts:

1) In the javascript section, ABOVE the $(document).ready bit, add this:

function servercheck() {
var total_currentplayers=0;
var total_maxplayers=0;
var servers = {
"jsonrpc": "2.0",
"id": Math.round(Math.random() * (999999 - 100000) + 100000),
"method": "Minecraft.getServers",
"params": {
"api_key": enjin_api,
}
};



$.post('/api/v1/api.php', JSON.stringify(servers), function(response) {
if (response.result) {
var data = response.result;
var end_server = data.length;
var counter = 0;

$.each(data, function(index, server) {
counter++;
var server_id = server.server_id;
var name = server.name;
var max_players = server.max_players;
var online_players = server.players_online;
total_currentplayers += (online_players * 1);
total_maxplayers += (max_players * 1);

$('.nav_mc').html(total_currentplayers+' / '+total_maxplayers);

});

} else if (response.error) {
console.log(response.error.message)
}

}, "json");
};

2) Then Add this one line BELOW this bit : $(document).ready(function(){

servercheck();

3) In your system nav, BELOW this line:

Copy
<li class="my_like_site"><!--Dynamic--></li> <!--Add manual <li><a href="LINKURL">LINK</a></li>... links if you want-->


ADD:

<li class="nav_mc"></li>

4) Add the Minecraft.getServers to your API key.

It is likely you will need to style .nav_mc to make the text the same height etc, but let's get it online first.
Posted Jan 22, 19 · OP
Page
of 3
Social Media
Follow us on our social media!
You will receive information, news, sneak peaks, giveaways and more!
NoticeNotices