Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/admin/css/collectionsItemView.css
View File

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

2
html/admin/css/collectionsView.css
View File

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

56
html/admin/css/dashboardView.css
View File

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

2
html/admin/css/documentView.css
View File

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

2
html/admin/js/templates/collectionsItemView.ejs
View File

@ -4,7 +4,7 @@
</div> </div>
<div class="plain"> <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> <span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
<h5 class="collectionName"> <h5 class="collectionName">

2
html/admin/js/templates/collectionsView.ejs
View File

@ -1,7 +1,7 @@
<ul class="thumbnails2"> <ul class="thumbnails2">
<div id="transparentHeader"> <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> <ul><li class="enabled"><a id="collectionsToggle"><span class="glyphicon glyphicon-cog" title="Settings"></span></a></li></ul>
</div> </div>

16
html/admin/js/templates/dashboardView.ejs
View File

@ -15,8 +15,6 @@
<!--<div id="menuGroups" class="dropdown-menu" role="menu"> <!--<div id="menuGroups" class="dropdown-menu" role="menu">
</div>--!> </div>--!>
<ul class="dropdown-menu dashboard-dropdown" id="menuGroups">
</ul>
</div> </div>
<!-- /btn-group --> <!-- /btn-group -->
@ -24,7 +22,13 @@
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">Interval <span class="caret"></span></button> <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 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="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> <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="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> <li><a><label class="radio"><input type="radio" name="updateInterval" id="every120seconds" value="120"><label><span></span>120 seconds</label></label></a></li>
</ul> </ul>
</div>
<!-- /btn-group -->
</div> </div>
</ul>
</ul>
<div class="containerdivNewLine"/>
<ul class="thumbnails marginRight10 dashboardContent"> <ul class="thumbnails marginRight10 dashboardContent">
<ul class="nav nav-tabs arangoTab"> <ul class="nav nav-tabs arangoTab">

16
html/admin/js/views/dashboardView.js
View File

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