ShaYmez/ezservermonitor-web
1
0
Fork 0
mirror of https://github.com/ShaYmez/ezservermonitor-web.git synced 2024-12-18 07:36:18 -05:00
Code Issues Projects Releases Wiki Activity

Themes available !

Browse Source 
Disk : filesystem column is hidden in mobile view
This commit is contained in:
ShevAbam 2015-07-15 14:12:29 +02:00
parent 118bb1862c
commit a935f5ece1
9 changed files with 146 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -9,7 +9,7 @@ In its [Web](http://www.ezservermonitor.com/esm-web/features) version eSM is a P
- **System** : hostname, OS, kernel version, uptime, last boot date, number of current user(s), server datetime - **System** : hostname, OS, kernel version, uptime, last boot date, number of current user(s), server datetime
- **Load average** : gauges showing the CPU load with the percentage (1 minute, 5 minutes et 15 minutes) - **Load average** : gauges showing the CPU load with the percentage (1 minute, 5 minutes et 15 minutes)
- **Network usage** : displaying the IP address of each network interface with the data transmitted and received - **Network usage** : displaying the IP address of each network interface with the data transmitted and received
- **CPU** : model, frequency, cores number, cache L2, bogomips - **CPU** : model, frequency, cores number, cache L2, bogomips, temperature
- **Disk usage** : table of each mount point with the space available, used and total - **Disk usage** : table of each mount point with the space available, used and total
- **Memory** : table containing the available used and total of RAM - **Memory** : table containing the available used and total of RAM
- **Swap** : table containing the available used and total of Swap - **Swap** : table containing the available used and total of Swap
@ -17,6 +17,10 @@ In its [Web](http://www.ezservermonitor.com/esm-web/features) version eSM is a P
- **Ping** : ping the hosts defined in the configuration file - **Ping** : ping the hosts defined in the configuration file
- **Services** : displays the status (up or down) services defined in the configuration file - **Services** : displays the status (up or down) services defined in the configuration file
Several themes are available !
![](http://www.ezservermonitor.com/uploads/esm_web/esm-web_themes.png)
Each block can be reloaded manually. Each block can be reloaded manually.
You can download the last version [here](http://www.ezservermonitor.com/esm-web/downloads). The [requirements](http://www.ezservermonitor.com/esm-web/documentation) are simple : a Linux environment, a web server (Apache2, Lighttpd, Nginx, ...) and PHP. You can download the last version [here](http://www.ezservermonitor.com/esm-web/downloads). The [requirements](http://www.ezservermonitor.com/esm-web/documentation) are simple : a Linux environment, a web server (Apache2, Lighttpd, Nginx, ...) and PHP.

1
conf/esm.config.json
View File

@ -4,6 +4,7 @@
"website": "http://www.ezservermonitor.com", "website": "http://www.ezservermonitor.com",
"check_updates": true, "check_updates": true,
"auto_refresh": 0, "auto_refresh": 0,
"theme": "blue",
"custom_title": "" "custom_title": ""
}, },
"cpu": { "cpu": {

4
index.php
View File

@ -38,8 +38,8 @@ $update = $Config->checkUpdate();
}); });
</script> </script>
</head> </head>
<body>
<body class="theme-<?php echo $Config->get('esm:theme'); ?>">
<nav role="main"> <nav role="main">
<div id="appname"> <div id="appname">
@ -227,7 +227,7 @@ $update = $Config->checkUpdate();
<thead> <thead>
<tr> <tr>
<?php if ($Config->get('disk:show_filesystem')): ?> <?php if ($Config->get('disk:show_filesystem')): ?>
<th class="w10p">Filesystem</th> <th class="w10p filesystem">Filesystem</th>
<?php endif; ?> <?php endif; ?>
<th class="w20p">Mount</th> <th class="w20p">Mount</th>
<th>Use</th> <th>Use</th>

2
js/esm.js
View File

@ -154,7 +154,7 @@ esm.getDisk = function() {
html += '<tr>'; html += '<tr>';
if (typeof data[line].filesystem != 'undefined') if (typeof data[line].filesystem != 'undefined')
html += '<td>'+data[line].filesystem+'</td>'; html += '<td class="filesystem">'+data[line].filesystem+'</td>';
html += '<td>'+data[line].mount+'</td>'; html += '<td>'+data[line].mount+'</td>';
html += '<td><div class="progressbar-wrap"><div class="progressbar '+bar_class+'" style="width: '+data[line].percent_used+'%;">'+data[line].percent_used+'%</div></div></td>'; html += '<td><div class="progressbar-wrap"><div class="progressbar '+bar_class+'" style="width: '+data[line].percent_used+'%;">'+data[line].percent_used+'%</div></div></td>';

39
web/css/_src/_config.frontend.scss
View File

@ -6,6 +6,43 @@ $navbar-height: 60px;
/* Layout */ /* Layout */
$layout-bg-color: #fff; $layout-bg-color: #fff;
/* Basic colors */ /* Default colors */
$main-color: #99AEC4; $main-color: #99AEC4;
$text-color: #4D5157; $text-color: #4D5157;
/* Themes ! */
$themes: (
blue: (
main-color: #99AEC4
),
aqua: (
main-color: #75C8C7
),
green: (
main-color: #9DC499
),
light-green: (
main-color: #ADD8C7
),
orange: (
main-color: #E8B184
),
red: (
main-color: #B36973
),
light-red: (
main-color: #E89D9D
),
purple: (
main-color: #AA8ECC
),
slate: (
main-color: #707E8E
),
light: (
main-color: #C4C4C4
),
dark: (
main-color: #747474
)
);

98
web/css/_src/frontend.scss
View File

@ -7,10 +7,10 @@ html {
} }
body { body {
font-size: 14px; font-size: 14px;
font-family: OpenSans-Light, Verdana, sans-serif, Arial; font-family: OpenSans-Light, Verdana, sans-serif, Arial;
margin: 0 auto; margin: 0 auto;
color: $text-color; color: $text-color;
background-color: $layout-bg-color; background-color: $layout-bg-color;
} }
@ -35,7 +35,6 @@ a {
/* --------------------- */ /* --------------------- */
/* == NAVBAR */ /* == NAVBAR */
/* --------------------- */ /* --------------------- */
nav[role="main"] { nav[role="main"] {
position: fixed; position: fixed;
top: 0; top: 0;
@ -105,11 +104,9 @@ nav[role="main"] {
padding: (($navbar-height / 2) - 17px) 15px; padding: (($navbar-height / 2) - 17px) 15px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
@include transition(background 300ms ease-in-out);
&:hover { &:hover {
background: lighten($main-color, 6%); background: lighten($main-color, 20%);
@include transition(background 300ms ease-in-out);
} }
> span[class^="icon-"] { > span[class^="icon-"] {
@ -125,7 +122,6 @@ nav[role="main"] {
/* ------------------- */ /* ------------------- */
/* == MAIN */ /* == MAIN */
/* ------------------- */ /* ------------------- */
#main-container { #main-container {
overflow: auto; overflow: auto;
margin-top: $navbar-height; margin-top: $navbar-height;
@ -135,31 +131,6 @@ nav[role="main"] {
/* ---------------------- */
/* == Listing */
/* ---------------------- */
ul.list {
margin-left: 20px;
list-style-type: none;
li {
position: relative;
padding-left: 12px;
&:before {
content: '';
width: 5px;
height: 5px;
background-color: $main-color;
position: absolute;
left: 0;
top: 9px;
}
}
}
/* --------------------- */ /* --------------------- */
/* == Tables */ /* == Tables */
/* --------------------- */ /* --------------------- */
@ -209,14 +180,13 @@ table:not(.no-style) {
table.firstBold tbody tr td:first-child { table.firstBold tbody tr td:first-child {
font-weight: bold; font-weight: bold;
color: lighten($text-color, 20%); color: #7e848c;
} }
/* --------------------------- */ /* --------------------------- */
/* == Progress bar */ /* == Progress bar */
/* --------------------------- */ /* --------------------------- */
.progressbar-wrap { .progressbar-wrap {
width: 100%; width: 100%;
background-color: rgba($main-color, 0.2); background-color: rgba($main-color, 0.2);
@ -272,6 +242,53 @@ table.firstBold tbody tr td:first-child {
/* ------------------------- */
/* == ! THEMES ! */
/* ------------------------- */
@each $name, $datas in $themes {
body.theme-#{""+$name+""} {
a {
color: map-get($datas, main-color);
&:hover {
color: lighten(map-get($datas, main-color), 5%);
text-decoration: none;
}
}
::-moz-selection {
background-color: darken(map-get($datas, main-color), 10%);
color: lighten(map-get($datas, main-color), 30%);
}
::selection {
background-color: darken(map-get($datas, main-color), 10%);
color: lighten(map-get($datas, main-color), 30%);
}
nav[role="main"] {
background-color: map-get($datas, main-color);
> ul > li > a {
&:hover {
background: lighten(map-get($datas, main-color), 15%);
}
}
}
table:not(.no-style) {
tbody tr:hover {
background: lighten(map-get($datas, main-color), 25%);
}
}
.progressbar-wrap {
background-color: rgba(map-get($datas, main-color), 0.2);
}
}
}
/* ------------------------- */ /* ------------------------- */
/* == Responsive */ /* == Responsive */
/* ------------------------- */ /* ------------------------- */
@ -319,4 +336,11 @@ table.firstBold tbody tr td:first-child {
float: none; float: none;
} }
} }
}
.box#esm-disk {
.filesystem {
display: none;
}
}
}

2
web/css/frontend.css
View File

File diff suppressed because one or more lines are too long

36
web/css/libs/_classic-box.scss
View File

@ -71,6 +71,7 @@
.box-content { .box-content {
padding: 6px; padding: 6px;
overflow: auto;
table a { table a {
text-decoration: none; text-decoration: none;
@ -95,4 +96,39 @@
margin-right: 5px; margin-right: 5px;
} }
} }
}
/* --------------------- */
/* == THEMES */
/* --------------------- */
@each $name, $datas in $themes {
body.theme-#{""+$name+""} {
.box {
box-shadow: 3px 3px 0 rgba(lighten(map-get($datas, main-color), 16%), .6);
border-color: lighten(map-get($datas, main-color), 16%);
.box-header {
background-color: darken(map-get($datas, main-color), 7%);
ul li a {
&:hover:not(.disabled) {
background: lighten(darken(map-get($datas, main-color), 7%), 20%);
color: darken(map-get($datas, main-color), 7%) !important;
}
}
}
.box-content {
table a {
color: darken(map-get($datas, main-color), 7%);
&:hover {
color: lighten(darken(map-get($datas, main-color), 7%), 20%);
}
}
}
}
}
} }

2
web/css/utilities.css
View File

File diff suppressed because one or more lines are too long