Styling the tags page

generator/management/commands/generate.py

@@ -3,6 +3,7 @@
 import os
 import os.path
 import shutil
+import re
 
 from math import inf
 from generator.index import make_index
@@ -167,10 +168,12 @@ def generate ():
   # output(os.path.join(outputdir, 'produsers.layout.html'), 'produsers.layout.html', { 'produsers': sorted(produsers.models, key=lambda r: str(r.key)), 'grouped_produsers': grouped_produsers  })
   
   ## Tags
+  sorted_tags = sorted(tags.models, key=lambda m: re.subn(r'\W', '', str(m))[0].lower())
+  grouped_tags = regroup(sorted_tags, key=lambda m: re.subn(r'\W', '', str(m))[0].lower()[0])
   output(
     os.path.join(outputdir, 'tags.html'), 
     'tags.html', 
-    { 'tags': sorted(tags.models, key=getLabelAsSortKey) })
+    { 'tags': sorted_tags, 'grouped_tags': grouped_tags })
   
   ## Bibliography
   output(

generator/settings.py

@@ -5,7 +5,7 @@ MENU_ITEMS = [
   ('Produsers', 'produsers.html' ),
 #   ('Bibliography', 'bibliography.html' ),
 #   ('Related Projects', 'external-projects.html'),
-#   ('Tags', 'tags.html' ),
+  ('Tags', 'tags.html' ),
 #   ('Contact', 'pages/contact.html')
 ]
 

generator/templates/produser.html

@@ -71,7 +71,7 @@
   {% endif %}
   {% if produser.notes %}
     <h2>Notes</h2>
-    <ul>
+    <ul class="simplelist">
       {% for note in produser.notes.targets %}
         <li>
           <a href="{{ note.link }}" class="note">{{ note }}</a>

generator/templates/static/styles.simple.css

@@ -608,4 +608,35 @@ section.audio {
 
 .trajectory-list .trajectory--item:nth-child(-n+2) {
 	border-top: 0px;
+}
+
+.taglist {
+	column-width: 12.5em;
+	column-gap: 1.5em;
+  line-height: 140%;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.taglist h3 {
+	margin-top: 1em;
+}
+.taglist :first-child h3 {
+	margin-top: 0;
+}
+.taglist li {
+  padding-left: .5em;
+  position: relative;
+}
+.taglist li:before {
+  content: '-';
+  position: absolute;
+  left: 0em;
+  margin-left: 0;
+}
+.taglist li.letter {
+  padding-left: 0;
+}
+.taglist li.letter:before {
+  content: '';
 }
\ No newline at end of file

generator/templates/tags.html

@@ -4,9 +4,12 @@
 
 {% block content %}
   <h1>Tags</h1>
-  <ul>
-    {% for tag in tags %}
-      <li><a href="{{ tag.link }}">{{ tag }} ({{ tag.link_count }})</a></li>
+  <ul class="taglist">
+    {% for letter, tags in grouped_tags %}
+      <li id="{{ letter }}" class="letter"><h3>{{ letter|upper }}</h3></li>
+      {% for tag in tags %}
+        <li><a href="{{ tag.link }}">{{ tag }}&nbsp;({{ tag.link_count }})</a></li>
+      {% endfor %}
     {% endfor %}
   </ul>
 {% endblock %}
\ No newline at end of file