Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antechinus on October 14, 2011, 04:12:02 AM

Title: Improved Stats template
Post by: Antechinus on October 14, 2011, 04:12:02 AM
Just an idea I came up with since I was messing around with jQuery anyway.

On the stats page, the eight divs at the top ('General Stats' through to 'Most Time Online') take up more height than the average screen has available. This is a bit of a nuisance if you want to check the yearly/monthly figures in the collapsible table at the bottom of the page. Scrolling sux, right?

Easy fix:

Stats.template.php:

Find:
<div id="statistics" class="main_section">
<div class="cat_bar">
<h3 class="catbg">', $context['page_title'], '</h3>
</div>


Replace:
<div class="cat_bar">
<h3 class="catbg">', $context['page_title'], '
<a href="#" id="stats_toggle">
<img src="', $settings['images_url'], '/upshrink.png" alt="+" class="icon floatright" style="margin-top: 4px;" />
</a>
</h3>
</div><div id="stats_show_hide">


Find:
</div>
<br class="clear" />
<div class="flow_hidden">


Replace:
</div></div><!--/#stats_show_hide-->
<br class="clear" />
<div class="flow_hidden">


Find:
// ]]></script>';
}
}


Replace:

$(document).ready(function(){
$("#stats_show_hide").show();
$("#stats_toggle").show();

$("#stats_toggle").click(function(){
$("#stats_show_hide").slideToggle();
});
});

// ]]></script>';
}
}


And of course you will already be calling jQuery in the head section of your index.template.php. Details for several ways of doing that are in this post (http://www.simplemachines.org/community/index.php?topic=438693.msg3087193#msg3087193), if you need to know.

Result is that you'll have a clickable icon like the info centre collapse/expand, and when you click it the top eight divs will roll up and vanish, leaving the yearly/monthly stats table right where you can see it. Click again and the divs come back.

Obviously you could add extra show/hide triggers for each row of divs if you really wanted to. You could also add some extra js to switch upshrink images when the display states are toggled. I can't be bothered doing that at the moment. I think the basic version is fine for the number of times I use that page.

If anyone wants to nick this idea and package it as a mod, feel free. It'll probably be default in 2.1 anyway.


Title: Re: Improved Stats template
Post by: bloc on October 14, 2011, 04:08:39 PM
In fact, its worthwhile doing with or without JQuery, since the advantage is pretty clear here.
Title: Re: Improved Stats template
Post by: Antechinus on October 14, 2011, 04:44:13 PM
Well it's very easy and clean with jQuery and I'm using it anyway. Not worth writing plain old js for it, really.
Title: Re: Improved Stats template
Post by: bloc on October 14, 2011, 06:54:16 PM
I would agreed on that - I am using Mootools for the same thing/reason.

But the SMF native js code is here to used right now - I would think a mod would more easily be able to add a upshrink on that page, without having to add JQ as well. SMF 2.1 isn't even out yet..so it makes less sense referring to that at this stage, IMHO. You do say "probably", not "absolutely certain". ;)
Title: Re: Improved Stats template
Post by: Antechinus on October 14, 2011, 07:00:49 PM
Yes but for all my custom stuff I'm using jQuery like a junkie uses smack, so I'd rather rewrite the code with jQ than just adapt the default js. Gives a nicer result IMO and is hardly any more work.
Title: Re: Improved Stats template
Post by: thearmykid on April 03, 2013, 10:41:12 PM
nice share worked fantastic ! thanks