changed checkbox & graph styling

html/admin/css/dashboardView.css

@@ -90,8 +90,12 @@
   box-shadow: 0 0 3px #333333;
 }
 
-.statChart {
-  margin-left: -15px !important;
+#detailGraphChart {
+  margin-left: -10px !important;
+}
+
+.statGroups .statChart {
+  margin-left: -45px !important;
 }
 
 .nv-axislabel {
@@ -106,7 +110,7 @@
   margin-top: 0 !important;
   padding-top: 0 !important;
   height: 140px;
-  width: 220px;
+  width: 255px;
 }
 
 .svgDetailClass {
@@ -161,3 +165,54 @@
 .nv-point {
   display: none;
 }
+
+/*Dashboard Dropdown*/
+
+.dropdown-menu li > a {
+  padding: 0px 20px !important;
+}
+
+.checkboxLabel {
+  margin-top: 4px;
+  padding-left: 0;
+}
+
+.svgClass .nv-axisMaxMin text {
+  visibility: hidden;
+}
+
+.svgClass .major text {
+  visibility: hidden;
+}
+
+.svgClass .nv-axislabel {
+  visibility: hidden;
+}
+
+/*Dashboard Checkbox*/
+
+input[type=checkbox].css-checkbox {
+  display:none;
+}
+
+input[type=checkbox].css-checkbox + label.css-label {
+  padding-left:20px;
+  margin-top: 0px;
+  margin-bottom: -0px;
+  height:15px; 
+  display:inline-block;
+  line-height:15px;
+  background-repeat:no-repeat;
+  background-position: 0 0;
+  font-size:15px;
+  vertical-align:middle;
+  cursor:pointer;
+}
+
+input[type=checkbox].css-checkbox:checked + label.css-label {
+  background-position: 0 -15px;
+}
+
+.css-label {
+  background-image:url(../img/dark-check-green.png);
+}

html/admin/js/templates/collectionsView.ejs

@@ -8,13 +8,44 @@
 
       <ul class="dropdown-menu">
         <li class="nav-header">Type</li>
-        <li><a href="#"><label class="checkbox"><input type="checkbox" id="checkSystem">System</label></a></li>
-        <li><a href="#"><label class="checkbox"><input type="checkbox" id="checkDocument">Document</label></a></li>
-        <li><a href="#"><label class="checkbox"><input type="checkbox" id="checkEdge">Edge</label></a></li>
+        <li><a href="#">
+            <label class="checkbox checkboxLabel">
+              <input class="css-checkbox" type="checkbox" id="checkSystem">
+            <label class="css-label"></label>System
+          </label>
+        </a></li>
+
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkDocument">
+            <label class="css-label"></label>Document
+          </label>
+        </a></li>
+
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkEdge">
+            <label class="css-label"></label>Edge
+          </label>
+        </a></li>
+
         <li class="divider"></li>
         <li class="nav-header">Status</li>
-        <li><a href="#"><label class="checkbox"><input type="checkbox" id="checkLoaded">Loaded</label></a></li>
-        <li><a href="#"><label class="checkbox"><input type="checkbox" id="checkUnloaded">Unloaded</label></a></li>
+
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkLoaded">
+            <label class="css-label"></label>Loaded
+          </label>
+        </a></li>
+
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkUnloaded">
+            <label class="css-label"></label>Unloaded
+          </label>
+        </a></li>
+
         <li class="nav-header">Sorting</li>
         <li><a href="#"><label class="radio"><input type="radio" id="sortName">Sort by name</label></a></li>
         <li><a href="#"><label class="radio"><input type="radio" id="sortType">Sort by type</label></a></li>

html/admin/js/views/dashboardView.js

@@ -308,8 +308,12 @@ var dashboardView = Backbone.View.extend({
           .call(chart)
           .datum([ { values: self.seriesData[identifier].values, key: identifier, color: "#8AA051" } ])
           .transition().duration(500);
-
       }
+      else {
+      }
+
+      //disable ticks for small charts
+      //disable label for small charts
 
       d3.select("#" + identifier + "Chart svg")
         .call(chart)
@@ -402,8 +406,10 @@ var dashboardView = Backbone.View.extend({
     );
 
     $('#' + figure.group + 'Divider').before(
-      '<li><a><label class="checkbox">'+
-      '<input type="checkbox" id=' + figure.identifier + 'Checkbox checked>' + figure.name + '</label></a></li>'
+      '<li><a><label class="checkbox checkboxLabel">'+
+        '<input class="css-checkbox" type="checkbox" id=' + figure.identifier + 'Checkbox checked/>' +
+        '<label class="css-label"/>' +
+      figure.name + '</label></a></li>'
     );
     $('.db-info').tooltip({
       placement: "top"