mirror of
https://github.com/pinry/pinry.git
synced 2025-11-15 09:25:50 +01:00
Better design implemented that removes a lot of white space
This commit is contained in:
Isaac Bythewood
0
pinry/static/css/lightbox.css
Normal file
0
pinry/static/css/lightbox.css
Normal file
23
pinry/static/css/messages.css
Normal file
23
pinry/static/css/messages.css
Normal 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;
|
||||
}
|
||||
@@ -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
0
pinry/static/js/lightbox.css
Normal 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');
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -25,7 +25,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<a href="{{image}}" class="lightbox">
|
||||
<img src="{{thumbnail}}" />
|
||||
</a>
|
||||
{{#if description}}
|
||||
<p>{{description}}</p>
|
||||
{{/if}}
|
||||
|
||||
Reference in New Issue
Block a user