echosystem.fr
/
phpservermon
mirror of https://github.com/phpservermon/phpservermon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Servers table display for mobiles

This commit is contained in:
jerome 2014-04-14 00:00:00 +02:00
parent f4d2bd2be9
commit 644d624150
2 changed files with 111 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/templates/server/server.tpl.html
View File

@ -2,40 +2,64 @@
<table class="table table-bordered table-striped table-align-middle">
<thead>
<tr>
<th>&nbsp;</th>
<th class="hidden-phone">&nbsp;</th>
<th>{label_label}</th>
<th>{label_domain}</th>
<th class="hidden-phone">{label_domain}</th>
<th class="visible-desktop">{label_port}</th>
<th class="visible-desktop">{label_type}</th>
<th>{label_rtime}</th>
<th>{label_last_online}</th>
<th>{label_monitoring}</th>
<th class="hidden-phone">{label_rtime}</th>
<th class="hidden-phone">{label_last_online}</th>
<th class="hidden-phone">{label_monitoring}</th>
<th class="visible-desktop">{label_email}</th>
<th class="visible-desktop">{label_sms}</th>
<th>{label_action}</th>
<th class="hidden-phone">{label_action}</th>
</tr>
</thead>
<tbody>
<!--%tpl_repeat_servers-->
<tr>
<td>
<span class="label label-status-{status}">
<a href="{url_view}" title="{error}">{status}</a>
</span>
<td class="hidden-phone">
<span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span>
</td>
<td class="nowrap"><a href="{url_view}">{label}</a></td>
<td class="nowrap hidden-desktop"><i class="{type_icon}" title="{type}"></i> {ip} : {port}</td>
<td class="hidden-phone"><a href="{url_view}">{label}</a></td>
<td class="nowrap visible-tablet"><i class="{type_icon}" title="{type}"></i> {ip} : {port}</td>
<td class="nowrap visible-desktop">{ip}</td>
<td class="nowrap visible-desktop">{port}</td>
<td class="nowrap visible-desktop">{type}</td>
<td class="nowrap">{rtime} s</td>
<td class="nowrap">{last_online}</td>
<td class="nowrap hidden-desktop"><i class="{active_icon}" title="{active_title}"></i> <i class="{email_icon}" title="{label_email}"></i> <i class="{sms_icon}" title="{label_sms}"></i></td>
<td class="nowrap visible-desktop">{active}</td>
<td class="nowrap visible-desktop">{email}</td>
<td class="nowrap visible-desktop">{sms}</td>
<td class="col-action"><a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>
{html_actions}</td>
<td class="nowrap hidden-phone">{rtime} s</td>
<td class="nowrap hidden-phone">{last_online}</td>
<td class="tight visible-tablet"><i class="{active_icon}" title="{active_title}"></i> <i class="{email_icon}" title="{label_email}"></i> <i class="{sms_icon}" title="{label_sms}"></i></td>
<td class="tight visible-desktop">{active}</td>
<td class="tight visible-desktop">{email}</td>
<td class="tight visible-desktop">{sms}</td>
<td class="tight hidden-phone">
<a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>
{html_actions}
</td>
<td class="visible-phone">
<div class="table-body">
<div class="table-cell-title">
<span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span>
<a href="{url_view}">{label}</a>
</div>
<div class="table-cell tight">
&nbsp;<a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>
{html_actions}
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell"><i class="{type_icon}" title="{type}"></i> {ip} : {port}</div>
<div class="table-cell tight">
<i class="{active_icon}" title="{active_title}"></i> <i class="{email_icon}" title="{label_email}"></i> <i class="{sms_icon}" title="{label_sms}"></i>
</div>
</div>
</div>
<div class="table-body">
<div class="table-row"><div class="table-cell-details tight">{label_rtime}: &nbsp;</div><div class="table-cell-details">{rtime}</div></div>
<div class="table-row"><div class="table-cell-details tight">{label_last_online}: &nbsp;</div><div class="table-cell-details">{last_online}</div></div>
</div>
</td>
</tr>
<!--%%tpl_repeat_servers-->
{servers}

80
static/css/style.css
View File

@ -88,14 +88,43 @@ fieldset {
.table-align-middle td {
vertical-align: middle;
}
.col-action {
width: 20px;
.tight {
width: 10px;
white-space: nowrap;
}
.nowrap {
white-space: nowrap;
}
.table-body {
display: table;
width: 100%;
}
.table-row {
display: table-row
}
.table-cell {
display: table-cell;
vertical-align: top;
}
.table-cell-title {
display: table-cell;
vertical-align: middle;
height: 32px;
font-size: 1.1em;
font-weight: bold;
}
.table-cell-title .label {
position: relative;
top: -2px;
}
.table-cell-details {
display: table-cell;
font-size: 11px;
font-style: italic;
line-height: 13px;
}
/* Form */
legend {
margin-top: 0px;
@ -149,16 +178,22 @@ legend {
border: 2px solid #d8f7ce;
}
td.visible-desktop, th.visible-desktop,
td.hidden-phone, th.hidden-phone,
td.hidden-tablet, th.hidden-tablet {
display: table-cell;
}
td.visible-phone, th.visible-phone,
td.visible-tablet, th.visible-tablet,
td.hidden-desktop, th.hidden-desktop {
display: none;
}
@media (min-width: 980px) {
.hidden-desktop {
display: none !important;
}
td.visible-desktop, th.visible-desktop {
display: table-cell;
}
}
@media (max-width: 979px) {
#sidebar-container {
display: table-row;
@ -182,15 +217,31 @@ legend {
.visible-desktop {
display: none !important;
}
td.hidden-desktop, th.hidden-desktop {
display: table-cell;
}
.tab-content {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767px) {
td.visible-phone, th.visible-phone,
td.hidden-desktop, th.hidden-desktop {
display: table-cell;
}
td.hidden-phone, th.hidden-phone,
td.visible-desktop, th.visible-desktop {
display: none;
}
}
@media (min-width: 768px) and (max-width: 979px) {
td.visible-tablet, th.visible-tablet,
td.hidden-desktop, th.hidden-desktop {
display: table-cell;
}
td.hidden-tablet, th.hidden-tablet,
td.visible-desktop, th.visible-desktop {
display: none;
}
}
@media (max-width: 479px) {
#main-container, .container-fluid {
padding-left: 10px;
@ -215,13 +266,16 @@ legend {
body.install{
padding-top:20px;
}
.label-status-on{
.label-status-on, .label-status-off, .label-status-warning {
vertical-align: baseline;
}
.label-status-on {
background-color: #468847;
}
.label-status-off{
.label-status-off {
background-color: #B94A48;
}
.label-status-warning{
.label-status-warning {
background-color: #FAA732;
}
.label a{