First version of the new Dashboard
This commit is contained in:
BNoiZe
@@ -59,17 +59,17 @@ $lng['customer']['zipcode'] = 'Zipcode';
|
||||
$lng['customer']['city'] = 'City';
|
||||
$lng['customer']['phone'] = 'Phone';
|
||||
$lng['customer']['fax'] = 'Fax';
|
||||
$lng['customer']['email'] = 'Email';
|
||||
$lng['customer']['email'] = 'email';
|
||||
$lng['customer']['customernumber'] = 'Customer ID';
|
||||
$lng['customer']['diskspace'] = 'Webspace (MB)';
|
||||
$lng['customer']['traffic'] = 'Traffic (GB)';
|
||||
$lng['customer']['mysqls'] = 'MySQL-databases';
|
||||
$lng['customer']['emails'] = 'E-mail-Addresses';
|
||||
$lng['customer']['accounts'] = 'E-mail-Accounts';
|
||||
$lng['customer']['forwarders'] = 'E-mail-Forwarders';
|
||||
$lng['customer']['emails'] = 'email-Addresses';
|
||||
$lng['customer']['accounts'] = 'email-Accounts';
|
||||
$lng['customer']['forwarders'] = 'email-Forwarders';
|
||||
$lng['customer']['ftps'] = 'FTP-Accounts';
|
||||
$lng['customer']['subdomains'] = 'Sub-Domain';
|
||||
$lng['customer']['domains'] = 'Domain';
|
||||
$lng['customer']['subdomains'] = 'Subdomains';
|
||||
$lng['customer']['domains'] = 'Domains';
|
||||
$lng['customer']['unlimited'] = '∞';
|
||||
|
||||
/**
|
||||
@@ -1969,3 +1969,9 @@ $lng['domains']['serveraliasoption_none'] = 'No alias';
|
||||
$lng['error']['givendirnotallowed'] = 'The given directory in field %s is not allowed.';
|
||||
$lng['serversettings']['ssl']['ssl_cipher_list']['title'] = 'Configure the allowed SSL ciphers';
|
||||
$lng['serversettings']['ssl']['ssl_cipher_list']['description'] = 'This is a list of ciphers that you want (or don\'t want) to use when talking SSL. For a list of ciphers and how to include/exclude them, see sections "CIPHER LIST FORMAT" and "CIPHER STRINGS" on <a href="http://openssl.org/docs/apps/ciphers.html">the man-page for ciphers</a>.<br /><br /><b>Default value is:</b><pre>ECDHE-RSA-AES128-SHA256:AES128-GCM-SHA256:RC4:HIGH:!MD5:!aNULL:!EDH</pre>';
|
||||
|
||||
// Added in Froxlor 0.9.31
|
||||
$lng['panel']['dashboard'] = "Dashboard";
|
||||
$lng['panel']['used'] = "used";
|
||||
$lng['panel']['assigned'] = "assigned";
|
||||
$lng['panel']['available'] = "available";
|
||||
@@ -68,7 +68,7 @@ $lng['customer']['emails'] = 'E-Mail-Adressen';
|
||||
$lng['customer']['accounts'] = 'E-Mail-Konten';
|
||||
$lng['customer']['forwarders'] = 'E-Mail-Weiterleitungen';
|
||||
$lng['customer']['ftps'] = 'FTP-Konten';
|
||||
$lng['customer']['subdomains'] = 'Sub-Domain(s)';
|
||||
$lng['customer']['subdomains'] = 'Subdomain(s)';
|
||||
$lng['customer']['domains'] = 'Domain(s)';
|
||||
$lng['customer']['unlimited'] = '∞';
|
||||
|
||||
@@ -1689,3 +1689,9 @@ $lng['domains']['serveraliasoption_none'] = 'Kein alias';
|
||||
$lng['error']['givendirnotallowed'] = 'Das angegebene Verzeichnis im Feld %s ist nicht erlaubt.';
|
||||
$lng['serversettings']['ssl']['ssl_cipher_list']['title'] = 'Erlaubte SSL Ciphers festlegen';
|
||||
$lng['serversettings']['ssl']['ssl_cipher_list']['description'] = 'Dies ist eine Liste von Ciphers die genutzt werden sollen (oder auch nicht genutzt werden sollen) wenn eine SSL Verbindung besteht. Eine Liste aller Ciphers und wie diese hinzugefügt/ausgeschlossen werden ist in den Abschnitten "CIPHER LIST FORMAT" und "CIPHER STRINGS" in <a href="http://openssl.org/docs/apps/ciphers.html">der man-page für Ciphers</a> zu finden.<br /><br /><b>Standard-Wert ist:</b><pre>ECDHE-RSA-AES128-SHA256:AES128-GCM-SHA256:RC4:HIGH:!MD5:!aNULL:!EDH</pre>';
|
||||
|
||||
// Added in Froxlor 0.9.31
|
||||
$lng['panel']['dashboard'] = "Dashboard";
|
||||
$lng['panel']['used'] = "genutzt";
|
||||
$lng['panel']['assigned'] = "zugewiesen";
|
||||
$lng['panel']['available'] = "verfügbar";
|
||||
258
templates/Sparkle/admin/index/index.tpl
vendored
258
templates/Sparkle/admin/index/index.tpl
vendored
@@ -1,75 +1,205 @@
|
||||
$header
|
||||
<article>
|
||||
<h2>
|
||||
<img src="templates/{$theme}/assets/img/icons/domains_big.png" alt="" />
|
||||
{$lng['panel']['dashboard']}
|
||||
</h2>
|
||||
<div class="canvasitems">
|
||||
<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>
|
||||
{$lng['admin']['customers']}<br />
|
||||
<small>
|
||||
{$overview['number_customers']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['customers_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['customers'] != '∞'>
|
||||
{$userinfo['customers']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['domains']}<br />
|
||||
<small>
|
||||
{$overview['number_domains']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['domains_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['domains'] != '∞'>
|
||||
{$userinfo['domains']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['subdomains']}<br />
|
||||
<small>
|
||||
{$overview['subdomains_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['subdomains_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['subdomains'] != '∞'>
|
||||
{$userinfo['subdomains']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['diskspace']}<br />
|
||||
<small>
|
||||
{$overview['diskspace_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['diskspace_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['diskspace'] != '∞'>
|
||||
{$userinfo['diskspace']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['traffic']}<br />
|
||||
<small>
|
||||
{$overview['traffic_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['traffic_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['traffic'] != '∞'>
|
||||
{$userinfo['traffic']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['mysqls']}<br />
|
||||
<small>
|
||||
{$overview['mysqls_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['mysqls_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['mysqls'] != '∞'>
|
||||
{$userinfo['mysqls']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['emails']}<br />
|
||||
<small>
|
||||
{$overview['emails_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['emails_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['emails'] != '∞'>
|
||||
{$userinfo['emails']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['accounts']}<br />
|
||||
<small>
|
||||
{$overview['email_accounts_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['email_accounts_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['email_accounts'] != '∞'>
|
||||
{$userinfo['email_accounts']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['forwarders']}<br />
|
||||
<small>
|
||||
{$overview['email_forwarders_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['email_forwarders_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['email_forwarders'] != '∞'>
|
||||
{$userinfo['email_forwarders']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<section class="dboarditemfull bradius">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2">{$lng['admin']['ressourcedetails']}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%">{$lng['admin']['customers']} <small>{$lng['admin']['usedmax']}</small></td>
|
||||
<td>{$overview['number_customers']} ({$userinfo['customers']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['domains']} <small>{$lng['admin']['usedmax']}</small></td>
|
||||
<td>{$overview['number_domains']} ({$userinfo['domains']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['subdomains']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['subdomains_used']} ({$userinfo['subdomains_used']}/{$userinfo['subdomains']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['diskspace']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['diskspace_used']} ({$userinfo['diskspace_used']}/{$userinfo['diskspace']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['traffic']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['traffic_used']} ({$userinfo['traffic_used']}/{$userinfo['traffic']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['mysqls']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['mysqls_used']} ({$userinfo['mysqls_used']}/{$userinfo['mysqls']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['emails']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['emails_used']} ({$userinfo['emails_used']}/{$userinfo['emails']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['accounts']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['email_accounts_used']} ({$userinfo['email_accounts_used']}/{$userinfo['email_accounts']})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['forwarders']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['email_forwarders_used']} ({$userinfo['email_forwarders_used']}/{$userinfo['email_forwarders']})</td>
|
||||
</tr>
|
||||
<if $settings['system']['mail_quota_enabled'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['customer']['email_quota']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['email_quota_used']} ({$userinfo['email_quota_used']}/{$userinfo['email_quota']})</td>
|
||||
</tr>
|
||||
<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>
|
||||
{$lng['customer']['email_quota']}<br />
|
||||
<small>
|
||||
{$overview['email_quota_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['email_quota_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['email_quota'] != '∞'>
|
||||
{$userinfo['email_quota']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<if $settings['autoresponder']['autoresponder_active'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['customer']['autoresponder']} <small>{$lng['admin']['usedmax']}</small></td>
|
||||
<td>{$userinfo['email_autoresponder_used']} ({$userinfo['email_autoresponder']})</td>
|
||||
</tr>
|
||||
<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>
|
||||
{$lng['customer']['autoresponder']}<br />
|
||||
<small>
|
||||
{$overview['email_autoresponder_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['email_autoresponder_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['email_autoresponder'] != '∞'>
|
||||
{$userinfo['email_autoresponder']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<if (int)$settings['aps']['aps_active'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['aps']['numberofapspackages']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['aps_packages_used']} ({$userinfo['aps_packages_used']}/{$userinfo['aps_packages']})</td>
|
||||
</tr>
|
||||
<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>
|
||||
{$lng['aps']['numberofapspackages']}<br />
|
||||
<small>
|
||||
{$overview['aps_packages_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['aps_packages_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['aps_packages'] != '∞'>
|
||||
{$userinfo['aps_packages']} {$lng['panel']['available']}
|
||||
</if>
|
||||
<tr>
|
||||
<td>{$lng['customer']['ftps']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['ftps_used']} ({$userinfo['ftps_used']}/{$userinfo['ftps']})</td>
|
||||
</tr>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['ftps']}<br />
|
||||
<small>
|
||||
{$overview['ftps_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['ftps_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['ftps'] != '∞'>
|
||||
{$userinfo['ftps']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<if $settings['ticket']['enabled'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['customer']['tickets']} <small>{$lng['admin']['used']} ({$lng['admin']['assignedmax']})</small></td>
|
||||
<td>{$overview['tickets_used']} ({$userinfo['tickets_used']}/{$userinfo['tickets']})</td>
|
||||
</tr>
|
||||
<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>
|
||||
{$lng['customer']['tickets']}<br />
|
||||
<small>
|
||||
{$overview['tickets_used']} {$lng['panel']['used']}<br />
|
||||
{$userinfo['tickets_used']} {$lng['panel']['assigned']}<br />
|
||||
<if $userinfo['tickets'] != '∞'>
|
||||
{$userinfo['tickets']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
</div>
|
||||
|
||||
<section style="clear:both"></section>
|
||||
<h3>System Information</h3>
|
||||
<section class="dboarditem bradius">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2">{$lng['admin']['systemdetails']}</th>
|
||||
</tr>
|
||||
@@ -113,6 +243,10 @@ $header
|
||||
<td>$uptime</td>
|
||||
</tr>
|
||||
</if>
|
||||
</table>
|
||||
</section>
|
||||
<section class="dboarditem bradius">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2">{$lng['admin']['froxlordetails']}</th>
|
||||
</tr>
|
||||
@@ -142,7 +276,7 @@ $header
|
||||
</if>
|
||||
</table>
|
||||
</section>
|
||||
<section style="float: clear"></section>
|
||||
<section style="clear:both"></section>
|
||||
|
||||
</article>
|
||||
$footer
|
||||
|
||||
61
templates/Sparkle/assets/css/main.css
vendored
61
templates/Sparkle/assets/css/main.css
vendored
@@ -11,7 +11,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
|
||||
|
||||
/* TYPE */
|
||||
html,body {
|
||||
font:12px/18px Helvetica,Arial,Verdana,sans-serif;
|
||||
font:12px/18px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
|
||||
background-color:#f2f2f2;
|
||||
color:#333;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -23,7 +23,7 @@ body {
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #e9edf0;
|
||||
background: #f0f2f4;
|
||||
border-bottom:1px solid #d1d5d8;
|
||||
}
|
||||
|
||||
@@ -45,11 +45,15 @@ h2, h3 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:17px;
|
||||
font-size:24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
@@ -68,24 +72,27 @@ td a {
|
||||
}
|
||||
|
||||
.topheader {
|
||||
background: #fafafa;
|
||||
background: rgba(250,250,250,0.9);
|
||||
background: #f0f2f4;
|
||||
background: rgba(240, 242, 244, 0.85098);
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
padding: 2px 0 0 5px;
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.10);
|
||||
position:fixed;
|
||||
z-index: 100;
|
||||
border-bottom-color: rgb(221, 221, 221);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.topheader_navigation {
|
||||
float: right;
|
||||
margin: 14px 50px 0 0;
|
||||
margin: 17px 50px 0 0;
|
||||
}
|
||||
|
||||
/* TOPHEADER NAV */
|
||||
ul.topheadernav {
|
||||
list-style-type: none;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
}
|
||||
ul.topheadernav li {
|
||||
padding: 0px;
|
||||
@@ -132,7 +139,7 @@ nav div:first-child {
|
||||
|
||||
.topheadernav img {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin: -4px 0 0 0;
|
||||
}
|
||||
.countbubble {
|
||||
display: block;
|
||||
@@ -145,7 +152,7 @@ nav div:first-child {
|
||||
line-height: 9px;
|
||||
border-radius: 3px;
|
||||
right: -6px;
|
||||
bottom: -3px;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
@@ -653,6 +660,10 @@ textarea {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
background:#fff url(../img/icons/password.png) no-repeat 5px 4px;
|
||||
}
|
||||
@@ -751,6 +762,17 @@ select[multiple="multiple"] {
|
||||
border: 1px solid #d1d5d8;
|
||||
}
|
||||
|
||||
.dboardcanvas {
|
||||
float:left;
|
||||
width: 48%;
|
||||
margin-top:15px;
|
||||
margin-right:0;
|
||||
margin-bottom:15px;
|
||||
margin-left:15px;
|
||||
padding:0;
|
||||
box-shadow: 0px 0px 0px black;
|
||||
}
|
||||
|
||||
.dboarditemfull {
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
@@ -884,3 +906,20 @@ label.nobr {
|
||||
text-indent:-9999px;
|
||||
background: url(../img/top.png) no-repeat;
|
||||
}
|
||||
|
||||
/* CANVAS STUFF */
|
||||
.canvasitems {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.canvasbox {
|
||||
width: 130px !important;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
height: 150px;
|
||||
line-height: normal;
|
||||
}
|
||||
canvas {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
85
templates/Sparkle/assets/js/circular.js
vendored
Normal file
85
templates/Sparkle/assets/js/circular.js
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
$(document).ready(function() {
|
||||
var usedColor = "#91c46b";
|
||||
var assiColor = "#287e7e";
|
||||
var unliColor = "#56606e";
|
||||
|
||||
$(".circular").each(function(index, element) {
|
||||
var canvas = "#" + $(element).attr("id") + "-canvas";
|
||||
var used = parseFloat($(element).attr("used"));
|
||||
var available = $(element).attr("available");
|
||||
var assigned = parseFloat($(element).attr("assigned"));
|
||||
var usedD, usedP, assignedP, assignedD;
|
||||
|
||||
// Draw basic circle
|
||||
circularCircle(canvas, 40, 0, 270, 8, "#d2d4d8");
|
||||
|
||||
// Draw percentages
|
||||
if (!isNaN(assigned) && available == "∞") {
|
||||
if (assigned > used) {
|
||||
// Draw assigned as full circle
|
||||
circularCircle(canvas, 38, 0, 270, 4, assiColor);
|
||||
// Draw used as percentage of full circle
|
||||
usedP = Math.round(100 / assigned * used);
|
||||
usedD = 270 * usedP / 100;
|
||||
circularCircle(canvas, 42, 0, usedD, 4, usedColor);
|
||||
} else if (used > assigned) {
|
||||
// Draw used as full circle
|
||||
circularCircle(canvas, 42, 0, 270, 4, usedColor);
|
||||
// Draw assigned as percentage of full circle
|
||||
assignedP = Math.round(100 / used * assigned);
|
||||
assignedD = 270 * assignedP / 100;
|
||||
circularCircle(canvas, 38, 0, assignedD, 4, assiColor);
|
||||
} else {
|
||||
circularCircle(canvas, 42, 0, 270, 4, usedColor);
|
||||
circularCircle(canvas, 38, 0, 270, 4, assiColor);
|
||||
}
|
||||
circularText(canvas, 60, 42, 26, "∞")
|
||||
} else if (!isNaN(assigned)) {
|
||||
available = parseFloat(available);
|
||||
|
||||
assignedP = Math.round(100 / available * assigned);
|
||||
assignedD = 270 * assignedP / 100;
|
||||
circularCircle(canvas, 38, 0, assignedD, 4, assiColor);
|
||||
|
||||
usedP = Math.round(100 / available * used);
|
||||
usedD = 270 * usedP / 100;
|
||||
circularCircle(canvas, 42, 0, usedD, 4, usedColor);
|
||||
} else if (available == "∞") {
|
||||
circularCircle(canvas, 40, 0, 270, 8, unliColor);
|
||||
circularText(canvas, 60, 42, 26, "∞")
|
||||
} else {
|
||||
available = parseFloat(available);
|
||||
usedP = 100 / available * used;
|
||||
if (usedP < 1 && usedP > 0) {
|
||||
usedP = 1;
|
||||
} else {
|
||||
usedP = Math.round(usedP);
|
||||
}
|
||||
usedD = 270 * usedP / 100;
|
||||
circularCircle(canvas, 40, 0, usedD, 8, usedColor);
|
||||
circularText(canvas, 60, 42, 22, usedP + "%")
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function circularCircle(canvas, radius, start, end, stroke, color) {
|
||||
$(canvas).drawArc({
|
||||
strokeStyle: color,
|
||||
strokeWidth: stroke,
|
||||
x: 60, y: 44,
|
||||
radius: radius,
|
||||
start: start, end: end,
|
||||
rotate: -135
|
||||
});
|
||||
}
|
||||
function circularText(canvas, x, y, size, text) {
|
||||
$(canvas).drawText({
|
||||
fillStyle: "#343a41",
|
||||
x: x, y: y,
|
||||
fontSize: size,
|
||||
fontFamily: "Lucida Grande, Verdana, sans-serif",
|
||||
text: text
|
||||
});
|
||||
}
|
||||
5
templates/Sparkle/assets/js/jcanvas.min.js
vendored
Normal file
5
templates/Sparkle/assets/js/jcanvas.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
220
templates/Sparkle/customer/index/index.tpl
vendored
220
templates/Sparkle/customer/index/index.tpl
vendored
@@ -1,5 +1,163 @@
|
||||
$header
|
||||
<article>
|
||||
<h2>
|
||||
<img src="templates/{$theme}/assets/img/icons/domains_big.png" alt="" />
|
||||
{$lng['panel']['dashboard']}
|
||||
</h2>
|
||||
|
||||
<section class="dboardcanvas">
|
||||
<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>
|
||||
{$lng['customer']['subdomains']}<br />
|
||||
<small>
|
||||
{$userinfo['subdomains_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['subdomains'] != '∞'>
|
||||
{$userinfo['subdomains']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['diskspace']}<br />
|
||||
<small>
|
||||
{$userinfo['diskspace_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['diskspace'] != '∞'>
|
||||
{$userinfo['diskspace']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['traffic']}<br />
|
||||
<small>
|
||||
{$userinfo['traffic_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['traffic'] != '∞'>
|
||||
{$userinfo['traffic']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['emails']}<br />
|
||||
<small>
|
||||
{$userinfo['emails_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['emails'] != '∞'>
|
||||
{$userinfo['emails']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['accounts']}<br />
|
||||
<small>
|
||||
{$userinfo['email_accounts_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['email_accounts'] != '∞'>
|
||||
{$userinfo['email_accounts']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['forwarders']}<br />
|
||||
<small>
|
||||
{$userinfo['email_forwarders_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['email_forwarders'] != '∞'>
|
||||
{$userinfo['email_forwarders']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<if $settings['system']['mail_quota_enabled'] == 1>
|
||||
<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>
|
||||
{$lng['customer']['email_quota']}<br />
|
||||
<small>
|
||||
{$userinfo['email_quota_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['email_quota'] != '∞'>
|
||||
{$userinfo['email_quota']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<if $settings['autoresponder']['autoresponder_active'] == 1>
|
||||
<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>
|
||||
{$lng['customer']['autoresponder']}<br />
|
||||
<small>
|
||||
{$userinfo['email_autoresponder_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['email_autoresponder'] != '∞'>
|
||||
{$userinfo['email_autoresponder']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['mysqls']}<br />
|
||||
<small>
|
||||
{$userinfo['mysqls_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['mysqls'] != '∞'>
|
||||
{$userinfo['mysqls']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{$lng['customer']['ftps']}<br />
|
||||
<small>
|
||||
{$userinfo['ftps_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['ftps'] != '∞'>
|
||||
{$userinfo['ftps']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<if (int)$settings['aps']['aps_active'] == 1>
|
||||
<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>
|
||||
{$lng['aps']['numberofapspackages']}<br />
|
||||
<small>
|
||||
{$userinfo['aps_packages_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['aps_packages'] != '∞'>
|
||||
{$userinfo['aps_packages']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
|
||||
<if (int)$settings['ticket']['enabled'] == 1>
|
||||
<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>
|
||||
{$lng['customer']['tickets']}<br />
|
||||
<small>
|
||||
{$userinfo['tickets_used']} {$lng['panel']['used']}<br />
|
||||
<if $userinfo['tickets'] != '∞'>
|
||||
{$userinfo['tickets']} {$lng['panel']['available']}
|
||||
</if>
|
||||
</small>
|
||||
</div>
|
||||
</if>
|
||||
</section>
|
||||
|
||||
<section class="dboarditem bradius">
|
||||
<table>
|
||||
@@ -14,68 +172,6 @@ $header
|
||||
<td>{$lng['customer']['domains']}</td>
|
||||
<td>$domains</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['subdomains']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['subdomains_used']}/{$userinfo['subdomains']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['diskspace']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['diskspace_used']}/{$userinfo['diskspace']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['traffic']}<br /><small>$month, {$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['traffic_used']}/{$userinfo['traffic']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['emails']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['emails_used']}/{$userinfo['emails']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['accounts']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['email_accounts_used']}/{$userinfo['email_accounts']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['forwarders']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['email_forwarders_used']}/{$userinfo['email_forwarders']}</td>
|
||||
</tr>
|
||||
<if $settings['system']['mail_quota_enabled'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['customer']['email_quota']}<br /><small>{{$lng['panel']['megabyte']}, {$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['email_quota_used']}/{$userinfo['email_quota']}</td>
|
||||
</tr>
|
||||
</if>
|
||||
</tr>
|
||||
<if $settings['autoresponder']['autoresponder_active'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['customer']['autoresponder']} <br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['email_autoresponder_used']}/{$userinfo['email_autoresponder']}</td>
|
||||
</tr>
|
||||
</if>
|
||||
<tr>
|
||||
<td>{$lng['customer']['mysqls']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['mysqls_used']}/{$userinfo['mysqls']}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{$lng['customer']['ftps']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['ftps_used']}/{$userinfo['ftps']}</td>
|
||||
</tr>
|
||||
<if (int)$settings['aps']['aps_active'] == 1>
|
||||
<tr>
|
||||
<td>{$lng['aps']['numberofapspackages']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['aps_packages_used']}/{$userinfo['aps_packages']}</td>
|
||||
</tr>
|
||||
</if>
|
||||
<if $settings['ticket']['enabled'] == 1 >
|
||||
<tr>
|
||||
<td>{$lng['customer']['tickets']}<br /><small>{$lng['customer']['usedmax']}</small></td>
|
||||
<td>{$userinfo['tickets_used']}/{$userinfo['tickets']}</td>
|
||||
</tr>
|
||||
</if>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="dboarditem bradius">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2">{$lng['index']['customerdetails']}</th>
|
||||
</tr>
|
||||
|
||||
4
templates/Sparkle/header.tpl
vendored
4
templates/Sparkle/header.tpl
vendored
@@ -19,6 +19,8 @@
|
||||
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
|
||||
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/traffic.js"></script>
|
||||
</if>
|
||||
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/jcanvas.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/circular.js"></script>
|
||||
<if $settings['panel']['use_webfonts'] == '1'>
|
||||
<link href="//fonts.googleapis.com/css?family={$settings['panel']['webfont']}" rel="stylesheet">
|
||||
</if>
|
||||
@@ -57,7 +59,7 @@
|
||||
</li>
|
||||
</if>
|
||||
<li>{$userinfo['loginname']}</li>
|
||||
<li><a href="{$linker->getLink(array('section' => 'index'))}">{$lng['admin']['overview']}</a></li>
|
||||
<li><a href="{$linker->getLink(array('section' => 'index'))}">{$lng['panel']['dashboard']}</a></li>
|
||||
<li><a href="#">{$lng['panel']['options']} ▾</a>
|
||||
<ul>
|
||||
<li><a href="{$linker->getLink(array('section' => 'index', 'page' => 'change_password'))}">{$lng['login']['password']}</a></li>
|
||||
|
||||
Reference in New Issue
Block a user