Improve front page appearance

7 files changed, 123 insertions, 71 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); })
diff --git a/hyperkitty/templates/index.html b/hyperkitty/templates/index.html
index 78804e1..357bde6 100644
--- a/hyperkitty/templates/index.html
+++ b/hyperkitty/templates/index.html
@@ -15,30 +15,59 @@
 <div class="span2 lists-menu">
     <h2>{% trans 'Lists' %}</h2>
     <ul>
-        <li><a href="{% url 'root' %}">All</a></li>
-        <li><a href="{% url 'root' %}?sort=active">Most active</a></li>
-        <li><a href="{% url 'root' %}?sort=popular">Most popular</a></li>
+        <li>
+            {% if not sort_mode %}
+            <span class="active">{% trans 'All' %}</span>
+            {% else %}
+            <a href="{% url 'root' %}">{% trans 'All' %}</a>
+            {% endif %}
+        </li>
+        <li>
+           {% if sort_mode == "active" %}
+           <span class="active">{% trans 'Most active' %}</span>
+           {% else %}
+           <a href="{% url 'root' %}?sort=active">{% trans 'Most active' %}</a>
+           {% endif %}
+        </li>
+        <li>
+           {% if sort_mode == "popular" %}
+           <span class="active">{% trans 'Most popular' %}</span>
+           {% else %}
+            <a href="{% url 'root' %}?sort=popular">{% trans 'Most popular' %}</a>
+           {% endif %}
+        </li>
     </ul>
 </div>
 
 <div class="span10">
 
-<h1>{% trans 'Available lists' %}</h1>
+<h1>
+    {% trans 'Available lists' %}
+    {% if sort_mode == 'active' %}
+        <small>({% trans 'most active first' %})</small>
+    {% elif sort_mode == 'popular' %}
+        <small>({% trans 'most popular first' %})</small>
+    {% endif %}
+</h1>
 
 {% if all_lists %}
 <table class="lists table">
     <thead>
-        <tr><th>List</th><th>Description</th><th>Activity in the past 30 days</th></tr>
+        <tr>
+            <th>{% trans 'List' %}</th>
+            <th>{% trans 'Description' %}</th>
+            <th>{% trans 'Activity in the past 30 days' %}</th>
+        </tr>
     </thead>
     <tbody>
 {% for mlist in all_lists %}
-        <tr
+        <tr class="list
            {% if mlist.is_private %}
-           class="private"
+           private
            {% elif mlist.recent_threads_count == 0 %}
-           class="inactive"
+           inactive
            {% endif %}
-           >
+           ">
             <td>
                 <a href="{% url 'list_overview' mlist_fqdn=mlist.name %}"
                    class="list-name">
@@ -54,12 +83,13 @@
                <span class="list-tags">inactive</span>
                {% endif %}
                 <br />
-                <a href="{% url 'list_overview' mlist_fqdn=mlist.name %}"
-                   class="list-address">
+                <span class="list-address">
                     {{ mlist.name }}
-                </a>
+                </span>
+            </td>
+            <td class="list-description">
+                {{ mlist.description|default_if_none:"" }}
             </td>
-            <td class="list-description"></td>
             <td class="activity">
                 <div class="chart" data-chart-values="{{ mlist.evolution|to_json }}"></div>
                 <ul class="list-stats">
@@ -80,6 +110,7 @@
                 </ul>
             </td>
         </tr>
+        <tr class="spacer"><td colspan="3"></td></tr>
 {% endfor %}
     </tbody>
 </table>
@@ -104,6 +135,9 @@
                   $.parseJSON($(this).attr("data-chart-values")),
                   {height: 30});
         });
+        $("table.lists tr.list").click(function(e) {
+            document.location.href = $(this).find("a.list-name").attr("href");
+        });
     });
 </script>
 
diff --git a/hyperkitty/templates/overview.html b/hyperkitty/templates/overview.html
index a5dc32f..7bc0d5d 100644
--- a/hyperkitty/templates/overview.html
+++ b/hyperkitty/templates/overview.html
@@ -60,7 +60,6 @@
 		    {% endfor %}
 		</section>
 
-		<!--  <div id="fig"></div> -->
 	    </section>
 	</section>
 
diff --git a/hyperkitty/views/index.py b/hyperkitty/views/index.py
index 0954ee8..7f61a1e 100644
--- a/hyperkitty/views/index.py
+++ b/hyperkitty/views/index.py
@@ -57,12 +57,15 @@ def index(request):
     # sorting
     sort_mode = request.GET.get('sort')
     if sort_mode == "active":
-        lists.sort(key=lambda l: l.recent_threads_count)
+        lists.sort(key=lambda l: l.recent_threads_count, reverse=True)
     elif sort_mode == "popular":
-        lists.sort(key=lambda l: l.recent_participants_count)
+        lists.sort(key=lambda l: l.recent_participants_count, reverse=True)
+    else:
+        sort_mode = None
 
     context = {
         'view_name': 'all_lists',
         'all_lists': lists,
+        'sort_mode': sort_mode,
         }
     return render(request, "index.html", context)