mirror of
https://github.com/pinry/pinry.git
synced 2026-07-07 01:19:47 +02:00
CSS refactors to improve readability
This commit is contained in:
Isaac Bythewood
@@ -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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-data {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.lightbox-wrapper img {
|
||||
display: none;
|
||||
}
|
||||
.lightbox-data .description {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-family: "Georgia", "Times", "Times New Roman", Serif;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.lightbox-data {
|
||||
background: white;
|
||||
}
|
||||
.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 .description {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-family: "Georgia", "Times", "Times New Roman", Serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
.lightbox-data .text {
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.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 .text {
|
||||
margin-top: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lightbox-data .text .dim {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.lightbox-data .text .dim {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -1,210 +1,204 @@
|
||||
/* Start Globals */
|
||||
body {
|
||||
margin-top: 70px;
|
||||
background: #eee;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* End Globals */
|
||||
|
||||
|
||||
/* Start Navigation */
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
background: white;
|
||||
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-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;
|
||||
-webkit-box-shadow: 0 1px 0 #bbb;
|
||||
border-bottom: 1px solid #bbb;
|
||||
|
||||
/* Start Forms */
|
||||
#form {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
#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;
|
||||
.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;
|
||||
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;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.pin:hover .editable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.pin p {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.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:hover .pin-options {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#form {
|
||||
border: 1px solid #ccc;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
.pin-footer .text {
|
||||
line-height: 16px;
|
||||
margin-top: -1px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
#form h1 {
|
||||
font-family: 'Monoton';
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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 */
|
||||
|
||||
@@ -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('— End —');
|
||||
$('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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user