Improve front page appearance

4 files changed, 71 insertions, 55 deletions

diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-common.css b/hyperkitty/static/hyperkitty/css/hyperkitty-common.css
index 310bfb4..3a21aaa 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-common.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-common.css
@@ -336,3 +336,44 @@ h1 {
     line-height: 32px;
     margin-bottom: 0.5em;
 }
+
+
+
+/*
+ * Activity chart
+ */
+.chart-data {
+    font-size: 8pt;
+    font-family: "Droid Sans", sans-serif;
+    font-color: #777;
+    position: relative;
+    margin: auto;
+    padding-top: 3px;
+}
+
+.chart-data .axis path, .chart-data .axis line {
+/*
+    fill: none;
+    stroke: #bbb;
+    shape-rendering: geometricPrecision;
+*/
+    display: none;
+}
+
+.chart-data .bars rect {
+    fill: steelBlue;
+}
+
+
+/* Next 2 blocks for grid lines */
+
+/*
+.chart-data .grid .tick {
+    stroke: lightgrey;
+    opacity: 0.3;
+}
+
+.chart-data .grid path {
+    stroke-width: 0;
+}
+*/
diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
index 9425f49..71d51c1 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
@@ -24,6 +24,9 @@
 .all-lists .lists-menu li {
     margin: 0.5em 0;
 }
+.all-lists .lists-menu span.active {
+    font-weight: bold;
+}
 
 .all-lists h1.lists {
     margin-bottom: 0.5em;
@@ -35,15 +38,32 @@
     font-size: small;
     font-weight: normal;
 }
-.all-lists table.lists tbody tr {
+
+.all-lists table.lists tbody tr.list {
     border: 1px solid #ccc;
-    margin: 0.2em 0;
 }
+.all-lists table.lists tbody tr.list:hover {
+    cursor: pointer;
+    color: white;
+    background-color: #0088cc;
+}
+.all-lists table.lists tbody tr.list:hover a {
+    color: white;
+}
+.all-lists table.lists tbody tr.list:hover .chart-data .bars rect {
+    fill: white;
+}
+
+.all-lists table.lists tr.spacer td {
+    height: 0.5em;
+    padding: 0;
+}
+
 .all-lists table.lists td {
     vertical-align: middle;
     padding: 5px 8px;
-    margin-bottom: 5px;
 }
+
 .all-lists table.lists .list-name {
     font-size: 120%;
     color: black;
diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
index c91ea36..3b2d5c8 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
@@ -12,50 +12,6 @@
     margin-top: 0;
 }
 
-#chart-data rect {
-    cursor: pointer;
-}
-
-#fig, #chart-data {
-  position: relative;
-  margin: auto;
-  font-size: 8pt;
-  font-family: "Droid Sans", sans-serf;
-  font-color: #777;
-}
-
-
-#fig .axis path, #fig .axis line,
-#chart-data .axis path, #chart-data .axis line {
-/*
-  fill: none;
-  stroke: #bbb;
-  shape-rendering: geometricPrecision;
-*/
-  display: none;
-}
-
-#fig .area,
-#chart-data .bars rect {
-  fill: steelBlue;
-}
-
-
-/* Next 2 blocks for grid lines */
-
-/*
-#fig .grid .tick,
-#chart-data .grid .tick {
-    stroke: lightgrey;
-    opacity: 0.3;
-}
-
-#fig .grid path,
-#chart-data .grid path {
-    stroke-width: 0;
-}
-*/
-
 /*
 #overview .widget {
     padding: 1em;
@@ -163,14 +119,12 @@ section#title #description {
   font-weight: normal;
 }
 
-section#title svg {
-  padding-top: 3px;
-  border: 1px solid #bbb;
-}
-
-section#title #chart {
+section#title .chart {
   margin-top: 2em;
 }
+section#title .chart-data {
+  border: 1px solid #bbb;
+}
 
 section#title p.thread-new {
   text-align: left;
diff --git a/hyperkitty/static/hyperkitty/js/hyperkitty-common.js b/hyperkitty/static/hyperkitty/js/hyperkitty-common.js
index 41f2c3e..ac164ea 100644
--- a/hyperkitty/static/hyperkitty/js/hyperkitty-common.js
+++ b/hyperkitty/static/hyperkitty/js/hyperkitty-common.js
@@ -109,6 +109,7 @@ function setup_attachments(baseElem) {
 /*
  * Recent activity bar chart
  */
+
 function chart(elem_id, data, default_props) {
     /* Function for grid lines, for x-axis */
     function make_x_axis() {
@@ -166,7 +167,7 @@ function chart(elem_id, data, default_props) {
         .y(function(d) { return y(d.count); });
 
     var svg = d3.select(elem_id).append("svg")
-	.attr("id", "chart-data")
+	.attr("class", "chart-data")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
       .append("g")
@@ -198,7 +199,7 @@ function chart(elem_id, data, default_props) {
 	    .tickFormat("")
 	)
 
-    svg.append("g").attr("class","bars").selectAll("rect")
+    svg.append("g").attr("class", "bars").selectAll("rect")
 	    .data(data)
 	.enter().append("rect")
 	    .attr("x", function(d) { return x(d.date); })