Merge pull request #137 from BNoiZe/master

Some more bugfixes, soft animation when resizing window
This commit is contained in:
Michael Kaufmann
2013-10-27 05:22:15 -07:00
5 changed files with 84 additions and 36 deletions

View File

@@ -35,7 +35,7 @@
</div>
</if>
<else>
<div class="progress">
<div class="progress">
<div class="bar" style="width: 0%"></div>
</div>
</if>
@@ -53,7 +53,7 @@
</div>
</if>
<else>
<div class="progress">
<div class="progress">
<div class="bar" style="width: 0%"></div>
</div>
</if>

View File

@@ -4,10 +4,10 @@ $header
<img src="templates/{$theme}/assets/img/icons/domains_big.png" alt="" />
{$lng['panel']['dashboard']}
</h2>
<div class="canvasitems">
<div class="canvasitems" id="statsbox">
<div class="canvasbox">
<input type="hidden" id="customers" class="circular" used="{$overview['number_customers']}" available="{$userinfo['customers']}" assigned="{$userinfo['customers_used']}">
<canvas id="customers-canvas" width="120" height="76"></canvas>
<canvas id="customers-canvas" width="120" height="76"></canvas><br/>
{$lng['admin']['customers']}<br />
<small>
{$overview['number_customers']} {$lng['panel']['used']}<br />
@@ -20,7 +20,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="domains" class="circular" used="{$overview['number_domains']}" available="{$userinfo['domains']}" assigned="{$userinfo['domains_used']}">
<canvas id="domains-canvas" width="120" height="76"></canvas>
<canvas id="domains-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['domains']}<br />
<small>
{$overview['number_domains']} {$lng['panel']['used']}<br />
@@ -33,7 +33,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="subdomains" class="circular" used="{$overview['subdomains_used']}" available="{$userinfo['subdomains']}" assigned="{$userinfo['subdomains_used']}">
<canvas id="subdomains-canvas" width="120" height="76"></canvas>
<canvas id="subdomains-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['subdomains']}<br />
<small>
{$overview['subdomains_used']} {$lng['panel']['used']}<br />
@@ -46,7 +46,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="diskspace" class="circular" used="{$overview['diskspace_used']}" available="{$userinfo['diskspace']}" assigned="{$userinfo['diskspace_used']}">
<canvas id="diskspace-canvas" width="120" height="76"></canvas>
<canvas id="diskspace-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['diskspace']}<br />
<small>
{$overview['diskspace_used']} {$lng['panel']['used']}<br />
@@ -59,7 +59,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="traffic" class="circular" used="{$overview['traffic_used']}" available="{$userinfo['traffic']}" assigned="{$userinfo['traffic_used']}">
<canvas id="traffic-canvas" width="120" height="76"></canvas>
<canvas id="traffic-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['traffic']}<br />
<small>
{$overview['traffic_used']} {$lng['panel']['used']}<br />
@@ -72,7 +72,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="mysqls" class="circular" used="{$overview['mysqls_used']}" available="{$userinfo['mysqls']}" assigned="{$userinfo['mysqls_used']}">
<canvas id="mysqls-canvas" width="120" height="76"></canvas>
<canvas id="mysqls-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['mysqls']}<br />
<small>
{$overview['mysqls_used']} {$lng['panel']['used']}<br />
@@ -85,7 +85,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="emails" class="circular" used="{$overview['emails_used']}" available="{$userinfo['emails']}" assigned="{$userinfo['emails_used']}">
<canvas id="emails-canvas" width="120" height="76"></canvas>
<canvas id="emails-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['emails']}<br />
<small>
{$overview['emails_used']} {$lng['panel']['used']}<br />
@@ -98,7 +98,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="email_accounts" class="circular" used="{$overview['email_accounts_used']}" available="{$userinfo['email_accounts']}" assigned="{$userinfo['email_accounts_used']}">
<canvas id="email_accounts-canvas" width="120" height="76"></canvas>
<canvas id="email_accounts-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['accounts']}<br />
<small>
{$overview['email_accounts_used']} {$lng['panel']['used']}<br />
@@ -111,7 +111,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="email_forwarders" class="circular" used="{$overview['email_forwarders_used']}" available="{$userinfo['email_forwarders']}" assigned="{$userinfo['email_forwarders_used']}">
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas>
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['forwarders']}<br />
<small>
{$overview['email_forwarders_used']} {$lng['panel']['used']}<br />
@@ -125,7 +125,7 @@ $header
<if $settings['system']['mail_quota_enabled'] == 1>
<div class="canvasbox">
<input type="hidden" id="email_quota" class="circular" used="{$overview['email_quota_used']}" available="{$userinfo['email_quota']}" assigned="{$userinfo['email_quota_used']}">
<canvas id="email_quota-canvas" width="120" height="76"></canvas>
<canvas id="email_quota-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['email_quota']}<br />
<small>
{$overview['email_quota_used']} {$lng['panel']['used']}<br />
@@ -140,7 +140,7 @@ $header
<if $settings['autoresponder']['autoresponder_active'] == 1>
<div class="canvasbox">
<input type="hidden" id="email_autoresponder" class="circular" used="{$overview['email_autoresponder_used']}" available="{$userinfo['email_autoresponder']}" assigned="{$userinfo['email_autoresponder_used']}">
<canvas id="email_autoresponder-canvas" width="120" height="76"></canvas>
<canvas id="email_autoresponder-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['autoresponder']}<br />
<small>
{$overview['email_autoresponder_used']} {$lng['panel']['used']}<br />
@@ -155,7 +155,7 @@ $header
<if (int)$settings['aps']['aps_active'] == 1>
<div class="canvasbox">
<input type="hidden" id="aps_packages" class="circular" used="{$overview['aps_packages_used']}" available="{$userinfo['aps_packages']}" assigned="{$userinfo['aps_packages_used']}">
<canvas id="aps_packages-canvas" width="120" height="76"></canvas>
<canvas id="aps_packages-canvas" width="120" height="76"></canvas><br/>
{$lng['aps']['numberofapspackages']}<br />
<small>
{$overview['aps_packages_used']} {$lng['panel']['used']}<br />
@@ -169,7 +169,7 @@ $header
<div class="canvasbox">
<input type="hidden" id="ftps" class="circular" used="{$overview['ftps_used']}" available="{$userinfo['ftps']}" assigned="{$userinfo['ftps_used']}">
<canvas id="ftps-canvas" width="120" height="76"></canvas>
<canvas id="ftps-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['ftps']}<br />
<small>
{$overview['ftps_used']} {$lng['panel']['used']}<br />
@@ -183,7 +183,7 @@ $header
<if $settings['ticket']['enabled'] == 1>
<div class="canvasbox">
<input type="hidden" id="tickets" class="circular" used="{$overview['tickets_used']}" available="{$userinfo['tickets']}" assigned="{$userinfo['tickets_used']}">
<canvas id="tickets-canvas" width="120" height="76"></canvas>
<canvas id="tickets-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['tickets']}<br />
<small>
{$overview['tickets_used']} {$lng['panel']['used']}<br />
@@ -194,9 +194,9 @@ $header
</small>
</div>
</if>
</div>
<h3>System Information</h3>
<section class="dboarditem bradius">
<table>
<tr>

View File

@@ -363,6 +363,9 @@ aside.right {
right:36px;
font-size:80%;
}
.overviewsearch input[type="text"] {
width: 150px;
}
.overviewadd {
padding:10px;
@@ -834,6 +837,7 @@ select[multiple="multiple"] {
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
text-align: center;
}
.progress .bar {
width:1px;
@@ -908,12 +912,16 @@ label.nobr {
/* CANVAS STUFF */
.canvasitems {
margin: 0 auto;
text-align: center;
position:relative;
overflow:hidden;
width:100%;
margin-top:10px;
margin-bottom:10px;
padding: 0 0 0 10px;
}
.canvasbox {
width: 130px !important;
margin: 10px;
width: 130px;
margin: 10px 20px 10px 0;
text-align: center;
float: left;
height: 150px;

View File

@@ -1,4 +1,44 @@
(function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
$(window).smartresize(function(){
resizecanvas();
});
function resizecanvas() {
var divwidth = $('#statsbox').width();
var space = divwidth % 150;
var elementspl = (divwidth - space) / 150;
var elementwidth = 130 + Math.round(space / elementspl) - 1;
$(".canvasbox").animate({width: elementwidth}, 500);
}
$(document).ready(function() {
resizecanvas();
var usedColor = "#91c46b";
var assiColor = "#287e7e";
var unliColor = "#56606e";

View File

@@ -5,11 +5,11 @@ $header
{$lng['panel']['dashboard']}
</h2>
<section class="dboardcanvas">
<section class="dboardcanvas" id="statsbox">
<if $userinfo['subdomains'] != '0'>
<div class="canvasbox">
<input type="hidden" id="subdomains" class="circular" used="{$userinfo['subdomains_used']}" available="{$userinfo['subdomains']}">
<canvas id="subdomains-canvas" width="120" height="76"></canvas>
<canvas id="subdomains-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['subdomains']}<br />
<small>
{$userinfo['subdomains_used']} {$lng['panel']['used']}<br />
@@ -23,7 +23,7 @@ $header
<if $userinfo['diskspace'] != '0'>
<div class="canvasbox">
<input type="hidden" id="diskspace" class="circular" used="{$userinfo['diskspace_used']}" available="{$userinfo['diskspace']}">
<canvas id="diskspace-canvas" width="120" height="76"></canvas>
<canvas id="diskspace-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['diskspace']}<br />
<small>
{$userinfo['diskspace_used']} {$lng['panel']['used']}<br />
@@ -37,7 +37,7 @@ $header
<if $userinfo['traffic'] != '0'>
<div class="canvasbox">
<input type="hidden" id="traffic" class="circular" used="{$userinfo['traffic_used']}" available="{$userinfo['traffic']}">
<canvas id="traffic-canvas" width="120" height="76"></canvas>
<canvas id="traffic-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['traffic']}<br />
<small>
{$userinfo['traffic_used']} {$lng['panel']['used']}<br />
@@ -51,7 +51,7 @@ $header
<if $userinfo['emails'] != '0'>
<div class="canvasbox">
<input type="hidden" id="emails" class="circular" used="{$userinfo['emails_used']}" available="{$userinfo['emails']}">
<canvas id="emails-canvas" width="120" height="76"></canvas>
<canvas id="emails-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['emails']}<br />
<small>
{$userinfo['emails_used']} {$lng['panel']['used']}<br />
@@ -65,7 +65,7 @@ $header
<if $userinfo['email_accounts'] != '0'>
<div class="canvasbox">
<input type="hidden" id="email_accounts" class="circular" used="{$userinfo['email_accounts_used']}" available="{$userinfo['email_accounts']}">
<canvas id="email_accounts-canvas" width="120" height="76"></canvas>
<canvas id="email_accounts-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['accounts']}<br />
<small>
{$userinfo['email_accounts_used']} {$lng['panel']['used']}<br />
@@ -79,7 +79,7 @@ $header
<if $userinfo['email_forwarders'] != '0'>
<div class="canvasbox">
<input type="hidden" id="email_forwarders" class="circular" used="{$userinfo['email_forwarders_used']}" available="{$userinfo['email_forwarders']}">
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas>
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['forwarders']}<br />
<small>
{$userinfo['email_forwarders_used']} {$lng['panel']['used']}<br />
@@ -93,7 +93,7 @@ $header
<if $settings['system']['mail_quota_enabled'] == 1 && $userinfo['email_quota'] != '0'>
<div class="canvasbox">
<input type="hidden" id="email_quota" class="circular" used="{$userinfo['email_quota_used']}" available="{$userinfo['email_quota']}">
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas>
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['email_quota']}<br />
<small>
{$userinfo['email_quota_used']} {$lng['panel']['used']}<br />
@@ -107,7 +107,7 @@ $header
<if $settings['autoresponder']['autoresponder_active'] == 1 && $userinfo['email_autoresponder'] != '0'>
<div class="canvasbox">
<input type="hidden" id="email_autoresponder" class="circular" used="{$userinfo['email_autoresponder_used']}" available="{$userinfo['email_autoresponder']}">
<canvas id="email_autoresponder-canvas" width="120" height="76"></canvas>
<canvas id="email_autoresponder-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['autoresponder']}<br />
<small>
{$userinfo['email_autoresponder_used']} {$lng['panel']['used']}<br />
@@ -121,7 +121,7 @@ $header
<if $userinfo['mysqls'] != '0'>
<div class="canvasbox">
<input type="hidden" id="mysqls" class="circular" used="{$userinfo['mysqls_used']}" available="{$userinfo['mysqls']}">
<canvas id="mysqls-canvas" width="120" height="76"></canvas>
<canvas id="mysqls-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['mysqls']}<br />
<small>
{$userinfo['mysqls_used']} {$lng['panel']['used']}<br />
@@ -135,7 +135,7 @@ $header
<if $userinfo['ftps'] != '0'>
<div class="canvasbox">
<input type="hidden" id="ftps" class="circular" used="{$userinfo['ftps_used']}" available="{$userinfo['ftps']}">
<canvas id="ftps-canvas" width="120" height="76"></canvas>
<canvas id="ftps-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['ftps']}<br />
<small>
{$userinfo['ftps_used']} {$lng['panel']['used']}<br />
@@ -149,7 +149,7 @@ $header
<if (int)$settings['aps']['aps_active'] == 1 && $userinfo['aps_packages'] != '0'>
<div class="canvasbox">
<input type="hidden" id="aps_packages" class="circular" used="{$userinfo['aps_packages_used']}" available="{$userinfo['aps_packages']}">
<canvas id="aps_packages-canvas" width="120" height="76"></canvas>
<canvas id="aps_packages-canvas" width="120" height="76"></canvas><br />
{$lng['aps']['numberofapspackages']}<br />
<small>
{$userinfo['aps_packages_used']} {$lng['panel']['used']}<br />
@@ -163,7 +163,7 @@ $header
<if (int)$settings['ticket']['enabled'] == 1 && $userinfo['tickets'] != '0'>
<div class="canvasbox">
<input type="hidden" id="tickets" class="circular" used="{$userinfo['tickets_used']}" available="{$userinfo['tickets']}">
<canvas id="tickets-canvas" width="120" height="76"></canvas>
<canvas id="tickets-canvas" width="120" height="76"></canvas><br />
{$lng['customer']['tickets']}<br />
<small>
{$userinfo['tickets_used']} {$lng['panel']['used']}<br />