heuzef
/
pinry
mirror of https://github.com/pinry/pinry.git
1
0
Fork 0
Code Issues 0 Releases 44 Wiki Activity
Browse Source

CSS refactors to improve readability

tags/v1.0.0
Isaac Bythewood 11 years ago
parent
32b5eafe67
commit
3420608730
4 changed files with 257 additions and 253 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +44
    -44
      pinry/static/css/lightbox.css
  2. +16
    -16
      pinry/static/css/messages.css
  3. +167
    -173
      pinry/static/css/pinry.css
  4. +30
    -20
      pinry/static/js/pinry.js

+ 44
- 44
pinry/static/css/lightbox.css View File

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

+ 16
- 16
pinry/static/css/messages.css View File

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

+ 167
- 173
pinry/static/css/pinry.css View File

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

+ 30
- 20
pinry/static/js/pinry.js View File

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

Write Preview
Loading…
Cancel
Save