Refactor series checkboxes for graph

This commit is contained in:
perryharlock
2013-09-26 16:08:09 +01:00
parent faf5d72974
commit e77c163f20
4 changed files with 34 additions and 13 deletions

File diff suppressed because one or more lines are too long

View File

@@ -167,7 +167,7 @@ $(document).ready(function(){
$.each(datasets, function(key, val) { $.each(datasets, function(key, val) {
var lowerCaseValue = (val.label.substring(0, val.label.length - 1)).toLowerCase(); var lowerCaseValue = (val.label.substring(0, val.label.length - 1)).toLowerCase();
choiceContainer.append("<li class='"+ lowerCaseValue +"'><label class='checkbox-inline' for='id" + key + "'><input type='checkbox' name='" + key + "' checked='checked' id='id" + key + "'/>" + val.label + "</label></li>"); choiceContainer.append("<li class='text-center "+ lowerCaseValue +"'><label for='id" + key + "'><input type='checkbox' name='" + key + "' checked='checked' id='id" + key + "'/><span class='stat-type'>" + val.label + "</span></label></li>");
}); });
choiceContainer.find("input").click(plotAccordingToChoices); choiceContainer.find("input").click(plotAccordingToChoices);

View File

@@ -99,12 +99,13 @@
margin-right:0; margin-right:0;
} }
} }
.stat-type { }
font-size:floor(@font-size-base * 0.75); // ~11px; .stat-type {
text-transform: uppercase; font-size:floor(@font-size-base * 0.75); // ~11px;
display:block; text-transform: uppercase;
line-height:1.4; display:block;
} line-height:1.4;
.opacity(.8);
} }
.aside .task-stats { .aside .task-stats {
@@ -288,10 +289,28 @@ ul.date-links {
} }
.series-checkboxes { .series-checkboxes {
margin-top:15px; margin-top:15px;
}
.series-checkboxes li { li {
padding:2px 10px; width:32%;
border-right:solid 5px @badge-color; margin-right:2%;
label {
padding:2px 4px;
margin-bottom:0;
}
input, label {
cursor: pointer;
}
&:last-child {
margin-right:0;
}
&:hover {
.opacity(.85);
}
}
} }
.btn-reset { .btn-reset {
margin-top:-24px; margin-top:-24px;

View File

@@ -38,7 +38,9 @@
<div class="col-md-12 clearfix"> <div class="col-md-12 clearfix">
<div class="graph-container graph-spacer ruled"> <div class="graph-container graph-spacer ruled">
<div data-role="graph" class="graph"></div> <div data-role="graph" class="graph"></div>
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom" data-role="series-checkboxes"></ul> <div class="row">
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-6" data-role="series-checkboxes"></ul>
</div>
<button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button> <button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button>
</div> </div>
</div> </div>