Reorganize the overview page in columns

2 files changed, 33 insertions, 42 deletions

diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
index 02f866a..a4f0a8e 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css
@@ -11,6 +11,7 @@
     font-size: 20px;
     line-height: 28px;
     margin-bottom: 0.5em;
+    margin-top: 0;
     text-align: center;
 }
 
@@ -46,7 +47,6 @@
 
 #overview .widget {
     padding: 1em;
-    padding-bottom: 0;
     border: 1px solid #ddd;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
@@ -54,6 +54,10 @@
     margin: 1em 0;
 }
 
+#overview .thread {
+    margin: 1.5em 0 0 0;
+}
+
 #overview .thread-stats {
     margin-left: 3em;
 }
@@ -118,6 +122,8 @@
     font-size: 105%;
     line-height: 105%;
     margin: 1.5em 0 0.5em 0;
+    padding-left: 1em;
+    padding-right: 1em;
 }
 #discussion-by-category h4.first {
     margin-top: 0;
diff --git a/hyperkitty/templates/overview.html b/hyperkitty/templates/overview.html
index 065bfc9..4966a01 100644
--- a/hyperkitty/templates/overview.html
+++ b/hyperkitty/templates/overview.html
@@ -31,30 +31,15 @@
         </p>
 
         <div class="row-fluid">
+            <div class="span6"> <!-- Column 1 -->
 
-            <div class="span6">
             <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>
-            </div>
 
-            <div class="span6">
-            <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 %}
-                {% endfor %}
-            </section>
-            </div>
-
-        </div>
-
-        <div class="row-fluid">
-
-            <div class="span6">
             <section id="popular-threads" class="widget">
                 <h3>Most popular discussions</h3>
                 {% for thread in pop_threads %}
@@ -63,30 +48,7 @@
                     <p>No vote has been cast this month (yet).</p>
                 {% endfor %}
             </section>
-            </div>
-
-            <div class="span6">
-            <section id="discussion-by-category" class="widget">
-                <h3>Discussion by category</h3>
-                {% for category, threads in threads_by_category.items %}
-                    <h4 class="label{% if forloop.first %} first{% endif %}"
-                       style="background-color:{{category.color}}"
-                       >{{ category.name|upper }}
-                    </h4>
-                    {% for thread in threads %}
-                        {% include "threads/summary_thread.html" %}
-                    {% endfor %}
-                {% empty %}
-                    <p>No category has been set this month (yet).</p>
-                {% endfor %}
-            </section>
-            </div>
 
-        </div>
-
-        <div class="row-fluid">
-
-            <div class="span6">
             <section id="discussion-maker" class="widget">
                 <h3>Most active posters</h3>
                 {% for poster in top_posters %}
@@ -106,9 +68,32 @@
                 </div>
                 {% endfor %}
             </section>
+
             </div>
+            <div class="span6"> <!-- Column 2 -->
+
+            <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 %}
+                {% endfor %}
+            </section>
+
+            <section id="discussion-by-category" class="widget">
+                <h3>Discussion by category</h3>
+                {% for category, threads in threads_by_category.items %}
+                    <h4 class="label{% if forloop.first %} first{% endif %}"
+                       style="background-color:{{category.color}}"
+                       >{{ category.name|upper }}
+                    </h4>
+                    {% for thread in threads %}
+                        {% include "threads/summary_thread.html" %}
+                    {% endfor %}
+                {% empty %}
+                    <p>No category has been set this month (yet).</p>
+                {% endfor %}
+            </section>
 
-            <div class="span6">
             {% if top_author %}
             <section id="discussion-maker" class="widget">
                 <h3>Prominent discussion maker</h3>
@@ -136,8 +121,8 @@
                 <h3>Tag cloud</h3>
             </section>
             {% endif %}
-            </div>
 
+            </div>
         </div>
 
     </section>