Skip to content

Instantly share code, notes, and snippets.

@chimmelb
Last active March 11, 2016 22:29
Show Gist options
  • Save chimmelb/e991d5e9426b9b19c0d2 to your computer and use it in GitHub Desktop.
Save chimmelb/e991d5e9426b9b19c0d2 to your computer and use it in GitHub Desktop.
<template is="dom-repeat" items="{{data}}">
<game-card style$="{{calcMargin(reverse, index, cardWidth)}}" class="card-in-stack" rank="{{item}}" card-width="[[cardWidth]]" card-height="[[cardHeight]]">
</game-card>
</template>
<style include="shared-styles">
.card-in-stack {
position: absolute;
}
</style>
calcMargin: function(reverse, index, cardWidth) {
//console.log('Calculating the margin for reverse ' + reverse + ' index ' + index + ' width ' + cardWidth);
//Margin is 1/4 of a card width for every index, based on fan direction
var margin = 'margin-' + (reverse ? 'right' : 'left') + ': ' + Math.floor(index * (cardWidth / 4)) + 'px;';
//z-index is based on index, so stack is correct
var zidx = 'z-index: ' + (index + 2) + ';';
//position for absolute edge of card, based on fan direction
var position = (reverse ? 'right' : 'left') + ': 0;';
return margin + zidx + position;
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment