Commit 7271f6f6 authored by Richard Torenvliet's avatar Richard Torenvliet

iPhone 6 support for the game, for now

parent ae1332b5
...@@ -9,7 +9,7 @@ angular.module( 'Interactive', [ ...@@ -9,7 +9,7 @@ angular.module( 'Interactive', [
]) ])
.config(function ($stateProvider, $urlRouterProvider) { .config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise( '/index' ); $urlRouterProvider.otherwise('/tapdance' );
}) })
.run( function run () { .run( function run () {
......
<h1>Game index</h1> <h1>Game index</h1>
<a ui-sref="game-tapdance">tapdance</a> <a ui-sref="game-tapdance">tapdance</a>
angular.module('Interactive.game.tapdance.how2play', [
'ui.router',
'ui.bootstrap'
])
.config(function($stateProvider) {
$stateProvider
.state( 'game-tapdance-how2play', {
url: '/tapdance-how2-play',
views: {
'main': {
controller: 'howCtrl',
templateUrl: 'game/tapdance/tapdance-how2play.tpl.html'
}
},
data: { pageTitle: 'How to Play' }
}
);
})
.controller( 'howCtrl', function IndexController($scope, $modal) {
//$modal.open(
// {
// templateUrl:'game/tapdance/tapdance-play-modal.tpl.html'
//});
})
;
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/>
</a>
</div>
angular.module('Interactive.game.tapdance', [ angular.module('Interactive.game.tapdance', [
'ui.router', 'ui.router',
'ui.bootstrap', 'ui.bootstrap',
'Interactive.pixi' 'Interactive.game.tapdance.how2play'
]) ])
.config(function($stateProvider) { .config(function($stateProvider) {
......
<div class="game-background"> <div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<div class="popup"> <div class="popup">
<h1 class="text-center">TAP DANCE</h1> <h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Help your conscience and save water</p> <p class="text-center">Help your conscience and save water</p>
<button class="btn btn-default center-block play-now">PLAY NOW</button> <a ui-sref='game-tapdance-how2play' class="btn btn-default center-block play-now">PLAY NOW</a>
</div> </div>
</div> </div>
This diff is collapsed.
This diff is collapsed.
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html ng-app="Interactive" ng-controller="AppCtrl"> <html ng-app="Interactive" ng-controller="AppCtrl">
<head> <head>
<title ng-bind="pageTitle"></title> <title ng-bind="pageTitle"></title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- font awesome from BootstrapCDN --> <!-- font awesome from BootstrapCDN -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
</head> </head>
<body> <body>
<div class="container" ui-view="main"> <div class="container" ui-view="main">
test
</div> </div>
</body> </body>
</html> </html>
...@@ -22,8 +22,12 @@ ...@@ -22,8 +22,12 @@
body { body {
font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif; font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
overflow:hidden;
} }
/** /**
* Typography * Typography
*/ */
...@@ -141,27 +145,39 @@ h2 { ...@@ -141,27 +145,39 @@ h2 {
} }
.game-background { .game-background {
background: url("/assets/bg.jpg"); position: relative;
background-position: 50% 50%; }
background-size: auto 80%;
background-repeat: no-repeat;
padding: 0 !important;
height: 800px;
img.bg-image {
position: absolute;
top: -90px;
left: 0;
height: 667px;
width: auto;
z-index: 0;
}
.popup-image {
position: absolute;
width: 250px;
left: 20%;
margin-left: auto;
margin-right: auto;
} }
.popup { .popup {
color: #d0b745;
background: white;
-webkit-border-radius: 30px;
-moz-border-radius: 30px; -moz-border-radius: 30px;
-webkit-border-radius: 30px;
background: white;
border-radius: 30px; border-radius: 30px;
position: absolute; color: #d0b745;
left: 10%;
margin-left: auto;
margin-right: auto;
padding: 3em; padding: 3em;
left: 50%; position: absolute;
top: 10%; top: 40px;
transform: translateY(-50%); width: 300px;
transform: translateX(-50%);
} }
.popup h1 { .popup h1 {
...@@ -173,3 +189,9 @@ h2 { ...@@ -173,3 +189,9 @@ h2 {
color: white; color: white;
font-size: 3em; font-size: 3em;
} }
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment