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

68
bower_components/flip/demo/index.html vendored Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../src/flip.js"></script>
<title>jQuery plugin</title>
<style type="text/css">
.card {
width: 600px;
height: 400px;
margin: 20px;
}
.front, .back, .other-front, .other-back {
border: 2px gray solid;
padding: 10px;
}
.front, .other-front {
background-color: #ccc;
}
.back, .other-back {
background-color: red;
}
</style>
</head>
<body>
<div id="card-1" class="card">
<div class="other-front">
Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
</div>
<div class="other-back">
<a href="http://google.com">link</a>
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
</div>
</div>
<div id="card-2" class="card">
<div class="front">
Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
</div>
<div class="back">
<a href="http://google.com">link</a>
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
<button>button</button>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#card-1").flip({
axis: "y", // y or x
reverse: false, // true and false
trigger: "hover", // click or hover
speed: '250',
front: $('.other-front'),
back: $('.other-back'),
autoSize: false
});
$("#card-2").flip({
axis: "x",
reverse: true,
trigger: "click"
});
});
</script>
</body>
</html>

157
bower_components/flip/demo/index2.html vendored Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--script src="../jquery-1.10.2.min.js"></script-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../src/flip.js"></script>
<title>jQuery plugin</title>
<style type="text/css">
body {
margin: 0 100px;
}
.card {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
}
.front, .back {
border: 2px gray solid;
padding: 10px;
}
.front {
background-color: #ccc;
}
.back {
background-color: red;
}
</style>
</head>
<body>
<div id="card-1" class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div id="card-2" class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
<script type="text/javascript">
$(function(){
$(".card").flip({
trigger: "hover"
});
});
</script>
</body>
</html>