From e4f151e31ba9bcc0577b806ef095c001211af6b8 Mon Sep 17 00:00:00 2001
From: Juraj Michalek <juraj.michalek@ysoft.com>
Date: Mon, 29 Dec 2014 20:08:22 +0000
Subject: [PATCH] finetune UI design

---
 css/level-selector.css          |  1 +
 css/pexeso.css                  | 34 ++++++++++++++++++++++++++++-----
 index.html                      | 12 ++++++------
 js/level-selector-controller.js |  6 +++++-
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/css/level-selector.css b/css/level-selector.css
index 571d988..d3bd4a9 100644
--- a/css/level-selector.css
+++ b/css/level-selector.css
@@ -5,6 +5,7 @@
 }
 
 .levelItem {
+    border-radius: 0.3em;
     width: 3em;
     height: 2em;
     border: 1px solid gray;
diff --git a/css/pexeso.css b/css/pexeso.css
index 1e018d3..832361b 100644
--- a/css/pexeso.css
+++ b/css/pexeso.css
@@ -74,11 +74,35 @@ BODY, HTML {
     z-index: 200;
     background:rgba(0,0,0,0.7);
     text-align: center;
-    padding-top: 2em;
-    padding-bottom: 2em;
+    color: white;
+    height: 10em;
 }
 
 #congratulation {
-    font-size: 3em;
-    padding-bottom: 1em;
-}
\ No newline at end of file
+	top: 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;
+}
diff --git a/index.html b/index.html
index a4db6a1..ba08be4 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,8 @@
         <!--<img src="img/info.png"/>-->
     </div>
     <h2>Select level:</h2>
-    <div ng-repeat="level in levelLock" class="levelItem {{level.state}}">
-        <div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div>
+    <div ng-repeat="level in levelLock" class="levelItem {{level.state}}"  ng-click="startLevel(level.state, $index)">
+        <div ng-show="level.state == 'unlocked'" >{{level.text}}</div>
         <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
     </div>
     <div class="clearfix"></div>
@@ -80,11 +80,11 @@
 </div>
 
 <!-- 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>
-            <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>
+        <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="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i> Next level</a>
         </div>
         <div>
             <a class="levelButton" id="webButton" ng-click="openUrl(constellation.wiki)" ng-show="isFinalScreenVisible">
diff --git a/js/level-selector-controller.js b/js/level-selector-controller.js
index 54ce9cf..1b0dc31 100644
--- a/js/level-selector-controller.js
+++ b/js/level-selector-controller.js
@@ -19,7 +19,11 @@ angular.module('level-selector', ['LocalStorageModule'])
             {state:'locked', text:'PF'}
         ];
 
-    $scope.startLevel = function(levelIndex) {
+    $scope.startLevel = function(state, levelIndex) {
+        if (state != 'unlocked') {
+            return;
+        }
+        
         $scope.isLevelSelectorVisible = false;
         var args = {
             levelIndex: levelIndex