[nodebb-theme-tron] Tron Theme for NodeBB

[Tanner]

Tron theme for NodeBB. Comes with a CSS/JQuery push-right menu and slide-down category descriptions. More to come as time goes on.

Note: Work in progress.

Screenshots

##Screencast

##Installation

npm install nodebb-theme-tron

##Github

https://github.com/Paaltomo/nodebb-theme-tron

[baris]

The video shows Flip theme

[Tanner]

Fixed :3 You're fast!

[esiao]

@Tanner Nice theme.
Working on mine aswell and it seems that we had the same idea for sidebar navigation.
Really clean I'm digging it

[Tanner]

@esiao Thanks man! Really appreciate it.

Some other changes that I made today:

• Updated sidebar menu items to have left-border and highlight on hover
• Fixed height issue with the side-menu
• Added custom link area in the side-menu
• Changed default font to Ubuntu
• Verified widgets work with the theme, including the MOTD/header widget area
• Fixed a small issue with the description slider

Things to still work out:

• How to make the sidebar full height all the time
• Add more interactivity with the UI
• Make it mobile-ready
• Alter menu so that it condenses at a certain width
• Fix sidebar functionality on tablets
• Make sidebar retract when user clicks anywhere on page
• Any other improvements/suggestions

[a_5mith]

I'll take a look into a few of your todos now bud, the sidebar doesn't work on an iPad for example. Looks good though, may fork this to work on a template I've been looking at.

[esiao]

@Tanner
How to make the sidebar full height all the time
Make sidebar retract when user clicks anywhere on page

I have done this two things.
For the first one I've cheated :
My body has the same background as my sidebar and there's a min-height of 100%. The rest of the page is in a page div container.

And for the second point it's a bit tricky.

$('body').on('click',function(event){
	if ($(this).hasClass('open-menu')) {
		if (!$(event.target).is('.navbar-default.header') && !$(event.target).parents(".navbar-default.header").is(".navbar-default.header") ) {
			$('.menu').toggleClass('close-menu');
			$('body').toggleClass('open-menu');
		}			
	}
});

You need to bind a click event on your body. Check if the sidebar is open (open-menu class in my case). And then see what was the event target and if it's different from the navbar (first condition) or from the childs of the navbar (second condition) which is tested by checking that the parent exist. And then doing your thing to close. In my case I'll alter my menu icon + I remove the class on body.

Hope that can help you

[julian]

These dark themes for NodeBB are epic...

[a_5mith]

@esiao said:

Wow... Love that sidebar.

[Tanner]

@esiao Thanks man! Worked great for getting the full height on the sidebar. Now just to do some more fixes and it'll be almost as good as yours

Will try to work out the javascript part myself but I'm no good at that side of things...

I'm also thinking of putting a default background in place instead of just leaving it white. What do you guys think of this:

[julian]

@Tanner The smaller in file size, the better But yeah, adding a background adds a lot of depth in my opinion, as long as it's not too intrusive.

[Tanner]

@julian Sounds good to me, but how does one use {relative_path} to indicate the file location of an image for a theme? Do you use that method or is there another way to implement an image in a theme, like putting it in the public folder for example?

[julian]

You can declare a directory in your plugin to be a "static" directory. That means it'll be mounted under your plugin's pseudo-directory.

In your plugin.json:

 "staticDirs": {
    "images": "public/images"
 }

This means if I request a file forum.example.org/plugins/nodebb-plugin-myplugin/images/cat.jpg, NodeBB will serve /path/to/your/plugin/public/images/cat.jpg

[Tanner]

So I need to make a plugin for the theme, then?

Edit: the theme is a plugin, technically, no?

[julian]

Themes can be plugins, you just have to create a plugin.json

[Tanner]

Beat me to it before I could edit fast enough

+1 cat.jpg for you, @julian

[Tanner]

Here are the new screenshots now that it's got a default background:

[meetdilip]

Cool !!!

[Tanner]

@esiao said:

And for the second point it's a bit tricky.

$('body').on('click',function(event){
if ($(this).hasClass('open-menu')) {
if (!$(event.target).is('.navbar-default.header') && !$(event.target).parents(".navbar-default.header").is(".navbar-default.header") ) {
$('.menu').toggleClass('close-menu');
$('body').toggleClass('open-menu');
}
}
});

You need to bind a click event on your body. Check if the sidebar is open (open-menu class in my case). And then see what was the event target and if it's different from the navbar (first condition) or from the childs of the navbar (second condition) which is tested by checking that the parent exist. And then doing your thing to close. In my case I'll alter my menu icon + I remove the class on body.

Hope that can help you

I can't seem to get this to work properly. What I have so far is this:

$('#site-wrapper').on('click',function(event){
if ($(this).hasClass('show-nav')) {
    if (!$(event.target).is('.site-menu') && !$(event.target).parents(".site-menu").is(".site-menu") ) {
        $('#site-wrapper').toggleClass('show-nav');
    }            
}

});

Yet no event occurs when I click the #site-wrapper section. Will fiddle around with it but until I jimmy it to work, anyone have a suggestion?

[esiao]

@Tanner That's because you need to bind the click on body. And then analyze the event target like you did.