From 3f38458bd82d3f10cd5186b3621ac30add27b748 Mon Sep 17 00:00:00 2001 From: Isaac Bythewood Date: Thu, 21 Feb 2013 06:26:06 +0000 Subject: [PATCH] Removing unused vendor libs, custom tiling works, new design started --- pinry/api/api.py | 4 +- pinry/core/static/core/css/pinry.css | 25 +- pinry/core/static/core/js/pinry.js | 92 +- pinry/core/templates/core/base.html | 39 +- pinry/pins/templates/pins/recent_pins.html | 28 +- .../static/vendor/handlebars/1.0.0/handlebars.js | 2201 +++++ .../vendor/static/vendor/handlebars/handlebars.js | 2201 ----- .../imagesloaded/2.0.1/jquery.imagesloaded.js | 112 - .../imagesloaded/2.0.1/jquery.imagesloaded.min.js | 2 - pinry/vendor/static/vendor/jquery/1.7.2/jquery.js | 9404 -------------------- .../static/vendor/jquery/1.7.2/jquery.min.js | 4 - pinry/vendor/static/vendor/js-url/1.7.2/js-url.js | 78 - .../static/vendor/js-url/1.7.2/js-url.min.js | 1 - .../static/vendor/wookmark/0.5/jquery.wookmark.js | 169 - .../vendor/wookmark/0.5/jquery.wookmark.min.js | 11 - 15 files changed, 2315 insertions(+), 12056 deletions(-) create mode 100644 pinry/vendor/static/vendor/handlebars/1.0.0/handlebars.js delete mode 100644 pinry/vendor/static/vendor/handlebars/handlebars.js delete mode 100644 pinry/vendor/static/vendor/imagesloaded/2.0.1/jquery.imagesloaded.js delete mode 100644 pinry/vendor/static/vendor/imagesloaded/2.0.1/jquery.imagesloaded.min.js delete mode 100644 pinry/vendor/static/vendor/jquery/1.7.2/jquery.js delete mode 100644 pinry/vendor/static/vendor/jquery/1.7.2/jquery.min.js delete mode 100644 pinry/vendor/static/vendor/js-url/1.7.2/js-url.js delete mode 100644 pinry/vendor/static/vendor/js-url/1.7.2/js-url.min.js delete mode 100644 pinry/vendor/static/vendor/wookmark/0.5/jquery.wookmark.js delete mode 100644 pinry/vendor/static/vendor/wookmark/0.5/jquery.wookmark.min.js diff --git a/pinry/api/api.py b/pinry/api/api.py index ba2bab1..04ad3e0 100644 --- a/pinry/api/api.py +++ b/pinry/api/api.py @@ -1,5 +1,6 @@ from tastypie.resources import ModelResource from tastypie import fields +from tastypie.authorization import DjangoAuthorization from django.contrib.auth.models import User @@ -15,7 +16,7 @@ class UserResource(ModelResource): include_resource_uri = False -class PinResource(ModelResource): # pylint: disable-msg=R0904 +class PinResource(ModelResource): tags = fields.ListField() submitter = fields.ForeignKey(UserResource, 'submitter', full=True) @@ -27,6 +28,7 @@ class PinResource(ModelResource): # pylint: disable-msg=R0904 'published': ['gt'], 'submitter': ['exact'] } + authorization = DjangoAuthorization() def build_filters(self, filters=None): if filters is None: diff --git a/pinry/core/static/core/css/pinry.css b/pinry/core/static/core/css/pinry.css index bd36399..609981b 100644 --- a/pinry/core/static/core/css/pinry.css +++ b/pinry/core/static/core/css/pinry.css @@ -1,33 +1,40 @@ body { margin-top: 70px; - background: url("/static/core/img/background.png"); + background: #eee; } .navbar-inner { background-image: none; - background: white; + background: #222; filter: none; - border-bottom: 1px solid #999; height: 48px; } .navbar .brand { margin-left: 0; - color: #333; + color: #fff; font-family: 'Monoton'; font-size: 30px; } .navbar .nav > li > a { color: #333; + background: #ddd; text-shadow: none; - border-left: 1px solid #ccc; - padding: 14px 20px 15px; + padding: 3px 13px; + margin: 12px 7px; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + } + + .navbar .nav > li:last-child > a { + margin-right: 14px; } .navbar .nav > li > a:hover { - color: #333; - text-decoration: underline; + color: #ddd; + background: #275173; } .messages { @@ -75,7 +82,7 @@ body { .pin { background: #fff; width: 200px; - border: 1px solid #ccc; + box-shadow: 0 1px 3px #bbb; padding: 20px; position: absolute; } diff --git a/pinry/core/static/core/js/pinry.js b/pinry/core/static/core/js/pinry.js index d529497..4e7187c 100644 --- a/pinry/core/static/core/js/pinry.js +++ b/pinry/core/static/core/js/pinry.js @@ -1,82 +1,102 @@ $(window).load(function() { + + /** + * tileLayout will simply tile/retile the block/pin container when run. This + * was put into a function in order to adjust frequently on screen size + * changes. + */ function tileLayout() { - // Config + // Defines our containers + var blockContainer = $('#pins'); + var blocks = blockContainer.children('.pin'); + + // Size of blocks/pins and the spacing between them var blockMargin = 20; var blockWidth = 240; - // End Config - var blockContainer = $('#pins'); - var blocks = blockContainer.children('.pin'); - var rowSize = Math.floor(blockContainer.width()/blockWidth); - var blockWidth = (blockContainer.width()-blockMargin*(rowSize))/rowSize; - var colHeights = [] + // How many items we can fit in a row and our array for the row heights + var rowSize = Math.floor(blockContainer.width()/(blockWidth+blockMargin)); + var colHeights = []; + + // These are used for horizontal positioning + var rowMargins = []; + var marginLeft = 0; + // Fill our colHeights array with 0 for each row we have + for (var i=0; i < rowSize; i++) colHeights[i] = 0; + + // Fill out our rowMargins which will be static after this for (var i=0; i < rowSize; i++) { - colHeights[i] = 0; + // Our first item has a special margin to keep things centered + if (i == 0) rowMargins[0] = (blockContainer.width()-rowSize*(blockWidth+blockMargin))/2; + else rowMargins[i] = rowMargins[i-1]+(blockWidth+blockMargin); } + // Loop through every block for (var b=0; b < blocks.length; b++) { + // Get the jQuery object of the current block block = blocks.eq(b); - var col = -1; - var colHeight = 0; + // Position our new pin in the shortest column + var sCol = 0; for (var i=0; i < rowSize; i++) { - if (col < 0) { - col = 0; - colHeight = colHeights[col]; - } else { - if (colHeight > colHeights[i]) { - col = i; - colHeight = colHeights[col]; - } - } + if (colHeights[sCol] > colHeights[i]) sCol = i; } block.css({ - 'margin-left': blockWidth*col+col*blockMargin + 'margin-left': rowMargins[sCol], + 'margin-top': colHeights[sCol], + 'display': 'block' }); - blockMarginTop = blockMargin; - block.css({ - 'margin-top': colHeight+blockMarginTop - }); - colHeights[col] += block.height()+blockMarginTop; - - block.css('display', 'block'); + colHeights[sCol] += block.height()+(blockMargin*3); } $('.spinner').css('display', 'none'); blockContainer.css('height', colHeights.sort().slice(-1)[0]); } - var offset = 0; + /** + * Load our pins using the pins template into our UI, be sure to define a + * offset outside the function to keep a running tally of your location. + */ function loadPins() { + // Show our loading symbol $('.spinner').css('display', 'block'); + + // Fetch our pins from the api using our current offset $.get('/api/v1/pin/?format=json&offset='+String(offset), function(pins) { - console.log(pins.objects[0]) - var source = $('#pins-template').html(); - var template = Handlebars.compile(source); - var context = { - pins: pins.objects - } - var html = template(context); + // Use the fetched pins as our context for our pins template + var template = Handlebars.compile($('#pins-template').html()); + var html = template({pins: pins.objects}); + + // Append the newly compiled data to our container $('#pins').append(html); + // We need to then wait for images to load in and then tile $('#pins').ajaxStop(function() { - tileLayout(); + $('img').load(function() { + tileLayout(); + }); }); + // Up our offset, it's currently defined as 30 in our settings offset += 30; }); } + + // Set offset for loadPins and do our initial load + var offset = 0; loadPins(); + // If our window gets resized keep the tiles looking clean and in our window $(window).resize(function() { tileLayout(); }) + // If we scroll to the bottom of the document load more pins $(window).scroll(function() { if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { loadPins(); diff --git a/pinry/core/templates/core/base.html b/pinry/core/templates/core/base.html index a087896..648500f 100644 --- a/pinry/core/templates/core/base.html +++ b/pinry/core/templates/core/base.html @@ -1,12 +1,13 @@ +{% spaceless %} {% load new_pin %} {% load compress %} -{% load verbatim %} {{ site_name }} - {% block title %}{% endblock %} + {% compress css %} @@ -14,7 +15,6 @@ {% endcompress %} -
@@ -47,38 +47,23 @@ {% new_pin request %} - {% verbatim %} - - {% endverbatim %} + {% endcompress %} + {% compress js %} - - - - + {% endcompress %} +{% endspaceless %} diff --git a/pinry/pins/templates/pins/recent_pins.html b/pinry/pins/templates/pins/recent_pins.html index 7315482..6000f22 100644 --- a/pinry/pins/templates/pins/recent_pins.html +++ b/pinry/pins/templates/pins/recent_pins.html @@ -1,4 +1,5 @@ {% extends 'core/base.html' %} +{% load verbatim %} {% block title %}Recent Pins{% endblock %} @@ -6,9 +7,34 @@