Merge pull request #10 from mairin/master

List overview redesign

2 files changed, 88 insertions, 71 deletions

diff --git a/hyperkitty/templates/overview.html b/hyperkitty/templates/overview.html
index 8d521a6..098e609 100644
--- a/hyperkitty/templates/overview.html
+++ b/hyperkitty/templates/overview.html
@@ -18,66 +18,71 @@
 {% include 'threads/month_list.html' %}
 
     <section id="overview" class="span10">
-
-        <section id="graph">
-            <h2>Activities on the list over the last 30 days</h2>
-        <ul class="list-stats inline">
-            <li><span class="participant">{{ num_participants }} participants</span></li>
-            <li><span class="discussion">{{ num_threads }} discussions</span></li>
-        </ul>
-
-            <div id="fig" />
-        </section>
-
-        <p class="thread-new">
-            <a href="{% url "message_new" mlist_fqdn=mlist.name %}"
-               class="thread-new btn{% if not user.is_authenticated %} disabled" title="You must be logged-in to create a thread.{% endif %}"
-               ><strong>+</strong> Start a new thread</a>
-        </p>
-
-        <div class="row-fluid">
-            <div class="span6"> <!-- Column 1 -->
-
-            <section id="most-active" class="widget">
-                <h3>Recently active discussions</h3>
-                {% for thread in most_active_threads %}
-                    {% include "threads/summary_thread.html" with counter=forloop.counter %}
-                {% endfor %}
-            </section>
-
-            <section id="popular-threads" class="widget">
-                <h3>Most popular discussions</h3>
-                {% for thread in pop_threads %}
-                    {% include "threads/summary_thread.html" with counter=forloop.counter %}
-                {% empty %}
-                    <p>No vote has been cast this month (yet).</p>
-                {% endfor %}
-            </section>
-
-            <section id="discussion-maker" class="widget">
-                <h3>Most active posters</h3>
-                {% for poster in top_posters %}
-                <div class="maker">
-                    <div class="inline-block maker-id">
-                        #{{forloop.counter}}
-                    </div>
-                    <div class="inline-block gravatar">
-                        {% gravatar poster.email 40 %}
-                        <br />
-                    </div>
-                    <div class="inline-block">
-                        <span class="maker-name">{{ poster.name }}</span>
-                        <br />
-                        <span class="score">{{ poster.count }}</span> posts
-                    </div>
-                </div>
-                {% endfor %}
-            </section>
-
-            </div>
-            <div class="span6"> <!-- Column 2 -->
-
-            <section id="top-discussion" class="widget">
+	
+	<section id="title">
+	    <h2>{{ mlist.display_name }}</h2>
+	    <p id="description">{{ mlist.description}}</p>
+	
+	    <section id="statistics">
+	
+		<div id="chart"></div>
+		<p class="caption">Post volume over the past <strong>30</strong> days.</p>
+		
+		<p class="thread-new">
+		    <a href="{% url "message_new" mlist_fqdn=mlist.name %}"
+		    class="thread-new btn{% if not user.is_authenticated %} disabled" title="You must be logged-in to create a thread.{% endif %}">
+		    <strong>+</strong> Start a new thread</a>
+		</p>
+
+		<h3>Activity Summary</h3>
+		<p>The following statistics are from the past <strong>30</strong> days:</p>
+		<ul class="list-stats">
+		    <li><span class="participant">{{ num_participants }} participants</span></li>
+		    <li><span class="discussion">{{ num_threads }} discussions</span></li>
+		</ul>
+
+		<section id="discussion-maker" class="widget">
+		    <h3>Most active posters</h3>
+		    {% for poster in top_posters %}
+		    <div class="maker">
+			<div class="inline-block maker-id">
+			    #{{forloop.counter}}
+			</div>
+			<div class="inline-block gravatar">
+			    {% gravatar poster.email 40 %}
+			    <br />
+			</div>
+			<div class="inline-block">
+			    <span class="maker-name">{{ poster.name }}</span>
+			    <span class="score">{{ poster.count }}</span> posts
+			</div>
+		    </div>
+		    {% endfor %}
+		</section>
+
+		<!--  <div id="fig"></div> -->
+	    </section>
+	</section>
+
+	<section id="discussions">
+
+		<section id="most-active" class="widget">
+		    <h3>Recently active discussions</h3>
+		    {% for thread in most_active_threads %}
+			{% include "threads/summary_thread.html"  %} <!-- cut - with counter=forloop.counter -->
+		    {% endfor %}
+		</section>
+
+		<section id="popular-threads" class="widget">
+		    <h3>Most popular discussions</h3>
+		    {% for thread in pop_threads %}
+			{% include "threads/summary_thread.html" with counter=forloop.counter %}
+		    {% empty %}
+			<p>No vote has been cast this month (yet).</p>
+		    {% endfor %}
+		</section>
+
+		<section id="top-discussion" class="widget">
                 <h3>Most active discussions</h3>
                 {% for thread in top_threads %}
                     {% include "threads/summary_thread.html" with counter=forloop.counter %}
@@ -129,8 +134,7 @@
             </section>
             {% endif %}
 
-            </div>
-        </div>
+	</section>
 
     </section>
 
@@ -141,6 +145,7 @@
 {% block additionaljs %}
 
 <script type="text/javascript" >
+/*   
     $(function() {
         activity_graph(
             "#fig",
@@ -149,6 +154,16 @@
             "{{ archives_baseurl }}"
         )
     });
+*/
+    
+    $(function() {
+	chart(
+	    "#chart",
+	    ["{{days|join:'","'}}"],
+            {{evolution}},
+            "{{ archives_baseurl }}"
+	)
+    });
 </script>
 
 {% endblock %}
diff --git a/hyperkitty/templates/threads/summary_thread.html b/hyperkitty/templates/threads/summary_thread.html
index 2176936..e9b2b1f 100644
--- a/hyperkitty/templates/threads/summary_thread.html
+++ b/hyperkitty/templates/threads/summary_thread.html
@@ -3,21 +3,23 @@
 {% load storm %}
 
         <div class="thread">
-            {% if counter %}<span class="thread-id">#{{counter}}</span>{% endif %}
-            <span class="thread-title"><a name="{{thread.thread_id}}"
+            <span class="thread-title">
+		{% if counter %}<span class="thread-id">#{{counter}}</span>{% endif %}
+		<a name="{{thread.thread_id}}"
                 href="{% url 'thread' threadid=thread.thread_id mlist_fqdn=mlist.name %}"
-                >{{ thread.subject|strip_subject:mlist }}</a>
-                {% if thread.unread %}
+                >
+		{% if thread.category %}
+                    <span class="label category" style="background-color:{{thread.category.color}}">
+                        {{ thread.category.name|upper }}
+                    </span>
+		{% endif %}
+		{% if thread.unread %}
                     <i class="unread icon-eye-close" title="New messages in this thread"></i>
                 {% endif %}
+		{{ thread.subject|strip_subject:mlist }}</a>
             </span>
             <div class="thread-stats">
                 <ul class="inline-block">
-                    {% if thread.category %}
-                    <span class="label category" style="background-color:{{thread.category.color}}">
-                        {{ thread.category.name|upper }}
-                    </span>
-                    {% endif %}
                     <li class="participant">
                         {{ thread.participants|length }}
                     </li>