github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-03-30 05:52:02 +02:00
Code Issues 1 Packages Projects Releases Wiki Activity

finetune UI design

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-29 20:08:22 +00:00
parent ba562f269d
commit e4f151e31b
4 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/level-selector.css
View File

@@ -5,6 +5,7 @@
} }
.levelItem { .levelItem {
border-radius: 0.3em;
width: 3em; width: 3em;
height: 2em; height: 2em;
border: 1px solid gray; border: 1px solid gray;

32
css/pexeso.css
View File

@@ -74,11 +74,35 @@ BODY, HTML {
z-index: 200; z-index: 200;
background:rgba(0,0,0,0.7); background:rgba(0,0,0,0.7);
text-align: center; text-align: center;
padding-top: 2em; color: white;
padding-bottom: 2em; height: 10em;
} }
#congratulation { #congratulation {
font-size: 3em; top: 1em;
padding-bottom: 1em; font-size: 2em;
width: 100%;
text-align: center;
position: absolute;
}
.levelCompleteButtons {
position: absolute;
top: 6em;
width: 100%;
text-align: center;
}
.levelButton {
font-size: 1.2em;
background: #111;
border: 1px solid lightgray;
padding: 0.5em;
margin: 1em;
cursor: pointer;
}
.levelButton:hover {
border: 1px solid yellow;
color: yellow;
} }

12
index.html
View File

@@ -38,8 +38,8 @@
<!--<img src="img/info.png"/>--> <!--<img src="img/info.png"/>-->
</div> </div>
<h2>Select level:</h2> <h2>Select level:</h2>
<div ng-repeat="level in levelLock" class="levelItem {{level.state}}"> <div ng-repeat="level in levelLock" class="levelItem {{level.state}}" ng-click="startLevel(level.state, $index)">
<div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div> <div ng-show="level.state == 'unlocked'" >{{level.text}}</div>
<div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div> <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@@ -80,11 +80,11 @@
</div> </div>
<!-- Level complete panel --> <!-- Level complete panel -->
<div id="levelCompleteContent" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible"> <div id="levelComplete" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
<div id="congratulation">Congratulations!</div> <div id="congratulation">Congratulations!</div>
<div> <div class="levelCompleteButtons">
<a class="levelButton" id="replayButton" ng-click="restartLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-repeat"></i>Play again</a> <a class="levelButton" id="replayButton" ng-click="restartLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-repeat"></i> Play again</a>
<a class="levelButton" id="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i>Next level</a> <a class="levelButton" id="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i> Next level</a>
</div> </div>
<div> <div>
<a class="levelButton" id="webButton" ng-click="openUrl(constellation.wiki)" ng-show="isFinalScreenVisible"> <a class="levelButton" id="webButton" ng-click="openUrl(constellation.wiki)" ng-show="isFinalScreenVisible">

6
js/level-selector-controller.js
View File

@@ -19,7 +19,11 @@ angular.module('level-selector', ['LocalStorageModule'])
{state:'locked', text:'PF'} {state:'locked', text:'PF'}
]; ];
$scope.startLevel = function(levelIndex) { $scope.startLevel = function(state, levelIndex) {
if (state != 'unlocked') {
return;
}
$scope.isLevelSelectorVisible = false; $scope.isLevelSelectorVisible = false;
var args = { var args = {
levelIndex: levelIndex levelIndex: levelIndex