CSS refactors to improve readability

pinry/static/css/lightbox.css

@@ -1,58 +1,58 @@
 .lightbox-background {
     background: rgba(0, 0, 0, 0.7);
-    top: 0;
+    display: none;
     left: 0;
     right: 0;
+    top: 0;
     position: absolute;
     z-index: 9001;
-    display: none;
 }
 
-    .lightbox-wrapper {
-        border: 1px solid #bbb;
-        position: absolute;
-        left: 50%;
-        border-radius: 3px;
-        -moz-border-radius: 3px;
-        -webkit-border-radius: 3px;
-        background: #eee;
-        background-image: url("../img/loader.gif");
-        background-repeat: no-repeat;
-        background-position: center center;
-        margin-bottom: 100px;
-    }
+.lightbox-wrapper {
+    background: #eee;
+    background-image: url("../img/loader.gif");
+    background-position: center center;
+    background-repeat: no-repeat;
+    border: 1px solid #bbb;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+    left: 50%;
+    margin-bottom: 100px;
+    position: absolute;
+}
 
-    .lightbox-wrapper img {
-        display: none;
-    }
+.lightbox-wrapper img {
+    display: none;
+}
 
-        .lightbox-data {
-            background: white;
-        }
+.lightbox-data {
+    background: white;
+}
 
-            .lightbox-data .description {
-                padding: 8px;
-                border-bottom: 1px solid #ddd;
-                font-family: "Georgia", "Times", "Times New Roman", Serif;
-                font-size: 16px;
-            }
+.lightbox-data .description {
+    border-bottom: 1px solid #ddd;
+    font-family: "Georgia", "Times", "Times New Roman", Serif;
+    font-size: 16px;
+    padding: 8px;
+}
 
-            .lightbox-data .avatar img {
-                display: block;
-                width: 40px;
-                height: 40px;
-                margin: 5px;
-                border-radius: 3px;
-                -moz-border-radius: 3px;
-                -webkit-border-radius: 3px;
-            }
+.lightbox-data .avatar img {
+    display: block;
+    height: 40px;
+    width: 40px;
+    margin: 5px;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+}
 
-            .lightbox-data .text {
-                margin-top: 3px;
-                font-weight: bold;
-            }
+.lightbox-data .text {
+    font-weight: bold;
+    margin-top: 3px;
+}
 
-            .lightbox-data .text .dim {
-                color: #999;
-                font-size: 14px;
-            }
+.lightbox-data .text .dim {
+    color: #999;
+    font-size: 14px;
+}

pinry/static/css/messages.css

@@ -1,23 +1,23 @@
 .messages {
     list-style-type: none;
-    top: 50px;
-    right: 10px;
     position: absolute;
+    right: 10px;
+    top: 50px;
     z-index: 200;
 }
 
-    .messages li {
-        margin: 10px 0;
-        padding: 18px 28px;
-        border: 1px solid #ccc;
-        font-size: 16px
-    }
+.messages li {
+    border: 1px solid #ccc;
+    font-size: 16px
+    margin: 10px 0;
+    padding: 18px 28px;
+}
 
-    .messages li:hover {
-        -webkit-transform: scale(1.1);
-           -moz-transform: scale(1.1);
-            -ms-transform: scale(1.1);
-             -o-transform: scale(1.1);
-                transform: scale(1.1);
-        cursor: pointer;
-    }
+.messages li:hover {
+    cursor: pointer;
+    -webkit-transform: scale(1.1);
+       -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+         -o-transform: scale(1.1);
+            transform: scale(1.1);
+}

pinry/static/css/pinry.css

@@ -1,210 +1,204 @@
+/* Start Globals */
 body {
-    margin-top: 70px;
     background: #eee;
+    margin-top: 70px;
 }
 
 a {
     cursor: pointer;
 }
+/* End Globals */
 
-#bookmarklet {
-    cursor: move;
-}
 
+/* Start Navigation */
 .navbar-fixed-top .navbar-inner {
-    background-image: none;
     background: white;
-    filter: none;
-    height: 48px;
-    box-shadow: 0 1px 0 #bbb;
-    -moz-box-shadow: 0 1px 0 #bbb;
+    background-image: none;
     -webkit-box-shadow: 0 1px 0 #bbb;
+       -moz-box-shadow: 0 1px 0 #bbb;
+            box-shadow: 0 1px 0 #bbb;
     border-bottom: 1px solid #bbb;
+    filter: none;
+    height: 48px;
+}
+
+.navbar .brand {
+    color: #275173;
+    font-family: 'Monoton', sans-serif;
+    font-size: 30px;
+    margin: 5px 0 0 -7px;
+}
+
+.navbar .nav > li > a {
+    background: #ddd;
+    -webkit-border-radius: 2px;
+       -moz-border-radius: 2px;
+            border-radius: 2px;
+    color: #333;
+    margin: 12px 7px;
+    padding: 3px 13px;
+    text-shadow: none;
+}
+
+.navbar .nav > li:last-child > a {
+    margin-right: 14px;
+}
+
+.navbar .nav > li > a:hover {
+    background: #275173;
+    color: #ddd;
+}
+
+#bookmarklet {
+    cursor: move;
 }
+/* End Navigation */
+
 
-    .navbar .brand {
-        margin-left: -7px;
-        font-family: 'Monoton';
-        color: #275173;
-        font-size: 30px;
-        margin-top: 5px;
-    }
-
-    .navbar .nav > li > a {
-        color: #333;
-        background: #ddd;
-        text-shadow: none;
-        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: #ddd;
-        background: #275173;
-    }
-
-#loader {
+/* Start Forms */
+#form {
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 15px;
+}
+
+#form h1 {
+    font-family: 'Monoton';
+    font-weight: normal;
+    margin-bottom: 15px;
     text-align: center;
-    padding: 50px;
 }
 
+form {
+    margin-bottom: 0;
+}
+
+textarea {
+    height: 70px;
+}
+
+.form-actions {
+    margin-bottom: 0;
+}
+/* End Forms */
+
+
+/* Start Pins */
 #pins {
     top: 70px;
 }
 
-    .pin {
-        background: #fff;
-        width: 240px;
-        box-shadow: 0 1px 0 #bbb;
-        -moz-box-shadow: 0 1px 0 #bbb;
-        -webkit-box-shadow: 0 1px 0 #bbb;
-        border: 1px solid #bbb;
-        position: absolute;
-        border-radius: 3px;
-        -moz-border-radius: 3px;
-        -webkit-border-radius: 3px;
-    }
-
-        .pin .editable {
-            border: 2px solid rgba(255, 255, 255, 0.4);
-            background: rgba(255, 255, 255, 0.4);
-            border-radius: 4px;
-            -moz-border-radius: 4px;
-            -webkit-border-radius: 4px;
-            position: absolute;
-            right: 23px;
-            top: 23px;
-            display: none;
-        }
-
-        .pin:hover .editable {
-            display: block;
-        }
-
-            .pin .editable .borderable {
-                padding: 5px 8px;
-                border-radius: 4px;
-                -moz-border-radius: 4px;
-                -webkit-border-radius: 4px;
-                background: rgba(0, 0, 0, 0.8);
-                cursor: pointer;
-            }
-
-        .pin img {
-            width: 240px;
-            padding: 0;
-            margin: 0;
-            cursor: -webkit-zoom-in;
-            cursor: -moz-zoom-in;
-            -webkit-border-top-left-radius: 3px;
-            -webkit-border-top-right-radius: 3px;
-            -moz-border-radius-topleft: 3px;
-            -moz-border-radius-topright: 3px;
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-        }
-
-        .pin p {
-            margin-bottom: 0;
-            padding: 8px;
-            border-bottom: 1px solid #ddd;
-            font-family: "Georgia", "Times", "Times New Roman", Serif;
-            font-size: 12px;
-        }
-
-            .pin strong {
-                color: #777;
-                font-weight: normal;
-            }
-
-        .pin-footer {
-            font-weight: bold;
-            padding: 10px;
-            color: #777;
-            font-size: 12px;
-            cursor: default;
-        }
-
-            .pin-footer .dim {
-                font-weight: normal;
-                color: #999;
-            }
-
-            .pin-footer .avatar {
-                width: 30px;
-                height: 30px;
-                background-color: #555;
-                border-radius: 3px;
-                -moz-border-radius: 3px;
-                -webkit-border-radius: 3px;
-            }
-
-                .pin-footer .avatar img {
-                    border-radius: 3px;
-                    -moz-border-radius: 3px;
-                    -webkit-border-radius: 3px;
-                }
-
-            .pin-footer .text {
-                width: 180px;
-                margin-top: -1px;
-                line-height: 16px;
-            }
-
-.pin-options {
-    display: none;
-    right: 20px;
-    position: absolute;
-    padding: 5px 7px 4px;
-    background-color: #eee;
-    border: 1px solid #ccc;
-    -webkit-box-shadow: 0 1px 3px #ccc;
-       -moz-box-shadow: 0 1px 3px #ccc;
-            box-shadow: 0 1px 3px #ccc;
+.pin {
+    background: #fff;
+    border: 1px solid #bbb;
     -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
             border-radius: 3px;
+    -webkit-box-shadow: 0 1px 0 #bbb;
+       -moz-box-shadow: 0 1px 0 #bbb;
+            box-shadow: 0 1px 0 #bbb;
+    position: absolute;
+    width: 240px;
 }
-    
-    .pin:hover .pin-options {
-        display: block;
-    }
 
-#form {
-    border: 1px solid #ccc;
-    background-color: white;
-    padding: 15px;
+.pin .editable {
+    background: rgba(255, 255, 255, 0.4);
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+    display: none;
+    position: absolute;
+    right: 7px;
+    top: 7px;
 }
 
-    #form h1 {
-        font-family: 'Monoton';
-        text-align: center;
-        font-weight: normal;
-        margin-bottom: 15px;
-    }
+.pin:hover .editable {
+    display: block;
+}
 
-    form {
-        margin-bottom: 0;
-    }
+.pin .editable .borderable {
+    background: rgba(0, 0, 0, 0.8);
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+    cursor: pointer;
+    padding: 5px 8px;
+    display: inline-block;
+}
+
+.pin img {
+    -webkit-border-top-left-radius: 3px;
+        -moz-border-radius-topleft: 3px;
+            border-top-left-radius: 3px;
+    -webkit-border-top-right-radius: 3px;
+        -moz-border-radius-topright: 3px;
+            border-top-right-radius: 3px;
+    cursor: -webkit-zoom-in;
+    cursor:    -moz-zoom-in;
+    margin: 0;
+    padding: 0;
+    width: 240px;
+}
 
-        textarea {
-            height: 70px;
-        }
+.pin p {
+    border-bottom: 1px solid #ddd;
+    font-family: 'Georgia', 'Times', 'Times New Roman', serif;
+    font-size: 12px;
+    margin-bottom: 0;
+    padding: 8px;
+}
 
-        .form-actions {
-            margin-bottom: 0;
-        }
+.pin strong {
+    color: #777;
+    font-weight: normal;
+}
+
+.pin-footer {
+    color: #777;
+    cursor: default;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 10px;
+}
+
+.pin-footer .dim {
+    color: #999;
+    font-weight: normal;
+}
+
+.pin-footer .avatar {
+    background: #555;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+    height: 30px;
+    width: 30px;
+}
+
+.pin-footer .avatar img {
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+}
+
+.pin-footer .text {
+    line-height: 16px;
+    margin-top: -1px;
+    width: 180px;
+}
 
 .spinner {
     background: url('../img/loader.gif');
-    width: 31px;
     height: 31px;
-    margin: auto;
+    margin: 0 auto;
+    width: 31px;
+}
+
+#the-end {
+    font-family: 'Georgia', 'Times', 'Times New Roman', serif;
+    font-size: 1.4em;
+    font-style: italic;
+    text-align: center;
 }
+/* End Pins */

pinry/static/js/pinry.js

@@ -1,3 +1,12 @@
+/**
+ * Pinry
+ * Descrip: Core of pinry, loads and tiles pins.
+ * Authors: Pinry Contributors
+ * Updated: Mar 3rd, 2013
+ * Require: jQuery, Pinry JavaScript Helpers
+ */
+
+
 $(window).load(function() {
     /**
      * tileLayout will simply tile/retile the block/pin container when run. This
@@ -16,46 +25,41 @@ $(window).load(function() {
 
         // 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++) {
             // 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);
-
             // Position our new pin in the shortest column
             var sCol = 0;
             for (var i=0; i < rowSize; i++) {
                 if (colHeights[sCol] > colHeights[i]) sCol = i;
             }
-
             block.css({
                 'margin-left': rowMargins[sCol],
-                'margin-top': colHeights[sCol],
-                'display': 'block'
+                'margin-top':  colHeights[sCol],
+                'display':     'block'
             });
-
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
-            // Delete pin if trash icon clicked
-            $('.icon-trash').each(function() {
-                var thisPin = $(this);
-                $(this).click(function() {
-                    $(this).off('click');
-                    var promise = deletePinData($(this).data('id'));
-                    promise.success(function() {
-                        thisPin.parent().parent().parent().remove();
-                        tileLayout();
-                    });
+        // Delete pin if trash icon clicked
+        $('.icon-trash').each(function() {
+            var thisPin = $(this);
+            $(this).click(function() {
+                $(this).off('click');
+                var promise = deletePinData($(this).data('id'));
+                promise.success(function() {
+                    thisPin.closest('.pin').remove();
+                    tileLayout();
                 });
             });
+        });
 
         $('.spinner').css('display', 'none');
         blockContainer.css('height', colHeights.sort().slice(-1)[0]);
@@ -95,6 +99,12 @@ $(window).load(function() {
 
             if (pins.meta.total_count == 0) {
                 $('.spinner').css('display', 'none');
+                if ($('.spinner').length != 0) {
+                    var theEnd = document.createElement('div');
+                    theEnd.id = 'the-end';
+                    $(theEnd).html('&mdash; End &mdash;');
+                    $('body').append(theEnd);
+                }
             }
 
             // Up our offset, it's currently defined as 30 in our settings
@@ -115,8 +125,8 @@ $(window).load(function() {
 
     // If we scroll to the bottom of the document load more pins
     $(window).scroll(function() {
-         if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
-            loadPins();
-         }
+        var windowPosition = $(window).scrollTop() + $(window).height();
+        var bottom = $(document).height() - 100;
+        if(windowPosition > bottom) loadPins();
      });
 });