Permalink
Browse files

fix some design issues

  • Loading branch information...
MJIO committed May 5, 2011
1 parent 5cdae71 commit 1ca44da4fca475174be47305e3d2c5932be4ff3d
Showing with 40 additions and 19 deletions.
  1. +18 −4 public/css/style.css
  2. +14 −10 public/js/main.js
  3. +8 −5 public/js/pimp.js
View
@@ -3,19 +3,19 @@
body {
background: #d7d7d7 url('../images/bg.png') 0 0 repeat;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
+ margin-left: 2%;
}
#wrapper {
- width: 92%;
- min-width: 600px;
+ width: 96%;
margin: 10px auto 0 auto;
position: relative;
}
#legend {
position: absolute;
top: 15px;
- right: 0;
+ right: 2%;
}
#legend span {
@@ -37,6 +37,19 @@ h1 {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
+ float: left;
+ width: 98%;
+ clear: both;
+}
+
+#widgets li.small {
+ width: 48%;
+ clear: none;
+ margin-right: 20px;
+}
+
+#widgets li.small .container {
+ padding-bottom: 0;
}
#widgets li .header {
@@ -66,7 +79,8 @@ h1 {
}
#widgets li .container {
- padding: 5px;
+ padding: 5px 25px;
+ overflow: hidden;
}
.line_chart {
View
@@ -11,10 +11,12 @@ var Healthety = function(){
var hosts = [];
var socket;
- var colors = ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed',
- '#3366CC', '#66FF99', '#CC66CC'];
+ var colors = ['#edc240', '#cb4b4b', '#4da74d', '#9440ed', '#3366CC',
+ '#66FF99', '#CC66CC'];
minime.draw = function(){
+ $('#wrapper').append('<div id="legend"></div>');
+
socket = connect();
socket.on('message', function(data){
json = jQuery.parseJSON(data);
@@ -48,9 +50,9 @@ var Healthety = function(){
};
// write legend
- $('.legend').html('');
- for(var i in hosts){
- $('.legend').append('<li style="color:'+ colors[i] +'">'+ hosts[i] +'</li>')
+ $('#legend').html('');
+ for(var i in hosts.sort()){
+ $('#legend').append('<span style="color:'+ colors[i] +'">'+ hosts[i] +'</span>')
}
}, 500);
@@ -68,14 +70,16 @@ var Healthety = function(){
function initChart(json){
if(hosts.indexOf(json.host) == -1) hosts.push(json.host);
+ var widget = json.name.replace(/_/, ' ');
// Check if host is already known.
if(charts[json.name] === undefined){
$('#widgets').append('<li id="'+ json.name +'"><div class="header"><h2>' +
- json.name +'</h2><div class="values"></div><div class="clear"></div>' +
+ widget +'</h2><div class="values"></div><div class="clear"></div>' +
'</div><div class="container"><div class="line_chart"></div></div></li>');
$('#widgets').sortable();
+ $('#widgets').disableSelection();
var options = {
series: { shadowSize: 0},
@@ -98,11 +102,11 @@ var Healthety = function(){
var value = values[json.name][json.host];
var hostname = json.host.replace(/\W/g, '_');
if(value === undefined){
- $('#' + json.name + ' .value').append(
- '<li class="nobg '+ hostname +'"></li>'
+ $('#' + json.name + ' .values').append(
+ '<span class="'+ hostname +'"></span>'
);
- value = values[json.name][json.host] = $('#'+json.name+' .value li:last ');
- value.css('color', getColor(json.host)).css('font-size', '20px');
+ value = values[json.name][json.host] = $('#'+json.name+' .values span:last ');
+ value.css('color', getColor(json.host));
}
value.html(json.value);
}
View
@@ -36,15 +36,18 @@ $(function(){
});
$('h2').live('click', function(){
- var chart = $(this).parents('li').children('.block_content');
- var chart_hidden = $(this).parents('li')
- .children('.block_content:hidden').length == 1;
+ var chart = $(this).parents('li').children('.container')
+ .children('.line_chart');
+
+ var chart_hidden = $(this).parents('li').children('.container')
+ .children('.line_chart:hidden').length == 1;
+
if (chart_hidden) {
chart.show();
- chart.parent().removeClass('small');
+ $(this).parents('li').removeClass('small');
} else {
chart.hide();
- chart.parent().addClass('small');
+ $(this).parents('li').addClass('small');
};
});
});

0 comments on commit 1ca44da

Please sign in to comment.