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

Put home page demo items inside aspect boxes.

Browse Source
pull/111/head
Glen Cheney 8 years ago
parent c528fca3df
commit 6adb041ba1
19 changed files with 316 additions and 211 deletions
Show Stats Download Patch File Download Diff File

30
_config.yml
Unescape Escape View File

@ -91,20 +91,20 @@ items:
title: Baseball
img: baseball.png
original: baseball.jpg
cols: 3
cols: [ 3, 4, 3 ]
- groups: [ wallpaper, 3d ]
date: 2011-08-14
title: Tennis
img: tennis-ball.png
original: tennis-ball.jpg
description: longDescription
cols: 6
extras: [ overlay ]
cols: [3, 8, 6]
- groups: [ wallpaper, 3d ]
date: 2009-05-27
title: iMac
img: imac.png
original: imac.jpg
cols: 3
cols: [ 3, 4, 3 ]
- groups: [ graphics ]
date: 2012-05-14
title: Master Chief
@ -112,27 +112,27 @@ items:
original: Master_Chief_Portrait_by_Eightfold_Studios.jpg
description: longDescription
extras: [ h2 ]
cols: 3
cols: [ 6, 4, 3 ]
- groups: [ wallpaper, 3d ]
date: 2009-09-14
title: Eightfold
img: es-blue.png
original: es-blue.jpg
cols: 3
cols: [ 3, 4, 3 ]
- groups: [ photography ]
date: 2012-03-14
title: Pumpkin
img: pumpkin.png
original: pumpkin.jpg
description: longDescription
cols: 6
extras: [ overlay ]
cols: [3, 8, 6]
- groups: [ wallpaper, 3d ]
date: 2013-05-19
title: Vestride
img: vestride-red.png
original: vestride-red.jpg
extras: [ h2 ]
cols: 6
cols: [3, 8, 6]
- groups: [ graphics ]
date: 2013-02-01
title: Newegg
@ -140,29 +140,29 @@ items:
original: newegg.jpg
description: longDescription
extras: [ h2 ]
cols: 3
cols: [ 6, 4, 3 ]
- groups: [ wallpaper ]
date: 2000-01-01
title: Arc
img: eightfoldarc.png
original: eightfoldarc.jpg
cols: 3
cols: [ 3, 4, 3 ]
- groups: [ photography ]
date: 2012-07-04
title: Ground
img: ground.png
original: ground!.jpg
cols: 3
cols: [ 3, 4, 3 ]
- groups: [ wallpaper ]
date: 2011-08-12
title: Grass
img: grassy-hills.png
original: grassy-hills.tif
description: longDescription
cols: 6
extras: [ overlay ]
cols: [3, 8, 6]
- groups: [ wallpaper, 3d ]
date: 2013-05-19
title: Vestride
img: vestride-classy.png
original: vestride-classy.jpg
cols: 3
cols: [ 3, 4, 3 ]

13
_includes/picture-item.html
Unescape Escape View File

@ -5,15 +5,18 @@
{% else %}
{% assign extras = "" %}
{% endif %}
{% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %}
{% assign description = item.description %}
<figure class="col-{{ cols }}@sm col-3@xs picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
<div class="picture-item__inner">
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
<img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
</div>
</div>
<div class="picture-item__details clearfix">
<img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
<figcaption class="picture-item__title pull-left"><a href="{{ site.baseurl }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
<p class="picture-item__tags pull-right">{{ item.groups | join: ', ' }}</p>
<p class="picture-item__tags pull-right hidden@xs">{{ item.groups | join: ', ' }}</p>
</div>
{% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
</div>

2
_posts/2013-05-01-basic.html
Unescape Escape View File

@ -19,7 +19,7 @@ extraJS: [ "demos/homepage.js" ]
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
<div class="col-3@sm col-3@xs shuffle__sizer"></div>
<div class="col-1@sm col-1@xs shuffle__sizer"></div>
</div>
</div>

8
_posts/2013-06-29-image-problems.html
Unescape Escape View File

@ -41,12 +41,4 @@ extraJS: [ "demos/images.js"]
</div>
</div>
<section>
<div class="container">
<h2>Shuffle.js</h2>
<p>{{ site.longDescription }}</p>
</div>
</section>
{% include credit-jake.html %}

2
_posts/2013-08-25-animated.html
Unescape Escape View File

@ -27,7 +27,7 @@ extraJS: [ "viewport.js", "demos/animate-in.js" ]
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
<div class="col-3@sm col-3@xs shuffle__sizer"></div>
<div class="col-1@sm col-1@xs shuffle__sizer"></div>
</div>
</div>

5
_scss/_grid.scss
Unescape Escape View File

@ -64,6 +64,11 @@
}
}
@include breakpoint(md) {
@include make-grid(md);
}
@media screen and (min-width: $viewport-at-max-grid-width) {
.#{$grid-container} {

4
_scss/_helpers.scss
Unescape Escape View File

@ -4,6 +4,10 @@
display: inline-block;
}
@include breakpoint(sm, true) {
.hidden\@xs { display: none; }
}
// Hide from both screenreaders and browsers.
.hidden {
display: none !important;

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

@ -10,24 +10,61 @@ $itemHeight: 220px;
.picture-item {
height: 220px;
margin-top: $pictureGutter;
margin-left: 0; /* shuffle items shouldn't have a left margin*/
&.shuffle-item {
margin-left: 0; /* shuffle items shouldn't have a left margin*/
img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
}
&.picture-item--h2 {
height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */
.no-objectfit & img {
height: auto;
max-width: 100%;
}
}
// Ehh, i should really use something other than col-6@sm to target this...
&.col-6\@sm:not(.picture-item--h2) {
.picture-item--h2 {
height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */
}
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: $clouds;
}
.picture-item__blur {
display: none;
}
.picture-item__details,
.picture-item__description {
padding: 1em;
width: 100%;
}
.picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em;
}
.picture-item__tags {
margin: 0;
}
@include breakpoint(sm) {
.picture-item--overlay {
.picture-item__details {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
background-color: rgba(black, .6);
color: white;
overflow: hidden;
@ -38,60 +75,29 @@ $itemHeight: 220px;
}
}
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: $clouds;
}
img {
display: block;
width: 100%;
height: auto;
}
.picture-item__blur {
display: none;
}
.picture-item__details,
.picture-item__description {
padding: 1em;
}
.picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em;
}
.picture-item__tags {
margin: 0;
}
}
// Autoprefixer misses a parenthesis.
@supports (filter: blur(1px)) {
.picture-item.col-6\@sm:not(.picture-item--h2) {
.picture-item__blur {
position: absolute;
z-index: 1;
top: calc(50px - #{$itemHeight}); // Caption is 50px tall.
left: 0;
display: block;
filter: blur(7px);
}
.picture-item__details {
background: none;
}
.picture-item__tags,
.picture-item__title {
position: relative;
z-index: 2;
@supports (filter: blur(1px)) {
.picture-item--overlay {
.picture-item__blur {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
filter: blur(7px);
clip-path: inset(#{$itemHeight - 50px} 0 0 0);
}
.picture-item__details {
background: none;
}
.picture-item__tags,
.picture-item__title {
position: relative;
z-index: 2;
}
}
}
}

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

@ -2,60 +2,74 @@
\*=============================================*/
.picture-item {
height: 220px;
margin-top: 24px; }
.picture-item.shuffle-item {
margin-left: 0;
/* shuffle items shouldn't have a left margin*/ }
.picture-item.picture-item--h2 {
height: 464px;
/* 2x the height + 1 gutter */ }
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details {
margin-top: 24px;
margin-left: 0;
/* shuffle items shouldn't have a left margin*/ }
.picture-item img {
display: block;
width: 100%;
max-width: none;
height: 100%;
-o-object-fit: cover;
object-fit: cover; }
.no-objectfit .picture-item img {
height: auto;
max-width: 100%; }
.picture-item--h2 {
height: 464px;
/* 2x the height + 1 gutter */ }
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: #ECF0F1; }
.picture-item__blur {
display: none; }
.picture-item__details,
.picture-item__description {
padding: 1em;
width: 100%; }
.picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em; }
.picture-item__tags {
margin: 0; }
@media screen and (min-width: 768px) {
.picture-item--overlay .picture-item__details {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
background-color: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden; }
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__description {
.picture-item--overlay .picture-item__description {
display: none; }
.picture-item .picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: #ECF0F1; }
.picture-item img {
display: block;
width: 100%;
height: auto; }
.picture-item .picture-item__blur {
display: none; }
.picture-item .picture-item__details,
.picture-item .picture-item__description {
padding: 1em; }
.picture-item .picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em; }
.picture-item .picture-item__tags {
margin: 0; }
@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) {
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__blur {
position: absolute;
z-index: 1;
top: calc(50px - 220px);
left: 0;
display: block;
-webkit-filter: blur(7px);
filter: blur(7px); }
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details {
background: none; }
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__tags,
.picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__title {
position: relative;
z-index: 2; } }
@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) {
.picture-item--overlay .picture-item__blur {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
-webkit-filter: blur(7px);
filter: blur(7px);
-webkit-clip-path: inset(170px 0 0 0);
clip-path: inset(170px 0 0 0); }
.picture-item--overlay .picture-item__details {
background: none; }
.picture-item--overlay .picture-item__tags,
.picture-item--overlay .picture-item__title {
position: relative;
z-index: 2; } } }
/*
Shuffle needs either relative or absolute positioning on the container

136
css/style.css
Unescape Escape View File

@ -855,6 +855,138 @@ h3:hover > a {
.row {
max-width: 1200px; } }
@media screen and (min-width: 1024px) {
.col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md {
float: left; }
.aspect--16x9\@md {
padding-bottom: 56.25%; }
.aspect--9x16\@md {
padding-bottom: 177.77778%; }
.aspect--4x3\@md {
padding-bottom: 75%; }
.aspect--3x4\@md {
padding-bottom: 133.33333%; }
.aspect--3x2\@md {
padding-bottom: 66.66667%; }
.aspect--3x1\@md {
padding-bottom: 33.33333%; }
.aspect--2x3\@md {
padding-bottom: 150%; }
.aspect--2x1\@md {
padding-bottom: 50%; }
.aspect--1x2\@md {
padding-bottom: 200%; }
.aspect--1x1\@md {
padding-bottom: 100%; }
.aspect--none\@md {
height: auto;
padding-bottom: 0;
overflow: visible; }
.aspect--none\@md > .aspect__inner {
position: static; }
.col-1\@md {
width: 8.33333%; }
.col-2\@md {
width: 16.66667%; }
.col-3\@md {
width: 25%; }
.col-4\@md {
width: 33.33333%; }
.col-5\@md {
width: 41.66667%; }
.col-6\@md {
width: 50%; }
.col-7\@md {
width: 58.33333%; }
.col-8\@md {
width: 66.66667%; }
.col-9\@md {
width: 75%; }
.col-10\@md {
width: 83.33333%; }
.col-11\@md {
width: 91.66667%; }
.col-12\@md {
width: 100%; }
.col-pull-0\@md {
right: auto; }
.col-pull-1\@md {
right: 8.33333%; }
.col-pull-2\@md {
right: 16.66667%; }
.col-pull-3\@md {
right: 25%; }
.col-pull-4\@md {
right: 33.33333%; }
.col-pull-5\@md {
right: 41.66667%; }
.col-pull-6\@md {
right: 50%; }
.col-pull-7\@md {
right: 58.33333%; }
.col-pull-8\@md {
right: 66.66667%; }
.col-pull-9\@md {
right: 75%; }
.col-pull-10\@md {
right: 83.33333%; }
.col-pull-11\@md {
right: 91.66667%; }
.col-pull-12\@md {
right: 100%; }
.col-push-0\@md {
left: auto; }
.col-push-1\@md {
left: 8.33333%; }
.col-push-2\@md {
left: 16.66667%; }
.col-push-3\@md {
left: 25%; }
.col-push-4\@md {
left: 33.33333%; }
.col-push-5\@md {
left: 41.66667%; }
.col-push-6\@md {
left: 50%; }
.col-push-7\@md {
left: 58.33333%; }
.col-push-8\@md {
left: 66.66667%; }
.col-push-9\@md {
left: 75%; }
.col-push-10\@md {
left: 83.33333%; }
.col-push-11\@md {
left: 91.66667%; }
.col-push-12\@md {
left: 100%; }
.col-offset-0\@md {
margin-left: 0%; }
.col-offset-1\@md {
margin-left: 8.33333%; }
.col-offset-2\@md {
margin-left: 16.66667%; }
.col-offset-3\@md {
margin-left: 25%; }
.col-offset-4\@md {
margin-left: 33.33333%; }
.col-offset-5\@md {
margin-left: 41.66667%; }
.col-offset-6\@md {
margin-left: 50%; }
.col-offset-7\@md {
margin-left: 58.33333%; }
.col-offset-8\@md {
margin-left: 66.66667%; }
.col-offset-9\@md {
margin-left: 75%; }
.col-offset-10\@md {
margin-left: 83.33333%; }
.col-offset-11\@md {
margin-left: 91.66667%; }
.col-offset-12\@md {
margin-left: 100%; } }
.code-block {
position: relative;
overflow: visible;
@ -1178,6 +1310,10 @@ button {
.ib {
display: inline-block; }
@media screen and (max-width: 767px) {
.hidden\@xs {
display: none; } }
.hidden {
display: none !important;
visibility: hidden; }

8
dist/shuffle.js vendored
Unescape Escape View File

@ -1831,13 +1831,7 @@ return /******/ (function(modules) { // webpackBootstrap
});
exports.default = getNumber;
function getNumber(value) {
var str = value && value.toString();
var val = parseFloat(str);
if (val + 1 >= 0) {
return val;
}
return 0;
return parseFloat(value) || 0;
}
/***/ },

2
dist/shuffle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
index.html
Unescape Escape View File

@ -75,7 +75,7 @@ prism: true
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
<div class="col-3@sm col-3@xs shuffle__sizer"></div>
<div class="col-1@sm col-1@xs shuffle__sizer"></div>
</div>
</div>
</section>

18
js/demos/animate-in.js
Unescape Escape View File

@ -53,24 +53,6 @@ Demo.prototype.addTransitionToItems = function () {
}
};
/**
* 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 by
* desandro to determine when all your images have loaded.
*/
Demo.prototype.listenForImageLoads = function () {
var imgs = this.element.querySelectorAll('img');
var handler = function () {
this.shuffle.update();
Viewport.refresh();
}.bind(this);
for (var i = imgs.length - 1; i >= 0; i--) {
imgs[i].addEventListener('load', handler, false);
}
};
document.addEventListener('DOMContentLoaded', function () {
window.demo = new Demo();
});

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

@ -18,7 +18,6 @@ var Demo = function (element) {
this.addFilterButtons();
this.addSorting();
this.addSearchFilter();
this.listenForImageLoads();
this.mode = 'exclusive';
};
@ -179,23 +178,6 @@ Demo.prototype._handleSearchKeyup = function (evt) {
});
};
/**
* 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 by
* desandro to determine when all your images have loaded.
*/
Demo.prototype.listenForImageLoads = function () {
var imgs = this.element.querySelectorAll('img');
var handler = function () {
this.shuffle.update();
}.bind(this);
for (var i = imgs.length - 1; i >= 0; i--) {
imgs[i].addEventListener('load', handler, false);
}
};
document.addEventListener('DOMContentLoaded', function () {
window.demo = new Demo(document.getElementById('grid'));
});

22
js/demos/images-broken.js
Unescape Escape View File

@ -1,22 +0,0 @@
var ImageDemo = (function( $ ) {
var $shuffle = $('.shuffle--images'),
sizer = document.getElementById('js-sizer'),
init = function() {
$shuffle.shuffle({
sizer: sizer,
itemSelector: '.js-item'
});
};
return {
init: init
};
}( jQuery ));
$(document).ready(function() {
ImageDemo.init();
});

12
js/page.js
Unescape Escape View File

@ -85,6 +85,18 @@ Modules.NavTray = (function () {
return NavTray;
}());
Modules.Support = (function () {
var objectFit = document.createElement('div').style.objectFit === '';
if (!objectFit) {
document.documentElement.classList.add('no-objectfit');
}
return {
objectFit: objectFit,
};
});
Modules.Sprite = (function () {
var Sprite = function (context, img, size) {
this.ctx = context;

3
package.json
Unescape Escape View File

@ -17,6 +17,9 @@
],
"main": "dist/shuffle.js",
"scripts": {
"compile": "gulp scripts",
"css": "gulp css",
"watch": "gulp watch",
"test": "jest"
},
"jest": {

8
src/get-number.js
Unescape Escape View File

@ -6,11 +6,5 @@
* @return {number} `value` or zero if `value` isn't numeric.
*/
export default function getNumber(value) {
let str = value && value.toString();
let val = parseFloat(str);
if (val + 1 >= 0) {
return val;
}
return 0;
return parseFloat(value) || 0;
}

Write Preview
Loading…
Cancel
Save