Working on list view

snipt/media/css/style.less

@@ -71,7 +71,7 @@
 
 // Page
 html, body {
-    background: #FFF url('/media/images/bg.gif') top left repeat;
+    background: #F5F2F3 url('/media/images/bg.gif') top left repeat;
 }
 body {
     color: #666;
@@ -395,6 +395,7 @@ article.snipt {
                     background: transparent;
                     border: none;
                     font: normal 14px/18px @Inconsolata;
+                    font-weight: normal !important;
                     overflow-x: auto;
                     margin: 0 15px;
                     min-height: 173px;
@@ -491,16 +492,37 @@ article.snipt {
                 margin: 2px 0;
 
                 a {
-                    background: rgba(128, 128, 128, .08);
-                    color: #999;
+                    background: rgba(128, 128, 128, .15) url('/media/images/edit-icon.png') 14px center no-repeat;
+                    color: #000;
                     display: block;
                     font: bold 12px @Helvetica;
+                    opacity: .5;
                     padding: 7px 10px 7px 35px;
+                    position: relative;
 
                     &:hover {
-                        background: rgba(128, 128, 128, .15);
+                        background-color: rgba(128, 128, 128, .18);
+                        opacity: 1;
                         text-decoration: none;
                     }
+                    &.edit {
+                        &:after {
+                            background: #F5F2F3 url('/media/images/bg.gif') top left repeat;
+                            content: "";
+                            height: 20px;
+                            position: absolute;
+                            right: 5px;
+                            top: -3px;
+                            width: 3px;
+                            -webkit-transform: rotate(-45deg);
+                        }
+                    }
+                    &.embed {
+                        background-image: url('/media/images/embed-icon.png');
+                    }
+                    &.copy {
+                        background-image: url('/media/images/copy-icon.png');
+                    }
                 }
             }
         }
@@ -529,6 +551,9 @@ article.snipt {
                         text-decoration: underline;
                     }
                 }
+                &.author {
+                    background: transparent url('/media/images/author-icon.png') 0 1px no-repeat;
+                }
                 &.comments {
                     background: transparent url('/media/images/comments-icon.png') 0 2px no-repeat;
                 }
@@ -576,6 +601,15 @@ div.pagination {
             a {
                 color: #3BAAF3;
                 padding: 0 8px;
+
+                &:hover {
+                    background: #EAE8EB;
+                }
+            }
+            &.active {
+                a {
+                    background: #E0E1E1;
+                }
             }
             &.prev {
                 line-height: 2px;

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

@@ -8,7 +8,7 @@
                 <h2>{{ snipt.lexer_name }}</h2>
                 <h1><a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></h1>
             </header>
-            <section class="code autumn">
+            <section class="code {% if request.GET.style %}{{ request.GET.style }}{% else %}autumn{% endif %}">
                 {{ snipt.get_stylized|safe }}
                 {% if snipt.get_line_count > 9 %}
                     <a href="#" class="expand">
@@ -23,14 +23,16 @@
         </div>
         <aside>
             <ul>
+                {% if snipt.user == request.user %}
+                    <li>
+                        <a class="edit" href="#">Edit</a>
+                    </li>
+                {% endif %}
                 <li>
-                    <a href="#">Edit</a>
+                    <a class="embed" href="#">Embed</a>
                 </li>
                 <li>
-                    <a href="{{ snipt.get_embed_url }}">Embed</a>
-                </li>
-                <li>
-                    <a href="#">Copy</a>
+                    <a class="copy" href="#">Copy</a>
                 </li>
             </ul>
         </aside>
@@ -39,7 +41,15 @@
         <ul class="attrs">
             <li class="author"><a href="{{ snipt.user.get_absolute_url }}">{{ snipt.user.username }}</a></li>
             <li class="created">{{ snipt.created|naturalday }}</li>
-            <li class="comments"><a href="{{ snipt.get_absolute_url }}#comments">Comments ({{ snipt.comment_set.all|length }})</a></li>
+            <li class="comments">
+                <a href="{{ snipt.get_absolute_url }}#comments">
+                    {% if snipt.comment_set.all|length > 0 %}
+                        {{ snipt.comment_set.all|length }} Comment{{ snipt.comment_set.all|pluralize }}
+                    {% else %}
+                        No comments
+                    {% endif %}
+                </a>
+            </li>
         </ul>
     </footer>
 </article>