work on transition between views, err'thing broken in chrome

ngokevin · Jan 29, 2013 · e18cf8d · e18cf8d
1 parent 7bf28ed
commit e18cf8d
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 55 deletions.
diff --git a/client/css/base.css b/client/css/base.css
@@ -36,19 +36,6 @@ html, body {
   padding: 5px 0 0;
   width: 100%; }
 
-#loading {
-  -moz-transition: opacity 0.5s ease-out;
-  -ms-transition: opacity 0.5s ease-out;
-  -o-transition: opacity 0.5s ease-out;
-  -webkit-transition: opacity 0.5s ease-out;
-  transition: opacity 0.5s ease-out;
-  font-size: 32px;
-  opacity: 0;
-  position: absolute;
-  text-align: center;
-  top: 200px;
-  width: 100%; }
-
 span.button {
   -moz-box-shadow: 0 0 1px 1px #282828;
   -webkit-box-shadow: 0 0 1px 1px #282828;
@@ -144,11 +131,7 @@ span.button {
     -moz-transform: scale(3);
     -ms-transform: scale(3);
     -o-transform: scale(3);
-    -webkit-transform: scale(3);
-    position: relative;
-    margin-bottom: 235px;
-    top: 83px;
-    right: 6px; }
+    -webkit-transform: scale(3); }
     .card.logo.transform {
       -moz-transform: scale(3) rotateZ(-5deg);
       -ms-transform: scale(3) rotateZ(-5deg);
@@ -159,3 +142,14 @@ span.button {
         -ms-transform: scale(3) rotateZ(35deg);
         -o-transform: scale(3) rotateZ(35deg);
         -webkit-transform: scale(3) rotateZ(35deg); }
+
+.loading {
+  -moz-transition: opacity 0.4s ease-out;
+  -ms-transition: opacity 0.4s ease-out;
+  -o-transition: opacity 0.4s ease-out;
+  -webkit-transition: opacity 0.4s ease-out;
+  transition: opacity 0.4s ease-out;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 235px; }
diff --git a/client/css/base.scss b/client/css/base.scss
@@ -36,16 +36,6 @@ html, body {
     width: 100%;
 }
 
-#loading {
-    @include transition(opacity .5s ease-out);
-    font-size: 32px;
-    opacity: 0;
-    position: absolute;
-    text-align: center;
-    top: 200px;
-    width: 100%;
-}
-
 span.button {
     @include default-box-shadow();
     @include gradient($red, darken($red, 3%));
@@ -133,10 +123,6 @@ span.button {
     &.logo {
         @include box-shadow(0 0 1px 0 $light-gray);
         @include transform(scale(3));
-        position: relative;
-        margin-bottom: 235px;
-        top: 83px;
-        right: 6px;
         &.transform {
             @include transform(scale(3) rotateZ(-5deg));
             &:nth-child(2) {
@@ -145,3 +131,11 @@ span.button {
         }
     }
 }
+
+.loading {
+    @include transition(opacity .4s ease-out);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 235px;
+}
diff --git a/client/css/lobby.css b/client/css/lobby.css
@@ -18,6 +18,6 @@ h1 {
 
 #find-game {
   position: absolute;
-  bottom: 0;
+  top: 360px;
   left: 0;
   right: 0; }
diff --git a/client/css/lobby.scss b/client/css/lobby.scss
@@ -15,7 +15,7 @@ h1 {
 
 #find-game {
     position: absolute;
-    bottom: 0;
+    top: 360px;
     left: 0;
     right: 0;
 }
diff --git a/client/index.html b/client/index.html
@@ -25,7 +25,7 @@
   <body ng-app="poker-app">
     <div id='wrap'>
       <div id='not-bar'>{{ notify }}</div>
-      <div id='loading'>
+      <div class='loading'>
         <span class="card logo">
           <span class="rank">V</span>
           <span class="suit-little red">&hearts;</span>

diff --git a/client/js/controllers.js b/client/js/controllers.js
@@ -6,9 +6,11 @@ function LobbyCtrl($scope, $rootScope, gameHolder) {
         $('.card.logo').addClass('transform');
         if ($rootScope.firstGame) {
             $('#lobby').addClass('transition-off');
-            $('#lobby').css('right', '0px');
             setTimeout(function() {
-                $('#lobby').removeClass('transition-off');
+                $('#lobby').css('right', '0px');
+                setTimeout(function() {
+                    $('#lobby').removeClass('transition-off');
+                });
             });
         } else {
             $('#lobby').css('right', '0px');
@@ -56,9 +58,8 @@ function LobbyCtrl($scope, $rootScope, gameHolder) {
             // Animation stuff.
             $rootScope.firstGame = false;
             $('#lobby').css('right', '320px');
-            $('#loading').css('opacity', '1');
             setTimeout(function() {
-                $('#loading').css('opacity', '0');
+                $('.loading').css('opacity', '0');
             }, 600);
         });
 

diff --git a/client/js/utils.js b/client/js/utils.js
@@ -12,11 +12,8 @@ function gameOver($scope, $rootScope, disconnect) {
 
     // Animation.
     setTimeout(function() {
+        $('.loading').css('opacity', '1');
         $('#game').css('left', '320px');
-        $('#loading').css('opacity', '1');
-        setTimeout(function() {
-            $('#loading').css('opacity', '0');
-        }, 600);
     }, 4500);
 
     // Switch to lobby.

diff --git a/client/partials/lobby.html b/client/partials/lobby.html
@@ -1,17 +1,5 @@
 <div id='lobby' ng-controller="LobbyCtrl">
   <h1>Versus Poker</h1>
   <p>Heads-Up Hold'em</p>
-  <div>
-    <span class="card logo">
-      <span class="rank">V</span>
-      <span class="suit-little red">&hearts;</span>
-      <span class="suit red">&hearts;</span>
-    </span>
-    <span class="card logo">
-      <span class="rank">S</span>
-      <span class="suit-little red">&hearts;</span>
-      <span class="suit red">&hearts;</span>
-    </span>
-  </div>
   <span id="find-game" class="button" ng-click="findGame()">Find Game</span>
 </div>