cami/sp-codes.de
1
0
Fork 0
forked from samuel-p/sp-codes.de
Code Issues Pull requests Projects Releases Wiki Activity

adoption to design of sp-magic

Browse source
This commit is contained in:
Samuel Philipp 2016-11-23 00:07:57 +01:00
parent bc6fa550f9
commit f65d081896
143 changed files with 13685 additions and 2590 deletions
Download patch file Download diff file Expand all files Collapse all files

56
bower_components/flip/demo/flip-with-swipebox/index.html vendored Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/css/swipebox.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="front">
<h2>Flip with Swipebox</h2>
<section>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-1.jpg" title="Fog">
<img src="http://swipebox.csag.co/images/image-1.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-2.jpg" title="City">
<img src="http://swipebox.csag.co/images/image-2.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-3.jpg" title="Street">
<img src="http://swipebox.csag.co/images/image-3.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-4.jpg" title="Mustache Guy">
<img src="http://swipebox.csag.co/images/image-4.jpg" alt="image">
</a>
</section>
<p>When a <a href="http://brutaldesign.github.io/swipebox/">Swipebox</a> is used on
a card animated with Flip, the Swipebox fails, as can be seen in this demo when
we use version 1.0.1 of Flip. If we apply the patch the issue is fixed.</p>
<p>Click on the thumbnails. A Swipebox <i>should</i> open.</p>
</div>
<div class="back">
<h2>Flip with Swipebox</h2>
<p>The problem is caused by Flip disabling the bubbling of click
events on any links that are contained inside the element to be flipped,
as can be seen in lines 80-82 of the
<a href="https://github.com/nnattawat/flip/blob/v1.0.1/src/flip.js">source code</a>.</p>
<p>This code was written to prevent the card from flipping when buttons and
links on the card are pressed. However, preventing event bubling is
<a href="https://css-tricks.com/dangers-stopping-event-propagation/">dangerous</a>.</p>
<p>The better solution is to ignore those events that you are not interested in.</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/js/jquery.swipebox.min.js"></script>
<script src="../../dist/jquery.flip.min.js"></script>
<script>
$(document).ready(function() {
$('.card a').swipebox();
$('.card').flip();
});
</script>
</body>
</html>

36
bower_components/flip/demo/flip-with-swipebox/style.css vendored Normal file
View file

@ -0,0 +1,36 @@
html, body, div, ul {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.card {
width: 320px;
height: 460px;
padding: 30px;
margin: 0 auto;
}
.card a.thumb {
float: left;
width: 100px;
height: 60px;
margin: 0 5px 10px 0;
}
.card a.thumb img {
max-width: 100%;
max-height: 100%;
}
.front, .back {
width: 100%;
height: 80%;
padding: 15px;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1px 6px rgba(0,0,0, 0.4);
}