- Disable zooming.

- Change dropdown menu appearance.
- fix status display on mobile.
This commit is contained in:
jerome 2014-04-08 03:43:10 +02:00
parent 2ff229b6b1
commit 9ca387861a
3 changed files with 65 additions and 31 deletions

View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>{title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
{auto_refresh}
@ -46,7 +46,7 @@
<!-- container -->
<div class="container-fluid">
<div class="page-header">
<h1>{subtitle}<small>&nbsp;</small></h1>
<h1>{subtitle}</h1>
</div>
<div class="row-fluid">
{html_sidebar}
@ -72,15 +72,6 @@
<!--%tpl_main_menu-->
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{label_usermenu} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{url_profile}"><i class="icon-cog"></i>&nbsp;{label_profile}</a></li>
<li><a href="{url_logout}"><i class="icon-off"></i>&nbsp;{label_logout}</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<!--%tpl_repeat_menu-->
<li class="{active}">
@ -92,6 +83,18 @@
<a href="http://www.phpservermonitor.org/" target="_blank">{label_help}</a>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown visible-desktop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{label_usermenu} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{url_profile}"><i class="icon-cog"></i>&nbsp;{label_profile}</a></li>
<li><a href="{url_logout}"><i class="icon-off"></i>&nbsp;{label_logout}</a></li>
</ul>
</li>
<li class="hidden-desktop divider"></li>
<li class="hidden-desktop"><a href="{url_profile}">{label_profile}</a></li>
<li class="hidden-desktop"><a href="{url_logout}">{label_logout}</a></li>
</ul>
</div>
<!--%%tpl_main_menu-->

View File

@ -2,7 +2,6 @@
<style type="text/css">
body {
background: {bg};
padding: 30px 20px;
}
.page-header {
@ -18,19 +17,23 @@
margin-bottom: 10px;
}
.offline, .online {
width: 100%;
}
.entity-container {
float: left;
width: 100%;
max-width: 320px;
}
.entity {
padding: 10px;
box-shadow: 0px 0px 5px #666;
border-radius: 3px;
margin-bottom: 20px;
width: 300px;
cursor: pointer;
}
.offline {
width: 325px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.offline .entity {
@ -49,26 +52,28 @@
background: {online_bg};
color: {online_fg};
border: 2px solid {online_fg};
float: left;
margin-right: 20px;
}
</style>
<div class="offline">
<!--%tpl_repeat_servers_offline-->
<div class="entity {class_warning}" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
<div class="entity-container">
<div class="entity {class_warning}" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
</div>
</div>
<!--%%tpl_repeat_servers_offline-->
{servers_offline}
</div>
<div class="online">
<!--%tpl_repeat_servers_online-->
<div class="entity" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_checked_nice}</p>
<p>{label_rtime}: {rtime}s</p>
<div class="entity-container">
<div class="entity" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_checked_nice}</p>
<p>{label_rtime}: {rtime}s</p>
</div>
</div>
<!--%%tpl_repeat_servers_online-->
{servers_online}

View File

@ -1,5 +1,5 @@
body {
padding-top: 70px;
padding-top: 40px;
padding-left: 0px;
padding-right: 0px;
}
@ -15,6 +15,18 @@ body {
margin: 5px 0;
min-width: 100px;
}
.navbar .nav .divider {
height: 1px;
overflow: hidden;
background-color: #444;
}
@media (min-width: 980px) {
.hidden-desktop {
display: none !important;
}
}
@media (max-width: 979px) {
.sidebar-nav .nav-list {
padding: 0;
@ -26,7 +38,21 @@ body {
float: left;
margin-right: 15px;
}
.navbar .brand {
margin-left: -10px;
}
.visible-desktop {
display: none !important;
}
}
@media (max-width: 479px) {
.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
}
body.install{
padding-top:20px;
}