Allow for viewing an individual tag

pinry/pins/urls.py

@@ -6,6 +6,8 @@ from .views import UploadImage
 
 urlpatterns = patterns('pinry.pins.views',
     url(r'^upload-pin/$', UploadImage.as_view(), name='new-pin'),
-    url(r'^$', TemplateView.as_view(template_name='core/recent_pins.html'),
+    url(r'^$', TemplateView.as_view(template_name='core/pins.html'),
         name='recent-pins'),
+    url(r'^tag/(?P<tag>(\w|-)+)/$', TemplateView.as_view(template_name='core/pins.html'),
+        name='tag-pins'),
 )

pinry/static/css/lightbox.css

@@ -11,6 +11,7 @@
         border: 1px solid #bbb;
         position: absolute;
         left: 50%;
+        border-radius: 3px;
     }
 
         .lightbox-data {

pinry/static/css/pinry.css

@@ -81,7 +81,7 @@ body {
         }
 
             .pin .editable .borderable {
-                padding: 7px 8px 5px;
+                padding: 5px 8px;
                 border-radius: 4px;
                 -moz-border-radius: 4px;
                 -webkit-border-radius: 4px;

pinry/static/js/pinry.js

@@ -67,7 +67,9 @@ $(window).load(function() {
         $('.spinner').css('display', 'block');
 
         // Fetch our pins from the api using our current offset
-        $.get('/api/v1/pin/?format=json&ordering=-id&offset='+String(offset), function(pins) {
+        var apiUrl = '/api/v1/pin/?format=json&ordering=-id&offset='+String(offset);
+        if (tagFilter) apiUrl = apiUrl + '&tag=' + tagFilter;
+        $.get(apiUrl, function(pins) {
             // Set which items are editable by the current user
             for (var i=0; i < pins.objects.length; i++) 
                 pins.objects[i].editable = (pins.objects[i].submitter.username == currentUser.username);

pinry/templates/base.html

@@ -68,7 +68,8 @@
                     id: "{{ user.id }}",
                     username: "{{ user.username }}",
                     gravatar: "{{ user.gravatar }}"
-                };
+                },
+                tagFilter = "{{ request.resolver_match.kwargs.tag }}";
         </script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

pinry/templates/includes/lightbox.html

@@ -2,6 +2,7 @@
     <script id="lightbox-template" type="text/x-handlebars-template">
         <div class="lightbox-background">
             <div class="lightbox-wrapper">
+                <img src="{{image}}" />
                 <div class="lightbox-data clearfix">
                     <div class="avatar pull-left">
                         <img src="http://gravatar.com/avatar/{{gravatar}}.jpg">
@@ -16,7 +17,6 @@
                         {{/if}}
                     </div>
                 </div>
-                <img src="{{image}}" />
             </div>
         </div>
     </script>

pinry/templates/includes/pins.html

@@ -24,7 +24,7 @@
                     {{#if tags}}
                         <span class="dim">in</span>
                     {{#each tags}}
-                        <span class="tag">{{this}}</span>
+                        <span class="tag"><a href="/pins/tag/{{this}}/">{{this}}</a></span>
                     {{/each}}
                     {{/if}}
                 </div>