Servers table display for mobiles

src/templates/server/server.tpl.html

@@ -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 class="hidden-phone">{label_rtime}</th>
-			<th>{label_last_online}</th>
+			<th class="hidden-phone">{label_last_online}</th>
-			<th>{label_monitoring}</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>
+			<td class="hidden-phone">
-				<span class="label label-status-{status}">
+				<span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span>
-					<a href="{url_view}" title="{error}">{status}</a>
-				</span>
 			</td>
-			<td class="nowrap"><a href="{url_view}">{label}</a></td>
+			<td class="hidden-phone"><a href="{url_view}">{label}</a></td>
-			<td class="nowrap hidden-desktop"><i class="{type_icon}" title="{type}"></i> {ip} : {port}</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 hidden-phone">{rtime} s</td>
-			<td class="nowrap">{last_online}</td>
+			<td class="nowrap hidden-phone">{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="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="nowrap visible-desktop">{active}</td>
+			<td class="tight visible-desktop">{active}</td>
-			<td class="nowrap visible-desktop">{email}</td>
+			<td class="tight visible-desktop">{email}</td>
-			<td class="nowrap visible-desktop">{sms}</td>
+			<td class="tight 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>
+			<td class="tight hidden-phone">
-				{html_actions}</td>
+				<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}

static/css/style.css

@@ -88,14 +88,43 @@ fieldset {
 .table-align-middle td {
 	vertical-align: middle;
 }
-.col-action {
+.tight {
-	width: 20px;
+	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{