maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

Improving the dashboard styling, fixed missing border-radius

Browse Source 
Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>
This commit is contained in:
Roman Schmerold (BNoiZe)
2014-02-08 17:41:10 +01:00
parent d7c94726fd
commit dff26e68b9
3 changed files with 256 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/ajax.php
View File

@@ -58,9 +58,10 @@ if ($action == "newsfeed") {
$title = (string)$item->title; $title = (string)$item->title;
$link = (string)$item->link; $link = (string)$item->link;
$date = date("Y-m-d G:i", strtotime($item->pubDate)); $date = date("Y-m-d G:i", strtotime($item->pubDate));
$content = preg_replace("/[\r\n]+/", "", strip_tags($item->description)); $content = preg_replace("/[\r\n]+/", " ", strip_tags($item->description));
$content = substr($content, 0, 150) . "...";
echo "<div class=\"newsitem\"><small>" . $date . "</small><br /><a href=\"" . $link . "\" target=\"_blank\"><b>" . $title . "</b><br />" . $content . "</a></div>"; echo "<tr class=\"newsitem\"><td><small>" . $date . "</small><br /><a href=\"" . $link . "\" target=\"_blank\"><b>" . $title . "</b><br />" . $content . "</a></td></tr>";
} }
} else { } else {
echo ""; echo "";

493
templates/Sparkle/admin/index/index.tpl vendored
View File

@@ -4,256 +4,257 @@ $header
<img src="templates/{$theme}/assets/img/icons/domains_big.png" alt="" /> <img src="templates/{$theme}/assets/img/icons/domains_big.png" alt="" />
{$lng['panel']['dashboard']} {$lng['panel']['dashboard']}
</h2> </h2>
<div class="grid-g"> <div class="grid-g">
<div class="grid-u-1-2" id="statsbox">
<div class="canvasbox">
<input type="hidden" id="customers" class="circular" data-used="{$overview['number_customers']}" data-available="{$userinfo['customers']}">
<canvas id="customers-canvas" width="120" height="76"></canvas><br/>
{$lng['admin']['customers']}<br />
<small>
{$overview['number_customers']} {$lng['panel']['used']}<br />
<if $userinfo['customers'] != '∞'>
{$userinfo['customers']} {$lng['panel']['available']}
</if>
</small>
</div>
<div class="canvasbox">
<input type="hidden" id="domains" class="circular" data-used="{$overview['number_domains']}" data-available="{$userinfo['domains']}">
<canvas id="domains-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['domains']}<br />
<small>
{$overview['number_domains']} {$lng['panel']['used']}<br />
<if $userinfo['domains'] != '∞'>
{$userinfo['domains']} {$lng['panel']['available']}
</if>
</small>
</div>
<div class="canvasbox">
<input type="hidden" id="subdomains" class="circular" data-used="{$overview['subdomains_used']}" data-available="{$userinfo['subdomains']}" data-assigned="{$userinfo['subdomains_used']}">
<canvas id="subdomains-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['diskspace_used']}" data-available="{$userinfo['diskspace']}" data-assigned="{$userinfo['diskspace_used']}">
<canvas id="diskspace-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['traffic_used']}" data-available="{$userinfo['traffic']}" data-assigned="{$userinfo['traffic_used']}">
<canvas id="traffic-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['mysqls_used']}" data-available="{$userinfo['mysqls']}" data-assigned="{$userinfo['mysqls_used']}">
<canvas id="mysqls-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['emails_used']}" data-available="{$userinfo['emails']}" data-assigned="{$userinfo['emails_used']}">
<canvas id="emails-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['email_accounts_used']}" data-available="{$userinfo['email_accounts']}" data-assigned="{$userinfo['email_accounts_used']}">
<canvas id="email_accounts-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['email_forwarders_used']}" data-available="{$userinfo['email_forwarders']}" data-assigned="{$userinfo['email_forwarders_used']}">
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas><br/>
{$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>
<if Settings::Get('system.mail_quota_enabled') == 1>
<div class="canvasbox">
<input type="hidden" id="email_quota" class="circular" data-used="{$overview['email_quota_used']}" data-available="{$userinfo['email_quota']}" data-assigned="{$userinfo['email_quota_used']}">
<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 />
{$userinfo['email_quota_used']} {$lng['panel']['assigned']}<br />
<if $userinfo['email_quota'] != '∞'>
{$userinfo['email_quota']} {$lng['panel']['available']}
</if>
</small>
</div>
</if>
<div class="canvasbox">
<input type="hidden" id="ftps" class="circular" data-used="{$overview['ftps_used']}" data-available="{$userinfo['ftps']}" data-assigned="{$userinfo['ftps_used']}">
<canvas id="ftps-canvas" width="120" height="76"></canvas><br/>
{$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::Get('ticket.enabled') == 1>
<div class="canvasbox">
<input type="hidden" id="tickets" class="circular" data-used="{$overview['tickets_used']}" data-available="{$userinfo['tickets']}" data-assigned="{$userinfo['tickets_used']}">
<canvas id="tickets-canvas" width="120" height="76"></canvas><br/>
{$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>
<div class="grid-u-1-2"> <div class="grid-u-1-2">
<div class="canvasbox"> <if Settings::Get('admin.show_news_feed') == '1'>
<input type="hidden" id="customers" class="circular" data-used="{$overview['number_customers']}" data-available="{$userinfo['customers']}"> <table class="dboarditem full" id="newsfeed">
<canvas id="customers-canvas" width="120" height="76"></canvas><br/> <thead>
{$lng['admin']['customers']}<br /> <tr>
<small> <th>News</th>
{$overview['number_customers']} {$lng['panel']['used']}<br /> </tr>
<if $userinfo['customers'] != '∞'> </thead>
{$userinfo['customers']} {$lng['panel']['available']} <tbody id="newsfeeditems">
</if> </tbody>
</small> </table>
</div>
<div class="canvasbox">
<input type="hidden" id="domains" class="circular" data-used="{$overview['number_domains']}" data-available="{$userinfo['domains']}">
<canvas id="domains-canvas" width="120" height="76"></canvas><br/>
{$lng['customer']['domains']}<br />
<small>
{$overview['number_domains']} {$lng['panel']['used']}<br />
<if $userinfo['domains'] != '∞'>
{$userinfo['domains']} {$lng['panel']['available']}
</if>
</small>
</div>
<div class="canvasbox">
<input type="hidden" id="subdomains" class="circular" data-used="{$overview['subdomains_used']}" data-available="{$userinfo['subdomains']}" data-assigned="{$userinfo['subdomains_used']}">
<canvas id="subdomains-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['diskspace_used']}" data-available="{$userinfo['diskspace']}" data-assigned="{$userinfo['diskspace_used']}">
<canvas id="diskspace-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['traffic_used']}" data-available="{$userinfo['traffic']}" data-assigned="{$userinfo['traffic_used']}">
<canvas id="traffic-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['mysqls_used']}" data-available="{$userinfo['mysqls']}" data-assigned="{$userinfo['mysqls_used']}">
<canvas id="mysqls-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['emails_used']}" data-available="{$userinfo['emails']}" data-assigned="{$userinfo['emails_used']}">
<canvas id="emails-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['email_accounts_used']}" data-available="{$userinfo['email_accounts']}" data-assigned="{$userinfo['email_accounts_used']}">
<canvas id="email_accounts-canvas" width="120" height="76"></canvas><br/>
{$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" data-used="{$overview['email_forwarders_used']}" data-available="{$userinfo['email_forwarders']}" data-assigned="{$userinfo['email_forwarders_used']}">
<canvas id="email_forwarders-canvas" width="120" height="76"></canvas><br/>
{$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>
<if Settings::Get('system.mail_quota_enabled') == 1>
<div class="canvasbox">
<input type="hidden" id="email_quota" class="circular" data-used="{$overview['email_quota_used']}" data-available="{$userinfo['email_quota']}" data-assigned="{$userinfo['email_quota_used']}">
<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 />
{$userinfo['email_quota_used']} {$lng['panel']['assigned']}<br />
<if $userinfo['email_quota'] != '∞'>
{$userinfo['email_quota']} {$lng['panel']['available']}
</if>
</small>
</div>
</if>
<div class="canvasbox">
<input type="hidden" id="ftps" class="circular" data-used="{$overview['ftps_used']}" data-available="{$userinfo['ftps']}" data-assigned="{$userinfo['ftps_used']}">
<canvas id="ftps-canvas" width="120" height="76"></canvas><br/>
{$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::Get('ticket.enabled') == 1>
<div class="canvasbox">
<input type="hidden" id="tickets" class="circular" data-used="{$overview['tickets_used']}" data-available="{$userinfo['tickets']}" data-assigned="{$userinfo['tickets_used']}">
<canvas id="tickets-canvas" width="120" height="76"></canvas><br/>
{$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>
<div class="grid-u-1-2">
<if Settings::Get('admin.show_news_feed') == '1'>
<section class="dboarditem dboarditemnews" id="newsfeed">
<table>
<tr>
<th>News</th>
</tr>
</table>
<div id="newsfeeditems"></div>
</section>
</if>
<table class="dboarditem">
<thead>
<tr>
<th colspan="2">{$lng['admin']['systemdetails']}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{$lng['admin']['serversoftware']}:</td>
<td>{$_SERVER['SERVER_SOFTWARE']}</td>
</tr>
<tr>
<td>{$lng['admin']['phpversion']}:</td>
<td><a href="{$linker->getLink(array('section' => 'settings', 'page' => 'phpinfo'))}">$phpversion</a></td>
</tr>
<tr>
<td class="nowrap">{$lng['admin']['mysqlserverversion']}:</td>
<td>$mysqlserverversion</td>
</tr>
<tr>
<td>{$lng['admin']['webserverinterface']}:</td>
<td>$webserverinterface</td>
</tr>
<tr>
<td>{$lng['admin']['sysload']}:</td>
<td>$load</td>
</tr>
<if $showkernel == 1>
<tr>
<td>Kernel:</td>
<td>$kernel</td>
</tr>
</if> </if>
<if $uptime != ''>
<tr>
<td>Uptime:</td>
<td>$uptime</td>
</tr>
</if>
</tbody>
</table>
<table class="dboarditem bradius"> <table class="dboarditem">
<thead> <thead>
<tr> <tr>
<th colspan="2">{$lng['admin']['froxlordetails']}</th> <th colspan="2">{$lng['admin']['systemdetails']}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{$outstanding_tasks} <tr>
{$cron_last_runs} <td>{$lng['admin']['serversoftware']}:</td>
<tr> <td>{$_SERVER['SERVER_SOFTWARE']}</td>
<td>{$lng['admin']['installedversion']}:</td> </tr>
<td>{$version}{$branding}</td> <tr>
</tr> <td>{$lng['admin']['phpversion']}:</td>
<tr> <td><a href="{$linker->getLink(array('section' => 'settings', 'page' => 'phpinfo'))}">$phpversion</a></td>
<td>{$lng['admin']['latestversion']}:</td> </tr>
<if $isnewerversion != 0 > <tr>
<td><a href="$lookfornewversion_link"><strong>$lookfornewversion_lable</strong></a></td> <td class="nowrap">{$lng['admin']['mysqlserverversion']}:</td>
<else> <td>$mysqlserverversion</td>
<td><a href="$lookfornewversion_link">$lookfornewversion_lable</a></td> </tr>
</if> <tr>
</tr> <td>{$lng['admin']['webserverinterface']}:</td>
<if $isnewerversion == 1 > <td>$webserverinterface</td>
<tr> </tr>
<td colspan="2"><strong>{$lng['admin']['newerversionavailable']}</strong></td> <tr>
</tr> <td>{$lng['admin']['sysload']}:</td>
<if $lookfornewversion_addinfo != ''> <td>$load</td>
<tr> </tr>
<td colspan="2">$lookfornewversion_addinfo</td> <if $showkernel == 1>
</tr> <tr>
</if> <td>Kernel:</td>
</if> <td>$kernel</td>
</tbody> </tr>
</table> </if>
</div> <if $uptime != ''>
<tr>
<td>Uptime:</td>
<td>$uptime</td>
</tr>
</if>
</tbody>
</table>
<table class="dboarditem">
<thead>
<tr>
<th colspan="2">{$lng['admin']['froxlordetails']}</th>
</tr>
</thead>
<tbody>
{$outstanding_tasks}
{$cron_last_runs}
<tr>
<td>{$lng['admin']['installedversion']}:</td>
<td>{$version}{$branding}</td>
</tr>
<tr>
<td>{$lng['admin']['latestversion']}:</td>
<if $isnewerversion != 0 >
<td><a href="$lookfornewversion_link"><strong>$lookfornewversion_lable</strong></a></td>
<else>
<td><a href="$lookfornewversion_link">$lookfornewversion_lable</a></td>
</if>
</tr>
<if $isnewerversion == 1 >
<tr>
<td colspan="2"><strong>{$lng['admin']['newerversionavailable']}</strong></td>
</tr>
<if $lookfornewversion_addinfo != ''>
<tr>
<td colspan="2">$lookfornewversion_addinfo</td>
</tr>
</if>
</if>
</tbody>
</table>
</div>
</div> </div>
</article> </article>

22
templates/Sparkle/assets/css/main.css vendored
View File

@@ -687,13 +687,10 @@ select[multiple="multiple"] {
} }
.dboarditem { .dboarditem {
width: 100%;
padding:0;
margin-bottom: 20px; margin-bottom: 20px;
}
.dboarditemnews {
border:1px solid #d1d5d8; border:1px solid #d1d5d8;
border-radius: 3px;
width: 100%;
} }
.dboarditemfull { .dboarditemfull {
@@ -869,15 +866,15 @@ label.nobr {
#newsfeed { #newsfeed {
display: none; display: none;
} }
.newsitem { .newsitem {
border-bottom:1px solid #f1f2f3; border-bottom:1px solid #f1f2f3;
padding:6px 5px 8px; padding:6px 5px 8px;
height:52px; height:52px !important;
line-height:18px; line-height:18px;
margin:0 5px; margin:0 5px;
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space:nowrap;
} }
.newsitem:last-child { .newsitem:last-child {
@@ -897,10 +894,6 @@ label.nobr {
text-decoration:underline; text-decoration:underline;
} }
.newsitem b {
margin-right:15px;
}
.newsitem small { .newsitem small {
font-size:8px; font-size:8px;
color:gray; color:gray;
@@ -1024,12 +1017,10 @@ div.right {
padding-top: 35px; padding-top: 35px;
} }
.opera-only :-o-prefocus, .opera-only :-o-prefocus, .grid-g {
.grid-g {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.grid-u { .grid-u {
display: inline-block; display: inline-block;
zoom: 1; *display: inline; zoom: 1; *display: inline;
@@ -1039,7 +1030,6 @@ div.right {
text-rendering: auto; text-rendering: auto;
} }
.grid-u-1,.grid-u-1-2 { .grid-u-1,.grid-u-1-2 {
display: inline-block; display: inline-block;
zoom: 1; *display: inline; zoom: 1; *display: inline;
@@ -1054,7 +1044,7 @@ div.right {
} }
.grid-u-1-2 { .grid-u-1-2 {
width: 50%; width: 49%;
} }
.grid-offset-1-2 { .grid-offset-1-2 {