1
0
Fork 0

css, dashboard toggle prep

This commit is contained in:
Heiko Kernbach 2013-08-13 12:02:54 +02:00
parent 0ee6359c82
commit ef95873d53
8 changed files with 55 additions and 43 deletions

View File

@ -1,5 +1,5 @@
.span3 {
min-height:100px;
min-height:130px;
width: 230px;
margin-left: 8px !important;
margin-bottom: 8px !important;

View File

@ -34,7 +34,7 @@
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
background-color: rgba(0, 0, 0, 0.025);
background-color: rgba(0, 0, 0, 0.1);
}
.thumbnails li {

View File

@ -20,14 +20,14 @@
margin-top: 6px;
}
#dashboardHeader ul a {
margin-top: -2px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 12px;
padding-right: 8px;
border-radius: 0;
margin-right: 0px;
.pagination-right ul a, #dashboardHeader ul a {
margin-top: -2px !important;
padding-top: 5px !important;
padding-bottom: 3px !important;
padding-left: 12px !important;
padding-right: 8px !important;
border-radius: 0 !important;
margin-right: 0px !important;
}
.group-close, .group-open {
@ -71,23 +71,23 @@
}
.statSingleClient {
height: 300px;
height: 400px;
width: 100% !important;
margin-top: 11px;
margin-left: 10px !important;
margin-right: 11px !important;
margin-bottom: 0px !important;
margin-bottom: -10px !important;
border: 1px solid #C1BDBA !important;
background-color: #FFFFFF !important;
}
.statClient {
float: left;
height: 70px;
height: 130px;
width: 230px;
margin-left: 8px !important;
margin-bottom: 4px !important;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.1)
background-color: #FFFFFF !important;
}
@ -114,41 +114,42 @@
}
.svgClass {
margin-top: 0 !important;
margin-top: 20px !important;
padding-top: 0 !important;
height: 140px;
/*height: 140px;*/
height: 185px;
width: 300px;
}
.svgDetailClass {
margin-top: 0 !important;
padding-top: 0 !important;
height: 300px;
height: 400px;
width: 100%;
}
.boxHeader {
margin-top: 5px;
/*background-color: #686766;*/
color: black;
opacity: 0.25;
li:hover i, li.hover i,
li:hover h6, li.hover h6 {
opacity: 0.7 !important
}
.boxHeader:hover {
opacity: 0.8;
.boxHeader i {
opacity: 0;
margin-top: -2px !important;
}
.boxHeader h6 {
opacity: 0.25;
padding-top: 0 !important;
color: black;
margin-left: 10px;
margin-left: 5px;
margin-top: 0 !important;
margin-bottom: -15px !important;
}
#statsHeaderDiv {
margin-bottom: 16px;
margin-top: 12px;
margin-top: 0px;
margin-right: 20px !important;
margin-left: 8px !important;
padding: 0 !important;
@ -435,10 +436,15 @@
}
#detailGraphPadding {
padding-right: 33px !important;
padding-right: 31px !important;
margin-left: -2px !important;
margin-top: -12px !important;
}
#statSwitch {
margin-right: -40px;
}
#dashboardDropdown ul {
float:left;
}

View File

@ -199,7 +199,7 @@
.arangoTab {
padding-bottom: 0 !important;
margin-bottom: -1px !important;
margin-right: 20px;
margin-right: 25px;
}
.arangoTab .nav-tabs li {

View File

@ -4,7 +4,7 @@
</div>
<div class="plain">
<img src="<%= attributes.picture %>" height="60" width="60" alt="" class="icon">
<img src="<%= attributes.picture %>" height="80" width="80" alt="" class="icon">
<span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
<h5 class="collectionName">

View File

@ -1,7 +1,7 @@
<ul class="thumbnails2">
<div id="transparentHeader">
<div class="pagination pagination-small pagination-right">
<div class="pagination pagination-small pagination-right btn-group">
<ul><li class="enabled"><a id="collectionsToggle"><span class="glyphicon glyphicon-cog" title="Settings"></span></a></li></ul>
</div>

View File

@ -15,8 +15,6 @@
<!--<div id="menuGroups" class="dropdown-menu" role="menu">
</div>--!>
<ul class="dropdown-menu dashboard-dropdown" id="menuGroups">
</ul>
</div>
<!-- /btn-group -->
@ -24,7 +22,13 @@
<div class="btn-group pull-right">
<button data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">Interval <span class="caret"></span></button>
<ul class="dropdown-menu interval-dropdown">
</div>
<!-- /btn-group -->
</div>
<div id="dashboardDropdown">
<ul>
<li class="nav-header">Update every:</li>
<li><a><label class="radio"><input type="radio" name="updateInterval" id="every10seconds" value="10"><label><span></span>5 seconds</label></label></a></li>
<li><a><label class="radio"><input type="radio" name="updateInterval" id="every15seconds" value="15"><label><span></span>15 seconds</label></label></a></li>
@ -32,12 +36,10 @@
<li><a><label class="radio"><input type="radio" name="updateInterval" id="every60seconds" value="60"><label><span></span>60 seconds</label></label></a></li>
<li><a><label class="radio"><input type="radio" name="updateInterval" id="every120seconds" value="120"><label><span></span>120 seconds</label></label></a></li>
</ul>
</div>
<!-- /btn-group -->
</div>
</ul>
</ul>
<div class="containerdivNewLine"/>
<ul class="thumbnails marginRight10 dashboardContent">
<ul class="nav nav-tabs arangoTab">

View File

@ -79,11 +79,16 @@ var dashboardView = Backbone.View.extend({
"click .db-hide" : "hideChart",
"click .group-close" : "hideGroup",
"click .group-open" : "showGroup",
"click .dashSwitch" : "showCategory"
"click .dashSwitch" : "showCategory",
"click #dashboardToggle" : "toggleEvent"
},
template: new EJS({url: 'js/templates/dashboardView.ejs'}),
toggleEvent: function () {
$('#dashboardDropdown').slideToggle(70);
},
countCollections: function() {
var self = this;
$.each(window.arangoCollectionsStore.models, function(k,v) {
@ -215,8 +220,8 @@ var dashboardView = Backbone.View.extend({
'</ul>');
//group
$('#menuGroups').append('<li class="nav-header">' + this.name + '</li>');
$('#menuGroups').append('<li class="divider" id="' + this.group + 'Divider"></li>');
$('#dashboardDropdown').append('<ul id="' + this.group + 'Ul"></ul>');
$('#'+this.group+'Ul').append('<li class="nav-header">' + this.name + '</li>');
/*TEST
$('#menuGroups').append(
@ -407,7 +412,7 @@ var dashboardView = Backbone.View.extend({
$('#detailGraphHeader').text(this.name);
$("html, body").animate({ scrollTop: 0 }, "slow");
$('#detailGraphChart').show();
$('#detailGraph').height(300);
$('#detailGraph').height(400);
$('#dbHideSwitch').addClass('icon-minus');
$('#dbHideSwitch').removeClass('icon-plus');
self.updateNOW = true;
@ -639,8 +644,7 @@ var dashboardView = Backbone.View.extend({
'</li>'
);
console.log(figure.group);
$('#' + figure.group + 'Divider').after(
$('#' + figure.group + 'Ul').append(
'<li><a><label class="checkbox checkboxLabel">'+
'<input class="css-checkbox" type="checkbox" id='+figure.identifier+'Checkbox checked/>'+
'<label class="css-label"/>' +