A card stack UI with swipeable cards.
Forked from Ionic's Pen Swipeable Cards 1.0.0-beta.6.
Forked from elia bruni's Pen Swipeable Cards 1.0.0-beta.6.
A Pen by Captain Anonymous on CodePen.
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
<title>Ionic Template</title> | |
<link href="http://code.ionicframework.com/1.0.0-beta.8/css/ionic.css" rel="stylesheet"> | |
<script src="http://code.ionicframework.com/1.0.0-beta.8/js/ionic.bundle.js"> | |
</script> | |
<script src="http://clic.cimec.unitn.it/~elia.bruni/tank/ionic.cards.js"></script> | |
</head> | |
<body ng-app="starter" animation="slide-left-right-ios7" no-scroll> | |
<pane ng-controller="CardsCtrl" class="pane"> | |
<header-bar type="bar-transparent" title="'Help out'"></header-bar> | |
<p style="color:white">Accepted: {{accepted}}, Rejected: {{rejected}}</p> | |
<swipe-cards> | |
<swipe-card on-swipe="cardSwiped()" id="start-card"> | |
Swipe down for a new card | |
</swipe-card> | |
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)"> | |
<div ng-controller="CardCtrl"> | |
<div class="title"> | |
{{card.title}} | |
</div> | |
<div class="image"> | |
<img ng-src="{{card.image}}"> | |
</div> | |
<div class="button-bar"> | |
<button class="button button-clear button-positive" ng-click="reject()">No</button> | |
<button class="button button-clear button-positive" ng-click="accept()">Yes</button> | |
</div> | |
</div> | |
</swipe-card> | |
</swipe-cards> | |
</pane> | |
</body> | |
</html> |
angular.module('starter', ['ionic', 'ionic.contrib.ui.cards']) | |
.directive('noScroll', function($document) { | |
return { | |
restrict: 'A', | |
link: function($scope, $element, $attr) { | |
$document.on('touchmove', function(e) { | |
e.preventDefault(); | |
}); | |
} | |
} | |
}) | |
.controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) { | |
$rootScope.accepted = 0; | |
$rootScope.rejected = 0; | |
var cardTypes = [ | |
{ title: 'Swipe down to clear the card', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic.png' }, | |
{ title: 'Where is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic.png' }, | |
{ title: 'What kind of grass is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic2.png' }, | |
{ title: 'What beach is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic3.png' }, | |
{ title: 'What kind of clouds are these?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic4.png' } | |
]; | |
$scope.cards = Array.prototype.slice.call(cardTypes, 0, 0); | |
$scope.cardSwiped = function(index) { | |
$scope.addCard(); | |
}; | |
$scope.cardDestroyed = function(index) { | |
if (this.swipeCard.positive === true) { | |
$scope.$root.accepted++; | |
} else { | |
$scope.$root.rejected++; | |
} | |
$scope.cards.splice(index, 1); | |
}; | |
$scope.addCard = function() { | |
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)]; | |
newCard.id = Math.random(); | |
$scope.cards.push(angular.extend({}, newCard)); | |
} | |
}) | |
.controller('CardCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) { | |
$scope.accept = function () { | |
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope); | |
$rootScope.accepted++; | |
card.swipe(true); | |
} | |
$scope.reject = function() { | |
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope); | |
$rootScope.rejected++; | |
card.swipe(); | |
}; | |
}); | |
body { | |
cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
} | |
/* Your app's CSS, go crazy, make it your own */ | |
.ionic-logo { | |
display: block; | |
margin: 15px auto; | |
width: 96px; | |
height: 96px; | |
} | |
.pane { | |
background-color: #333 !important | |
} | |
.bar.bar-transparent { | |
background-color: transparent; | |
background-image: none; | |
border: none; | |
} | |
.bar .title { | |
color: #eee; | |
} | |
.swipe-cards { | |
position: fixed; | |
} | |
.swipe-card { | |
-webkit-perspective: 1000; | |
-webkit-backface-visibility: hidden; | |
display: none; | |
position: fixed; | |
-webkit-transform: scale(1,1); | |
left: 50%; | |
top: 50%; | |
width: 300px; | |
height: 300px; | |
margin-left: -150px; | |
margin-top: -150px; | |
box-sizing: border-box; | |
background-color: rgb(255,255,255); | |
border-radius: 4px; | |
overflow: hidden; | |
-webkit-animation-fill-mode: forwards; | |
} | |
.swipe-card .title { | |
height: 40px; | |
padding: 5px; | |
line-height: 30px; | |
color: #444; | |
} | |
.swipe-card .image { | |
overflow: hidden; | |
max-height: 210px; | |
} | |
.swipe-card .button { | |
border: none; | |
} | |
.swipe-card .image img { | |
width: 100%; | |
border-radius: 0px 0px 4px 4px; | |
} | |
#start-card { | |
color: #fff; | |
background-color: #30BD8A; | |
line-height: 300px; | |
word-wrap: break-word; | |
border: 6px solid #4CD68E; | |
text-align: center; | |
} | |
#start-card span { | |
display: inline-block; | |
line-height: 40px; | |
width: 200px; | |
font-size: 30px; | |
vertical-align: middle; | |
} | |
#footer .button { | |
color: #fff; | |
} | |
@-webkit-keyframes bounceIn { | |
0% { | |
-webkit-transform: scale(0,0); | |
} | |
70% { | |
-webkit-transform: scale(1.2,1.2); | |
} | |
100% { | |
-webkit-transform: scale(1,1); | |
} | |
} | |
.swipe-card.pop-in-start { | |
-webkit-transform: scale(0,0); | |
} | |
.swipe-card.pop-in { | |
-webkit-animation: bounceIn 0.3s ease-out; | |
} |
A card stack UI with swipeable cards.
Forked from Ionic's Pen Swipeable Cards 1.0.0-beta.6.
Forked from elia bruni's Pen Swipeable Cards 1.0.0-beta.6.
A Pen by Captain Anonymous on CodePen.