Skip to content

Commit 273c534

Browse files
author
daniel-lundin
committed
Make cards demo responsive
1 parent 6864695 commit 273c534

File tree

4 files changed

+899
-23
lines changed

4 files changed

+899
-23
lines changed

‎docs/cards.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,45 @@
66
<title>snabbt.js</title>
77
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
88

9+
<meta name="viewport" content="width=device-width, initial-scale=1">
910
<script type="text/javascript" src="randomColor.js"></script>
1011

1112
<link rel="stylesheet" href="css/normalize.css">
1213
<link rel="stylesheet" href="css/skeleton.css">
1314

1415
<style>
16+
body, html {
17+
height: 100%;
18+
}
19+
body {
20+
transform: translateZ(1000px);
21+
-webkit-transform: translateZ(1000px);
22+
}
1523
#container {
1624
width: 800px;
1725
height: 600px;
26+
width: 100%;
27+
height: 80%;
1828
margin: auto;
1929
perspective: 2000px;
2030
-webkit-perspective: 2000px;
31+
transform-style: preserve-3d;
32+
-webkit-transform-style: preserve-3d;
33+
-webkit-backface-visibility: hidden;
2134
}
2235
#surface {
2336
width: 800px;
2437
height: 600px;
38+
width: 100%;
39+
height: 80%;
2540
transform-style: preserve-3d;
2641
-webkit-transform-style: preserve-3d;
2742
}
2843
.card {
2944
position: absolute;
30-
border-radius: 10px;
45+
border-radius: 10%;
46+
height: 20%;
47+
width: 5%;
3148
}
3249
#toolbar {
3350
text-align: center;
@@ -53,6 +70,7 @@
5370
<p>DOM elements animated with <a href="index.html">snabbt.js</a>.</p>
5471
</div>
5572

73+
<script src="fastclick.js"></script>
5674
<script src="snabbt.min.js"></script>
5775
<script src="cards.js"></script>
5876
</body>

‎docs/cards.js

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/**
2-
* House of cards
3-
*/
41

2+
// Constants
53
var CARD_HEIGHT = 100;
64
var CARD_WIDTH = 60;
75
var CARD_COUNT = 40;
@@ -12,15 +10,33 @@ var BOTTOM = 400;
1210

1311
var TILT = Math.PI/8;
1412
var PYTH_ANGLE = Math.PI/2 - TILT;
13+
1514
var TILTED_CARD_HEIGHT = Math.sin(PYTH_ANGLE) * CARD_HEIGHT + 2;
1615
var TILTED_CARD_WIDTH = Math.cos(PYTH_ANGLE) * CARD_HEIGHT;
1716
var PYRAMID_WIDTH = TILTED_CARD_WIDTH * 2 + 4;
1817

18+
function update_sizes() {
19+
var c = document.getElementById('container');
20+
WIDTH = c.clientWidth;
21+
HEIGHT = c.clientHeight;
22+
CARD_WIDTH = WIDTH * 0.05;
23+
CARD_HEIGHT = HEIGHT * 0.15;
24+
TILTED_CARD_HEIGHT = Math.sin(PYTH_ANGLE) * CARD_HEIGHT + 2;
25+
TILTED_CARD_WIDTH = Math.cos(PYTH_ANGLE) * CARD_HEIGHT;
26+
PYRAMID_WIDTH = TILTED_CARD_WIDTH * 2 + 4;
27+
for(var i=0;i<Deck.cards.length;++i) {
28+
Deck.card_at(i).style.height = CARD_HEIGHT + 'px';
29+
Deck.card_at(i).style.width = CARD_WIDTH + 'px';
30+
}
31+
}
32+
1933
var COLORS = randomColor({
2034
count: 40,
2135
luminosity: 'dark',
2236
});
2337

38+
39+
// Formations
2440
var PILE = 1;
2541
var HOUSE = 2;
2642
var WALL = 3;
@@ -29,15 +45,13 @@ var current_mode = PILE;
2945

3046
var formation_builders = {};
3147
formation_builders[PILE] = pile_positions;
32-
formation_builders[HOUSE] = centered_house_positions;
48+
formation_builders[HOUSE] = house_positions;
3349
formation_builders[WALL] = wall_positions;
3450
formation_builders[CYLINDER] = cylinder_positions;
3551

3652
function create_card(container, index) {
3753
var card = document.createElement('div');
3854
card.className = 'card';
39-
card.style.height = CARD_HEIGHT + 'px';
40-
card.style.width = CARD_WIDTH + 'px';
4155
card.style.background = COLORS[index % COLORS.length];
4256

4357
container.appendChild(card);
@@ -85,6 +99,7 @@ function build_formation(positions) {
8599
}
86100

87101
function set_mode(mode) {
102+
update_sizes();
88103
if(mode == current_mode) {
89104
return;
90105
}
@@ -99,7 +114,7 @@ function set_mode(mode) {
99114

100115
build_formation(positions);
101116
current_mode = mode;
102-
};
117+
}
103118

104119
function rotate_container() {
105120
var container = document.getElementById('surface');
@@ -111,14 +126,16 @@ function rotate_container() {
111126
}
112127

113128
function pile_positions() {
114-
var positions = [];
115129
Deck.reset();
130+
var positions = [];
131+
116132
var i=0;
117133
var card=Deck.next_card();
118134
var center = (WIDTH - CARD_WIDTH)/2;
135+
var y = HEIGHT - HEIGHT*0.2;
119136
while(card) {
120137
positions.push({
121-
position: [center, BOTTOM - i*0.5, 300],
138+
position: [center, y - i*0.5, WIDTH*0.1],
122139
rotation: [Math.PI/2, 0, 0],
123140
});
124141
++i;
@@ -127,12 +144,20 @@ function pile_positions() {
127144
return positions;
128145
}
129146

130-
function house_positions(floors, x, y, z) {
147+
function house_positions() {
131148
Deck.reset();
149+
150+
var floors = 5;
151+
var y = (floors - 1) * TILTED_CARD_HEIGHT + TILTED_CARD_HEIGHT/2;
152+
var z = -WIDTH * 0.2;
153+
var x = (WIDTH - PYRAMID_WIDTH * floors) / 2 - TILTED_CARD_WIDTH;
154+
132155
var positions = [];
133156
var i;
134157
for(i=0;i<floors;++i) {
135-
positions = positions.concat(house_row_positions(floors - i, x + i * TILTED_CARD_WIDTH, y - i * TILTED_CARD_HEIGHT, z));
158+
var _x = x + i * TILTED_CARD_WIDTH;
159+
var _y = y - i * TILTED_CARD_HEIGHT;
160+
positions = positions.concat(house_row_positions(floors - i, _x, _y, z));
136161
}
137162

138163
return positions;
@@ -178,11 +203,13 @@ function pyramid_postions(x, y, z) {
178203

179204
function wall_positions() {
180205
var positions = [];
181-
var start_x = (WIDTH - 10 * CARD_WIDTH) / 2;
182-
var start_y = (HEIGHT - 4 * CARD_HEIGHT) / 2;
206+
var w = CARD_WIDTH + 10;
207+
var h = CARD_HEIGHT + 10;
208+
var start_x = (WIDTH - 10 * w) / 2;
209+
var start_y = (HEIGHT - 4 * h) / 2;
183210
for(var i=0;i<CARD_COUNT;++i) {
184-
var x = (i % 10) * CARD_WIDTH + start_x;
185-
var y = (Math.floor(i/10)) * CARD_HEIGHT + start_y;
211+
var x = (i % 10) * w + start_x;
212+
var y = (Math.floor(i/10)) * h + start_y;
186213
positions.push({
187214
position: [x, y, 0],
188215
rotation: [0, 0, 0]
@@ -194,7 +221,7 @@ function wall_positions() {
194221
function cylinder_positions() {
195222
var positions = [];
196223
var start_x = WIDTH / 2;
197-
var start_y = 100;
224+
var start_y = HEIGHT * 0.05;
198225
var radius = 100;
199226
for(var i=0;i<CARD_COUNT;++i) {
200227
var angle = ((i % 10) / 10) * 2 * Math.PI;
@@ -221,17 +248,15 @@ function build_pile() {
221248
set_mode(PILE);
222249
}
223250

224-
225-
function centered_house_positions() {
226-
// TODO: Actually center
227-
return house_positions(5, 200, BOTTOM, -300);
228-
}
229-
230251
function init() {
252+
update_sizes();
231253
Deck.reset();
232254
build_wall();
233255
rotate_container();
234256

257+
// Initialize fast click
258+
FastClick.attach(document.body);
259+
235260
// Event handlers
236261
var buttons = {
237262
"pile_button": PILE,

‎docs/css/custom.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
.container {
2+
transform: translateZ(1000px);
3+
-webkit-transform: translateZ(1000px);
4+
}
5+
16
.block {
27
width: 50px;
38
height: 50px;

0 commit comments

Comments
 (0)