Skip to content
This repository was archived by the owner on Apr 17, 2019. It is now read-only.

Commit 34edb12

Browse files
author
Max Waterman
committed
Merge pull request #7 from 01org/fix-android-scaling-6
Scale a container inside body and remove padding + margins
2 parents 49fb204 + ee6e4f1 commit 34edb12

File tree

4 files changed

+127
-112
lines changed

4 files changed

+127
-112
lines changed

‎app/css/flashcards.css‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,42 @@
1515
}
1616

1717
html {
18-
width: 0px;
19-
height: 0px;
18+
width: 100%;
19+
height: 100%;
2020
}
2121

2222
body {
2323
-webkit-user-select: none;
2424
box-shadow: 5px 5px 20px black;
2525
position: absolute;
26-
width: 1024px;
27-
height: 600px;
26+
height: 100%;
27+
width: 100%;
2828
-webkit-box-align: center;
2929
-webkit-box-pack: center;
3030
display: -webkit-box;
3131
background: #000000;
3232
overflow: hidden;
3333
cursor: default;
34+
margin: 0;
35+
padding: 0;
3436
}
3537

36-
#splash-screen {
37-
position: absolute;
38+
#container {
3839
width: 1024px;
3940
height: 600px;
41+
}
42+
43+
#splash-screen {
44+
position: absolute;
45+
width: 100%;
46+
height: 100%;
4047
background-image: url('../images/Background.png');
4148
}
4249

4350
#game-screen {
4451
position: absolute;
45-
width: 1024px;
46-
height: 600px;
52+
width: 100%;
53+
height: 100%;
4754
display: none;
4855
background-image: url("../images/Background.png");
4956
overflow-x: hidden;
@@ -128,7 +135,7 @@ body {
128135
-webkit-transform: translate(172px,0);
129136
position: absolute;
130137
left: -180px;
131-
height: 600px;
138+
height: 100%;
132139
width: 205px;
133140
cursor: pointer;
134141
background-image: url("../images/NavPane.png");
@@ -138,7 +145,7 @@ body {
138145
#nav-pane.animation-close {
139146
-webkit-transform: translate(-180px,0);
140147
position: absolute;
141-
height: 600px;
148+
height: 100%;
142149
width: 205px;
143150
cursor: pointer;
144151
background-image: url("../images/NavPane.png");
@@ -524,8 +531,8 @@ body {
524531

525532
#smoke-screen {
526533
position: absolute;
527-
width: 1024px;
528-
height: 600px;
534+
width: 100%;
535+
height: 100%;
529536
left: -195px;
530537
top: -90px;
531538
background-color: #000000;

‎app/index.html‎

Lines changed: 104 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -16,112 +16,118 @@
1616
<link rel="stylesheet" href="css/license.css"/>
1717
</head>
1818
<body>
19-
<div id="licensepage" style="display: none">
20-
<div id="licensetext">
21-
<div id="licensescroll">
22-
<br>
23-
<br>
24-
Kid's Adventure Flash Card's is a study card app implemeneted<br>
19+
<div id="container">
20+
<div id="licensepage" style="display: none">
21+
<div id="licensetext">
22+
<div id="licensescroll">
23+
<br>
24+
<br>
25+
Kid's Adventure Flash Card's is a study card app implemeneted<br>
2526

26-
in HTML5/JavaScript<br>
27-
<br>
28-
Author/Owner: Connie Berardi &lt;[email protected]&gt;<br>
29-
<br>
30-
Technical Details: This app is written using HTML5/css3<br>
31-
javascript library and is distributed under Apache2.0 license.<br>
32-
<br>
33-
FONTS<br>
27+
in HTML5/JavaScript<br>
28+
<br>
29+
Author/Owner: Connie Berardi &lt;[email protected]&gt;<br>
30+
<br>
31+
Technical Details: This app is written using HTML5/css3<br>
32+
javascript library and is distributed under Apache2.0 license.<br>
33+
<br>
34+
FONTS<br>
3435

35-
<br>
36-
Google web fonts - Carter One<br>
37-
http://www.google.com/webfonts/specimen/Carter+One<br>
38-
SIL Open Font License 1.1<br>
39-
<br>
40-
SOUNDS<br>
36+
<br>
37+
Google web fonts - Carter One<br>
38+
http://www.google.com/webfonts/specimen/Carter+One<br>
39+
SIL Open Font License 1.1<br>
40+
<br>
41+
SOUNDS<br>
4142

42-
<br>
43-
GameplayBackgroundAtmospheric_Loop.ogg<br>
44-
Original Name: bird-chatter4.aif<br>
45-
Origin: http://www.freesound.org/people/alienistcog/sounds/125779/<br>
46-
License: http://creativecommons.org/publicdomain/zero/1.0/<br>
47-
<br>
48-
GeneralButtonClick_wav.ogg<br>
49-
Original Name: btn121.wav<br>
50-
Origin: http://www.freesound.org/people/junggle/sounds/29301/<br>
51-
License: License: http://creativecommons.org/licenses/by/3.0/<br>
52-
<br>
53-
NavPaneSwoosh.ogg<br>
54-
Original Name: sliding paper on table.wav<br>
55-
Origin: http://www.freesound.org/people/123jorre456/sounds/46631/<br>
56-
License: http://creativecommons.org/publicdomain/zero/1.0/<br>
57-
<br>
58-
WhipCrackBegin.ogg<br>
59-
Original Name: swosh-08.flac -"stick cutting air"<br>
60-
Origin: http://www.freesound.org/people/qubodup/sounds/59995/<br>
61-
License: License: http://creativecommons.org/licenses/by/3.0/<br>
62-
Original Name: Whip Crack 01.wav<br>
63-
Origin: http://www.freesound.org/people/CGEffex/sounds/93100/<br>
64-
License: License: http://creativecommons.org/licenses/by/3.0/<br>
65-
<br>
66-
IMAGES<br>
43+
<br>
44+
GameplayBackgroundAtmospheric_Loop.ogg<br>
45+
Original Name: bird-chatter4.aif<br>
46+
Origin: http://www.freesound.org/people/alienistcog/sounds/125779/<br>
47+
License: http://creativecommons.org/publicdomain/zero/1.0/<br>
48+
<br>
49+
GeneralButtonClick_wav.ogg<br>
50+
Original Name: btn121.wav<br>
51+
Origin: http://www.freesound.org/people/junggle/sounds/29301/<br>
52+
License: License: http://creativecommons.org/licenses/by/3.0/<br>
53+
<br>
54+
NavPaneSwoosh.ogg<br>
55+
Original Name: sliding paper on table.wav<br>
56+
Origin: http://www.freesound.org/people/123jorre456/sounds/46631/<br>
57+
License: http://creativecommons.org/publicdomain/zero/1.0/<br>
58+
<br>
59+
WhipCrackBegin.ogg<br>
60+
Original Name: swosh-08.flac -"stick cutting air"<br>
61+
Origin: http://www.freesound.org/people/qubodup/sounds/59995/<br>
62+
License: License: http://creativecommons.org/licenses/by/3.0/<br>
63+
Original Name: Whip Crack 01.wav<br>
64+
Origin: http://www.freesound.org/people/CGEffex/sounds/93100/<br>
65+
License: License: http://creativecommons.org/licenses/by/3.0/<br>
66+
<br>
67+
IMAGES<br>
6768

68-
<br>
69-
All images are created by Intel Corp.<br>
70-
They are licensed under the Creative Commons Attribution 3.0 license<br>
71-
http://creativecommons.org/licenses/by/3.0/us/<br>
72-
<br>
73-
</div>
74-
</div>
75-
<div id="licensebtnq" class="licensebtn">Back</div>
76-
</div>
77-
<div id="splash-screen">
78-
<div id="adventure-ribbon-tail"></div>
79-
<div id="adventure-ribbon"></div>
80-
<div id="flash-title"></div>
81-
<div id="cards-ribbon-tail"></div>
82-
<div id="cards-ribbon"></div>
83-
<div id="play-button"></div>
84-
<div id="licensebtnl" style="top: 540px; left: 945px;"> i </div>
85-
</div>
86-
<div id="game-screen">
87-
<div id="nav-pane-compass"></div>
88-
<div id="rope-bottom"></div>
89-
<div id="card-stack"></div>
90-
<div id="card">
91-
<div id="card-graphic"></div>
69+
<br>
70+
All images are created by Intel Corp.<br>
71+
They are licensed under the Creative Commons Attribution 3.0 license<br>
72+
http://creativecommons.org/licenses/by/3.0/us/<br>
73+
<br>
74+
</div>
75+
</div>
76+
<div id="licensebtnq" class="licensebtn">Back</div>
9277
</div>
93-
<div id="rope-top"></div>
94-
<div id="answer">
95-
<div id="card-answer"></div>
96-
<div id="wrong-button"></div>
97-
<div id="right-button"></div>
98-
</div>
99-
<div id="endgame-prompt"></div>
100-
<div id="replay-button" ></div>
101-
<div id="nav-pane" class="animation-open">
102-
<div id="nav-flag"></div>
103-
<div id="nav-pane-tent"></div>
104-
<div id="scroll-overlay">
105-
<div id="scroll-items">
106-
<div id="shape-deck"></div>
107-
<div id="color-deck"></div>
108-
<div id="counting-deck"></div>
109-
<div id="spanish-deck"></div>
110-
</div>
111-
</div>
112-
<div id="score">
113-
<div id="score-text"></div>
114-
<div id="score-number"></div>
115-
</div>
78+
79+
<div id="splash-screen">
80+
<div id="adventure-ribbon-tail"></div>
81+
<div id="adventure-ribbon"></div>
82+
<div id="flash-title"></div>
83+
<div id="cards-ribbon-tail"></div>
84+
<div id="cards-ribbon"></div>
85+
<div id="play-button"></div>
86+
<div id="licensebtnl" style="top: 540px; left: 945px;"> i </div>
11687
</div>
117-
<div id="help-icon"></div>
118-
<div id="help-dialog">
119-
<div id="smoke-screen"></div>
120-
<div id="help-card"></div>
121-
<div id="help-text"></div>
122-
<div id="help-close">X</div>
88+
89+
<div id="game-screen">
90+
<div id="nav-pane-compass"></div>
91+
<div id="rope-bottom"></div>
92+
<div id="card-stack"></div>
93+
<div id="card">
94+
<div id="card-graphic"></div>
95+
</div>
96+
<div id="rope-top"></div>
97+
<div id="answer">
98+
<div id="card-answer"></div>
99+
<div id="wrong-button"></div>
100+
<div id="right-button"></div>
101+
</div>
102+
<div id="endgame-prompt"></div>
103+
<div id="replay-button" ></div>
104+
<div id="nav-pane" class="animation-open">
105+
<div id="nav-flag"></div>
106+
<div id="nav-pane-tent"></div>
107+
<div id="scroll-overlay">
108+
<div id="scroll-items">
109+
<div id="shape-deck"></div>
110+
<div id="color-deck"></div>
111+
<div id="counting-deck"></div>
112+
<div id="spanish-deck"></div>
113+
</div>
114+
</div>
115+
<div id="score">
116+
<div id="score-text"></div>
117+
<div id="score-number"></div>
118+
</div>
119+
</div>
120+
<div id="help-icon"></div>
121+
<div id="help-dialog">
122+
<div id="smoke-screen"></div>
123+
<div id="help-card"></div>
124+
<div id="help-text"></div>
125+
<div id="help-close">X</div>
126+
</div>
123127
</div>
128+
124129
</div>
130+
125131
<script src="lib/requirejs/require.js" data-main="js/amd-config"></script>
126132
</body>
127133
</html>

‎app/js/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ require(['scaleBody', 'flashcards', 'domReady!'], function (scaleBody, FlashCard
55
//hack to get active state to work on webkit
66
this.touchstart = function (e) {};
77

8-
scaleBody(document.body, 720);
8+
scaleBody(document.getElementById('container'), 720);
99
});

‎app/js/scaleBody.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
define(function () {
22
return function (container, mobileWidth) {
33
// height and width of the page-container element; note that these
4-
// should be set in CSS so we can do measure once here
4+
// should be set in CSS so we can do measure once here;
5+
// also note that the container should ideally be the same size as
6+
// the body, and the body should have no padding or margin
57
var computedStyles = window.getComputedStyle(container);
68
var containerWidth = parseInt(computedStyles.width.replace('px', ''), 10);
79
var containerHeight = parseInt(computedStyles.height.replace('px', ''), 10);

0 commit comments

Comments
 (0)