Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2025-11-15 17:35:50 +01:00
Code Issues Packages Projects Releases Activity

Better design implemented that removes a lot of white space

Browse Source
This commit is contained in:
Isaac Bythewood
2013-02-23 03:42:47 +00:00
parent a7d571a509
commit 5a74253bf8
7 changed files with 78 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
pinry/static/css/lightbox.css Normal file
View File

23
pinry/static/css/messages.css Normal file
View File

@@ -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;
}

83
pinry/static/css/pinry.css
View File

@@ -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;
color: #fff;
margin-left: -7px;
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;
box-shadow: 0 1px 3px #bbb;
-moz-box-shadow: 0 1px 3px #bbb;
-webkit-box-shadow: 0 1px 3px #bbb;
padding: 15px;
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 {
@@ -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: 15px;
margin-top: 15px;
padding: 10px;
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;
margin-top: -3px;
width: 180px;
margin-top: -1px;
line-height: 16px;
}
.pin-options {
margin: 5px;
display: none;
right: 20px;
position: absolute;

0
pinry/static/js/lightbox.css Normal file
View File

25
pinry/static/js/pinry.js
View File

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

3
pinry/templates/core/base.html
View File

@@ -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>

4
pinry/templates/pins/recent_pins.html
View File

@@ -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}}