Add a quick access menu to the front page

3 files changed, 78 insertions, 22 deletions

diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
index 344d550..4f5fac4 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
@@ -7,7 +7,7 @@
 }
 
 
-.all-lists .lists-menu h2 {
+.all-lists .side-menu h2 {
     font-size: 100%;
     line-height: 100%;
     font-weight: bold;
@@ -17,16 +17,47 @@
     margin-bottom: 1em;
     padding: 0;
 }
-.all-lists .lists-menu ul {
+.all-lists .side-menu ul {
     list-style-type: none;
     margin-left: 1em;
 }
-.all-lists .lists-menu li {
+.all-lists .side-menu li {
     margin: 0.5em 0;
 }
 .all-lists .lists-menu span.active {
     font-weight: bold;
 }
+.all-lists div.lists {
+    padding-right: 4em;
+}
+.all-lists .initials {
+    right: 0;
+    right: -3em; /* there will be an animation to 0 */
+    position: absolute;
+    text-align: center;
+    margin-top: 3em;
+    border: 1px solid #bbb;
+    border-right: 0;
+    background-color: #f8f8f8;
+}
+.all-lists .initials h2 {
+    font-size: 18pt;
+    margin-bottom: 0.2em;
+}
+.all-lists .initials ul {
+    margin: 0;
+}
+.all-lists .initials ul li {
+    margin: 0;
+}
+.all-lists .initials ul a {
+    display: block;
+    padding: 0.5em 1em;
+}
+.all-lists .initials ul a:hover {
+    background-color: #ddd;
+    text-decoration: none;
+}
 
 .all-lists h1.lists {
     margin-bottom: 0.5em;
@@ -80,6 +111,9 @@
 .all-lists table.lists td.activity {
     width: 260px;
 }
+.all-lists table.lists .chart {
+    height: 35px;
+}
 .all-lists table.lists ul.list-stats {
     margin: 0;
     text-align: center;
diff --git a/hyperkitty/templates/index.html b/hyperkitty/templates/index.html
index 475d8be..8b9ca13 100644
--- a/hyperkitty/templates/index.html
+++ b/hyperkitty/templates/index.html
@@ -12,7 +12,7 @@
 
 <div class="row-fluid all-lists">
 
-<div class="span2 lists-menu">
+<div class="span2 side-menu lists-menu">
     <h2>{% trans 'Lists' %}</h2>
     <ul>
         <li>
@@ -46,7 +46,7 @@
     </ul>
 </div>
 
-<div class="span10">
+<div class="span10 lists">
 
 <h1>
     {% trans 'Available lists' %}
@@ -78,22 +78,23 @@
            {% endif %}
            ">
             <td>
-               {% if mlist.is_new %}
-                <span class="new label">{% trans 'new' %}</span>
-               {% endif %}
-                <a href="{% url 'list_overview' mlist_fqdn=mlist.name %}"
-                   class="list-name">
-                    {% if mlist.display_name %}
-                        {{ mlist.display_name }}
-                    {% else %}
-                        {{ mlist.name|until:"@" }}
-                    {% endif %}
-                </a>
-               {% if mlist.is_private %}
-               <span class="list-tags">private</span>
-               {% elif mlist.recent_threads_count == 0 %}
-               <span class="list-tags">inactive</span>
-               {% endif %}
+                {% ifchanged mlist.name|first %}<a name="{{ mlist.name|first }}" />{% endifchanged %}
+                {% if mlist.is_new %}
+                 <span class="new label">{% trans 'new' %}</span>
+                {% endif %}
+                 <a href="{% url 'list_overview' mlist_fqdn=mlist.name %}"
+                    class="list-name">
+                     {% if mlist.display_name %}
+                         {{ mlist.display_name }}
+                     {% else %}
+                         {{ mlist.name|until:"@" }}
+                     {% endif %}
+                 </a>
+                {% if mlist.is_private %}
+                <span class="list-tags">private</span>
+                {% elif mlist.recent_threads_count == 0 %}
+                <span class="list-tags">inactive</span>
+                {% endif %}
                 <br />
                 <span class="list-address">
                     {{ mlist.name }}
@@ -130,7 +131,18 @@
 <p>No archived list yet.</p>
 {% endif %}
 
-</div> <!-- right column -->
+</div> <!-- middle column -->
+
+{% if all_lists|length > 10 %}
+<div class="side-menu initials">
+    <h2>&#8628;</h2>
+    <ul>
+        {% for letter in initials %}
+        <li><a href="#{{ letter }}">{{ letter|upper }}</a></li>
+        {% endfor %}
+    </ul>
+</div>
+{% endif %}
 
 </div>
 
@@ -150,6 +162,13 @@
         $("table.lists tr.list").click(function(e) {
             document.location.href = $(this).find("a.list-name").attr("href");
         });
+        $(".initials").animate({ right: 0 }, {duration: 600});
+        // Override the scrolling because we have a fixed header
+        $(".initials a").click(function (e) {
+            e.preventDefault();
+            var target = $("a[name="+$(this).attr("href").substring(1)+"]");
+            $(window).scrollTop(target.offset().top - 70);
+        });
     });
 </script>
 
diff --git a/hyperkitty/views/index.py b/hyperkitty/views/index.py
index 1be3995..7265873 100644
--- a/hyperkitty/views/index.py
+++ b/hyperkitty/views/index.py
@@ -42,6 +42,7 @@ def index(request):
     store = get_store(request)
     lists = store.get_lists()
     now = datetime.datetime.now()
+    initials = set()
     for mlist in lists:
         if mlist.archive_policy != ArchivePolicy.private:
             mlist.is_private = False
@@ -59,6 +60,7 @@ def index(request):
             mlist.is_new = True
         else:
             mlist.is_new = False
+        initials.add(mlist.name[0])
 
     # sorting
     sort_mode = request.GET.get('sort')
@@ -74,6 +76,7 @@ def index(request):
     context = {
         'view_name': 'all_lists',
         'all_lists': lists,
+        'initials': sorted(list(initials)),
         'sort_mode': sort_mode,
         }
     return render(request, "index.html", context)