Better design implemented that removes a lot of white space

pinry/static/css/messages.css

@@ -0,0 +1,23 @@
+.messages {
+    list-style-type: none;
+    top: 50px;
+    right: 10px;
+    position: absolute;
+    z-index: 200;
+}
+
+    .messages li {
+        margin: 10px 0;
+        padding: 18px 28px;
+        border: 1px solid #ccc;
+        font-size: 16px
+    }
+
+    .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;
+    }

pinry/static/css/pinry.css

@@ -3,18 +3,23 @@ body {
     background: #eee;
 }
 
-.navbar-inner {
+.navbar-fixed-top .navbar-inner {
     background-image: none;
-    background: #222;
+    background: white;
     filter: none;
     height: 48px;
+    box-shadow: 0 1px 0 #bbb;
+    -moz-box-shadow: 0 1px 0 #bbb;
+    -webkit-box-shadow: 0 1px 0 #bbb;
+    border-bottom: 1px solid #bbb;
 }
 
     .navbar .brand {
-        margin-left: 0;
+        margin-left: -7px;
-        color: #fff;
         font-family: 'Monoton';
+        color: #275173;
         font-size: 30px;
+        margin-top: 5px;
     }
 
     .navbar .nav > li > a {
@@ -37,33 +42,9 @@ body {
         background: #275173;
     }
 
-.messages {
-    list-style-type: none;
-    top: 50px;
-    right: 10px;
-    position: absolute;
-    z-index: 200;
-}
-
-    .messages li {
-        margin: 10px 0;
-        padding: 18px 28px;
-        border: 1px solid #ccc;
-        font-size: 16px
-    }
-
-    .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;
-    }
-
 #loader {
-    margin-top: 70px;
     text-align: center;
+    padding: 50px;
 }
 
 #pins {
@@ -72,12 +53,15 @@ body {
 
     .pin {
         background: #fff;
-        width: 200px;
+        width: 240px;
-        box-shadow: 0 1px 3px #bbb;
+        box-shadow: 0 1px 0 #bbb;
-        -moz-box-shadow: 0 1px 3px #bbb;
+        -moz-box-shadow: 0 1px 0 #bbb;
-        -webkit-box-shadow: 0 1px 3px #bbb;
+        -webkit-box-shadow: 0 1px 0 #bbb;
-        padding: 15px;
+        border: 1px solid #bbb;
         position: absolute;
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
     }
 
         .pin .editable {
@@ -106,16 +90,23 @@ body {
             }
 
         .pin img {
-            width: 200px;
+            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-top: 15px
+            padding-top: 15px;
+            padding-bottom: 15px;
         }
 
             .pin strong {
@@ -124,11 +115,8 @@ body {
             }
 
         .pin-footer {
-            background-color: #eee;
             font-weight: bold;
-            margin: 0 -15px -15px -15px;
+            padding: 10px;
-            padding: 15px;
-            margin-top: 15px;
             color: #777;
             font-size: 12px;
             cursor: default;
@@ -143,15 +131,24 @@ body {
                 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: 155px;
+                width: 180px;
-                margin-top: -3px;
+                margin-top: -1px;
+                line-height: 16px;
             }
 
 .pin-options {
-    margin: 5px;
     display: none;
     right: 20px;
     position: absolute;

pinry/static/js/pinry.js

@@ -6,21 +6,14 @@ $(window).load(function() {
      * changes.
      */
     function tileLayout() {
-        // Defines our containers
+        var blockContainer = $('#pins'),
-        var blockContainer = $('#pins');
+            blocks = blockContainer.children('.pin'),
-        var blocks = blockContainer.children('.pin');
+            blockMargin = 15,
-
+            blockWidth = 240,
-        // Size of blocks/pins and the spacing between them
+            rowSize = Math.floor(blockContainer.width()/(blockWidth+blockMargin)),
-        var blockMargin = 15;
+            colHeights = [],
-        var blockWidth = 240;
+            rowMargins = [],
-
+            marginLeft = 0;
-        // 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;
@@ -49,7 +42,7 @@ $(window).load(function() {
                 'display': 'block'
             });
 
-            colHeights[sCol] += block.height()+(blockMargin*3);
+            colHeights[sCol] += block.height()+(blockMargin);
         }
 
         $('.spinner').css('display', 'none');

pinry/templates/core/base.html

@@ -10,6 +10,8 @@
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
         {% compress css %}
             <link rel="stylesheet" href="{{ STATIC_URL }}css/pinry.css">
+            <link rel="stylesheet" href="{{ STATIC_URL }}css/messages.css">
+            <link rel="stylesheet" href="{{ STATIC_URL }}css/lightbox.css">
         {% endcompress %}
     </head>
     <body>
@@ -58,6 +60,7 @@
         {% compress js %}
             <script src="{{ STATIC_URL }}js/pinry.js"></script>
             <script src="{{ STATIC_URL }}js/messages.js"></script>
+            <script src="{{ STATIC_URL }}js/lightbox.js"></script>
         {% endcompress %}
     </body>
 </html>

pinry/templates/pins/recent_pins.html

@@ -25,7 +25,9 @@
                         </div>
                     </div>
                 {{/if}}
-                <img src="{{thumbnail}}" />
+                <a href="{{image}}" class="lightbox">
+                    <img src="{{thumbnail}}" />
+                </a>
                 {{#if description}}
                     <p>{{description}}</p>
                 {{/if}}