Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Some responsive styles and IE fixes

Browse Source
pull/56/head
Glen Cheney 11 years ago
parent b459c672ee
commit e77c9cc4e3
10 changed files with 156 additions and 15 deletions
Show Stats Download Patch File Download Diff File

4
_includes/head.html
Unescape Escape View File

@ -2,7 +2,7 @@
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js modern" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>{{ page.title }}</title>
@ -46,7 +46,7 @@
{% endif %}
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="{{ site.url }}/js/html5shiv.js"></script>
<![endif]-->
</head>
<body class="{{ page.bodyClass }}">

4
_includes/nav.html
Unescape Escape View File

@ -18,9 +18,9 @@
</div>
<h3 class="site-nav__title">Demos</h3>
<div class="row-fluid js-demos site-nav__demos">
<div class="row-fluid m-row js-demos site-nav__demos">
{% for post in site.demos %}
<div class="span3 figure-wrap js-demo">
<div class="span3 m-span3 figure-wrap js-demo">
<a href="/{{ post.slug }}">
<figure>
<div class="keep-ratio four-three">

6
_posts/demos/2013-05-03-images.html
Unescape Escape View File

@ -12,8 +12,8 @@ prism: true
<p>You can encounter problems when shuffle item dimensions depend on images. <a href="{% post_url demos/2013-06-29-image-problems %}">Like this demo</a>. There are three good solutions to this.</p>
<ol>
<li>Set an explicit height on <code>.shuffle-item</code>s like the <a href="{% post_url demos/2013-05-01-basic %}">basic demo</a>.</li>
<li>Similar to number 1, make the height of the image container a percentage of the width. This can be seen in the nav above with the <code>div.keep-ratio</code>. Note: if you want to support IE, you'll need another element inside that <code>div.keep-ratio</code> which is positioned absolute with top/right/bottom/left all zero.</li>
<li>Get notified when images load (this page). In this case, I'm using <a href="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a></li>
<li>Similar to number 1, make the height of the image container a percentage of the width. This can be seen in the nav images above with the <code>div.keep-ratio</code>.</li>
<li>Get notified when images load (this page). In this case, I'm using <a href="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a>. Please note that imagesloaded does not support IE7.</li>
</ol>
</div>
@ -66,7 +66,7 @@ prism: true
<section>
<div class="container">
<div class="container-fluid">
<h2>Another section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

18
_scss/_buttons.scss
Unescape Escape View File

@ -20,8 +20,7 @@
.btn,
button {
display: inline-block;
padding-top: .75em;
padding-bottom: .75em;
padding: .75em .375em;
-webkit-appearance: none;
text-align: center;
color: white;
@ -32,7 +31,6 @@ button {
&:hover {
background-color: lighten($wetAsphalt, 12);
// box-shadow: 0 2px 0 0 darken($wetAsphalt, 5);
}
&.active,
@ -143,7 +141,21 @@ button {
}
@media ( max-width: 47.9375em ) {
.btn,
button {
font-size: .875em;
}
}
@media ( max-width: 30em ) {
.btn,
button {
font-size: .75em;
}
}

16
_scss/_main.scss
Unescape Escape View File

@ -56,6 +56,11 @@ ul ul {
&.collapsed .site-nav__tray {
height: 0;
// IE7 wtf
.lt-ie8 & {
display: none;
}
}
.figure-wrap,
@ -150,5 +155,16 @@ nav > a {
@media ( max-width: 47.9375em ) {
.figure-wrap:nth-child(odd) {
margin-left: 0;
}
.figure-wrap:nth-child(n + 3) {
margin-top: 1em;
}
}

41
_scss/shuffle-styles.scss
Unescape Escape View File

@ -76,4 +76,43 @@ $itemHeight: 220px;
position: absolute;
opacity: 0;
visibility: hidden;
}
}
@media ( max-width: 47.9375em ) {
.picture-item {
height: auto;
margin-top: 20px;
&.picture-item--h2 {
height: auto;
}
.picture-item__details,
.picture-item__description {
font-size: .875em;
padding: .625em;
}
.picture-item__description {
padding-right: .875em;
padding-bottom: 1.25em;
}
}
.filter > .row-fluid,
.filter > .row-fluid > div {
margin: 10px 0;
}
.m-nofloat {
float: none;
}
}

28
css/shuffle-styles.css
Unescape Escape View File

@ -59,3 +59,31 @@
opacity: 0;
visibility: hidden;
}
@media (max-width: 47.9375em) {
.picture-item {
height: auto;
margin-top: 20px;
}
.picture-item.picture-item--h2 {
height: auto;
}
.picture-item .picture-item__details,
.picture-item .picture-item__description {
font-size: .875em;
padding: .625em;
}
.picture-item .picture-item__description {
padding-right: .875em;
padding-bottom: 1.25em;
}
.filter > .row-fluid,
.filter > .row-fluid > div {
margin: 10px 0;
}
.m-nofloat {
float: none;
}
}

27
css/style.css
Unescape Escape View File

@ -1941,6 +1941,9 @@ ul ul {
.site-nav.collapsed .site-nav__tray {
height: 0;
}
.lt-ie8 .site-nav.collapsed .site-nav__tray {
display: none;
}
.site-nav .figure-wrap,
.site-nav .figure-wrap img {
-webkit-transform: translateZ(0);
@ -2013,6 +2016,15 @@ nav > a {
margin-top: 10px;
}
@media (max-width: 47.9375em) {
.figure-wrap:nth-child(odd) {
margin-left: 0;
}
.figure-wrap:nth-child(n + 3) {
margin-top: 1em;
}
}
.btn-group:before, .btn-group:after {
content: " ";
display: table;
@ -2037,8 +2049,7 @@ nav > a {
.btn,
button {
display: inline-block;
padding-top: .75em;
padding-bottom: .75em;
padding: .75em .375em;
-webkit-appearance: none;
text-align: center;
color: white;
@ -2131,6 +2142,18 @@ button:active {
opacity: 1;
}
@media (max-width: 47.9375em) {
.btn,
button {
font-size: .875em;
}
}
@media (max-width: 30em) {
.btn,
button {
font-size: .75em;
}
}
.ib {
display: inline-block;
}

4
index.html
Unescape Escape View File

@ -35,12 +35,12 @@ prism: true
<div class="filter-options btn-group">
<button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--warning" data-group="graphics">Graphic Design</button>
<button class="btn btn--warning" data-group="photography">Photography</button>
<button class="btn btn--warning" data-group="photography">Photos</button>
<button class="btn btn--warning" data-group="3d">3D Renders</button>
</div>
</div>
<div class="span3">
<div class="pull-right">
<div class="m-nofloat pull-right">
<p class="filter__label">Sort:</p>
<select class="sort-options">
<option value>Default</option>

23
js/demos/homepage.js
Unescape Escape View File

@ -6,6 +6,7 @@ var DEMO = (function( $ ) {
$sizer = $grid.find('.shuffle__sizer'),
init = function() {
listen();
setupFilters();
setupSorting();
setupSearching();
@ -92,6 +93,28 @@ var DEMO = (function( $ ) {
return text.indexOf(val) !== -1;
});
});
},
listen = function() {
var debouncedLayout = $.throttle( 100, function() {
$grid.shuffle('layout');
});
// Re layout shuffle when images load. This is only needed
// below 768 pixels because the .picture-item height is auto and therefore
// the height of the picture-item is dependent on the image
// I recommend using imagesloaded to determine when an image is loaded
// but that doesn't support IE7
$grid.find('img').each(function() {
var $img = $( this );
// Image already loaded
if ( this.complete && this.naturalWidth > 0 ) {
return;
}
$img.on('load', debouncedLayout);
});
};
return {

Write Preview
Loading…
Cancel
Save