Use tabs in the user profile page

2 files changed, 72 insertions, 62 deletions

diff --git a/hyperkitty/static/css/hyperkitty-common.css b/hyperkitty/static/css/hyperkitty-common.css
index 7b05127..1ff6e91 100644
--- a/hyperkitty/static/css/hyperkitty-common.css
+++ b/hyperkitty/static/css/hyperkitty-common.css
@@ -17,11 +17,6 @@
 }
 
 
-.pagination {
-    margin-top: 3em;
-}
-
-
 /* from Bootstrap's alert class */
 .errorlist {
   list-style-type: none;
diff --git a/hyperkitty/templates/user_profile.html b/hyperkitty/templates/user_profile.html
index f82f92d..1a12846 100644
--- a/hyperkitty/templates/user_profile.html
+++ b/hyperkitty/templates/user_profile.html
@@ -15,69 +15,83 @@
 
     <h1>User profile <small>for {{ user }}</small></h1>
 
-    <form method="post" action="{% url 'user_profile' %}">
-    {% csrf_token %}
-    <table class="table table-bordered table-striped user-data">
-        <tbody>
-            <tr>
-                <th>{% trans 'User name:' %}</th>
-                <td>{{ user.username}}</td>
-            </tr>
-            {{ form.as_table }}
-            <tr>
-                <th>{% trans 'Email:' %}</th>
-                <td>{{ user.email }}</td>
-            </tr>
-            {% if use_mockups %}
-            <tr>
-                <th>{% trans 'Karma:' %}</th>
-                <td>{{ user_profile.karma }}</td>
-            </tr>
-            {% endif %}
-            <tr>
-                <th>{% trans 'Date joined:' %}</th>
-                <td>{{ user.date_joined }}</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="buttons">
-        <button type="submit" class="submit btn btn-primary">Update</button>
-        or <a href="#" class="cancel" onclick="document.forms[0].reset(); return false;">cancel</a>
-    </p>
-    </form>
-
-    <div class="gravatar">
-        <a href="http://gravatar.com/">{% gravatar user.email 150 %}</a>
-        <p><a href="http://gravatar.com/">Edit on gravatar.com</a></p>
-    </div>
+    <div class="tabbed">
+    <ul>
+        <li><a href="#account">Account</a></li>
+        <li><a href="#favorites">Favorites</a></li>
+        <li><a href="#views">Threads you have read</a></li>
+        <li><a href="#votes">Votes</a></li>
+    </ul>
+
+    <div id="account">
+        <form method="post" action="{% url 'user_profile' %}">
+        {% csrf_token %}
+        <table class="table table-bordered table-striped user-data">
+            <tbody>
+                <tr>
+                    <th>{% trans 'User name:' %}</th>
+                    <td>{{ user.username}}</td>
+                </tr>
+                {{ form.as_table }}
+                <tr>
+                    <th>{% trans 'Email:' %}</th>
+                    <td>{{ user.email }}</td>
+                </tr>
+                {% if use_mockups %}
+                <tr>
+                    <th>{% trans 'Karma:' %}</th>
+                    <td>{{ user_profile.karma }}</td>
+                </tr>
+                {% endif %}
+                <tr>
+                    <th>{% trans 'Date joined:' %}</th>
+                    <td>{{ user.date_joined }}</td>
+                </tr>
+            </tbody>
+        </table>
+        <p class="buttons">
+            <button type="submit" class="submit btn btn-primary">Update</button>
+            or <a href="#" class="cancel" onclick="document.forms[0].reset(); return false;">cancel</a>
+        </p>
+        </form>
+
+        <div class="gravatar">
+            <a href="http://gravatar.com/">{% gravatar user.email 150 %}</a>
+            <p><a href="http://gravatar.com/">Edit on gravatar.com</a></p>
+        </div>
 
     <div class="clearfix"></div>
+    </div>
 
-    <h3>Favorites</h3>
-    {% if favorites %}
-        <ul>
-        {% for fav in favorites %}
-            <li>
-                <a href="{% url 'thread' mlist_fqdn=fav.list_address threadid=fav.threadid %}"
-                    >{{ fav.thread.starting_email.subject }}</a> by {{ fav.thread.starting_email.sender_name }}
-                    ({{ fav.thread|get_date|date:"l, j F Y H:i:s" }})
-            </li>
-        {% endfor %}
-        </ul>
-    {% else %}
-        <p>No favorite yet.</p>
-    {% endif %}
+    <div id="favorites">
+        {% if favorites %}
+            <ul>
+            {% for fav in favorites %}
+                <li>
+                    <a href="{% url 'thread' mlist_fqdn=fav.list_address threadid=fav.threadid %}"
+                        >{{ fav.thread.starting_email.subject }}</a> by {{ fav.thread.starting_email.sender_name }}
+                        ({{ fav.thread|get_date|date:"l, j F Y H:i:s" }})
+                </li>
+            {% endfor %}
+            </ul>
+        {% else %}
+            <p>No favorite yet.</p>
+        {% endif %}
+    </div>
 
 
-    <h3>Threads you have read</h3>
-    <img alt="Loading..." class="ajaxloader" src="{{ STATIC_URL }}img/ajax-loader.gif" />
-    <div class="views"></div>
+    <div id="views">
+        <img alt="Loading..." class="ajaxloader" src="{{ STATIC_URL }}img/ajax-loader.gif" />
+        <div class="ajaxcontent"></div>
+    </div>
 
 
-    <h3>Votes</h3>
-    <img alt="Loading..." class="ajaxloader" src="{{ STATIC_URL }}img/ajax-loader.gif" />
-    <div class="votes"></div>
+    <div id="votes">
+        <img alt="Loading..." class="ajaxloader" src="{{ STATIC_URL }}img/ajax-loader.gif" />
+        <div class="ajaxcontent"></div>
+    </div>
 
+    </div>
 </div>
 
 {% endblock %}
@@ -87,8 +101,9 @@
 <script type="text/javascript">
     $(document).ready(function() {
         // Load the last views
-        update_user_profile_part(".views", "{% url 'user_last_views' %}");
-        update_user_profile_part(".votes", "{% url 'user_votes' %}");
+        $(".tabbed").tabs();
+        update_user_profile_part("#views div.ajaxcontent", "{% url 'user_last_views' %}");
+        update_user_profile_part("#votes div.ajaxcontent", "{% url 'user_votes' %}");
     });
 </script>