Working on tags and expansion for tags

snipt/media/css/style.less

@@ -76,7 +76,6 @@ html, body {
 body {
     color: #666;
     font: normal 14px @Helvetica;
-    overflow-y: scroll;
     text-rendering: optimizeLegibility;
 }
 
@@ -484,7 +483,7 @@ article.snipt {
     }
     aside {
         float: right;
-        margin: 29px 30px 0 0;
+        margin: 23px 30px 0 0;
         width: 100px;
 
         ul.options {
@@ -542,12 +541,27 @@ article.snipt {
                     a {
                         border-bottom: 1px solid #999;
                         color: #999;
+                        display: inline-block;
                         font: normal 12px @Helvetica;
+                        max-width: 72px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                         text-decoration: none;
+                        white-space: nowrap;
+
+                        &:hover {
+                            border-color: #000;
+                            color: #000;
+                        }
                     }
                 }
             }
         }
+        &.expanded {
+            li {
+                display: block;
+            }
+        }
     }
     footer {
         clear: both;

snipt/media/js/src/modules/snipt.js

@@ -9,6 +9,7 @@
             this.model.view = this;
             this.$el = $(this.el);
             this.$container = $('div.container', this.$el);
+            this.$aside = $('aside', this.$el);
             this.$expand_button = $('a.expand', this.$el);
         },
         events: {
@@ -16,6 +17,7 @@
         },
         expand: function() {
             this.$container.toggleClass('expanded', 100);
+            this.$aside.toggleClass('expanded');
             return false;
         }
     });

snipt/snipts/models.py

@@ -72,6 +72,10 @@ class Snipt(models.Model):
                                           site.domain,
                                           self.key)
 
+    @property
+    def sorted_tags(self):
+        return self.tags.all().order_by('name')
+
     @property
     def lexer_name(self):
         return get_lexer_by_name(self.lexer).name

snipt/snipts/templates/snipts/list-public.html

@@ -8,10 +8,12 @@
 
 {% block content %}
     <section class="snipts" id="snipts">
-        {% autopaginate snipts 20 %}
-        {% for snipt in snipts %}
-            {% include "snipts/snipt-list.html" %}
-        {% endfor %}
-        {% paginate %}
+        {% with public='true' %}
+            {% autopaginate snipts 20 %}
+            {% for snipt in snipts %}
+                {% include "snipts/snipt-list.html" %}
+            {% endfor %}
+            {% paginate %}
+        {% endwith %}
     </section>
 {% endblock %}

snipt/snipts/templates/snipts/snipt-list.html

@@ -36,11 +36,15 @@
                 </li>
             </ul>
             <section class="tags">
-                <h2>Tags</h2>
+                <h2>{{ snipt.tags.all|length }} tag{{ snipt.tags.all|pluralize }}</h2>
                 <ul>
-                    {% for tag in snipt.tags.all %}
-                        <li>
-                            <a href="">{{ tag }}</a>
+                    {% for tag in snipt.sorted_tags %}
+                        <li {% if forloop.counter > 4 %}class="hidden"{% endif %}>
+                            {% if public %}
+                                <a href="/public/tag/{{ tag.slug }}/">{{ tag }}</a>
+                            {% else %}
+                                <a href="/{{ request.user.username }}/tag/{{ tag.slug }}/">{{ tag }}</a>
+                            {% endif %}
                         </li>
                     {% endfor %}
                 </ul>

snipt/snipts/templates/snipts/tags-user.html

@@ -1,9 +1,9 @@
 <section class="tags">
-    <h1>{{ user.username }}'s tags</h1>
+    <h1>{{ request.user.username }}'s tags</h1>
     <ul>
         {% for tag in tags %}
             <li>
-                <a href="/{{ user.username }}/tag/{{ tag.slug }}/">{{ tag.name }} ({{ tag.count }})</a>
+                <a href="/{{ request.user.username }}/tag/{{ tag.slug }}/">{{ tag.name }} ({{ tag.count }})</a>
             </li>
         {% endfor %}
     </ul>