From d68c8061fedbdfe9c3f8dad31cad05a541c8e8b3 Mon Sep 17 00:00:00 2001
From: Thomas Klokosch <thomas.klokosch@me.com>
Date: Thu, 16 Jun 2011 11:17:01 +0200
Subject: [PATCH] Added an sliding animation to the #form element after submit
 Gave #underground a bit more space for the report

---
 app/controller/report.coffee    |  4 ++--
 views/stylesheets/w14g.css.sass | 35 ++++++++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/controller/report.coffee b/app/controller/report.coffee
index 0ae9beb..1193897 100644
--- a/app/controller/report.coffee
+++ b/app/controller/report.coffee
@@ -20,11 +20,11 @@ class App.Controllers.Report extends Backbone.Controller
     @model.resetFilter()
     $('#form').addClass('inactive').removeClass('active')
     $('#report').addClass('active').removeClass('inactive')
-    $('#overground').animate({"height":"60%"},1000,"swing")
+    $('#overground').animate({"height":"45%"},1000,"swing")
 
   filter: (screenName, word) ->
     @model.set screenName: screenName
     @model.filterByWord decodeURIComponent(word)
     $('#form').addClass('inactive').removeClass('active')
     $('#report').addClass('active').removeClass('inactive')
-    $('#overground').animate({"height":"60%"},1000,"swing")
+    $('#overground').animate({"height":"45%"},1000,"swing")
diff --git a/views/stylesheets/w14g.css.sass b/views/stylesheets/w14g.css.sass
index be5d417..4c57303 100644
--- a/views/stylesheets/w14g.css.sass
+++ b/views/stylesheets/w14g.css.sass
@@ -52,14 +52,33 @@ html,body,#container,#main
     +transparent
     :position absolute
     :left 50%
-    :bottom 100px
+    :bottom 140px
     :width 500px
-    :margin 200px 0 0 -250px
+    :margin 200px 0 0 -290px
     :z-index 999
 
     &.loaded
       +opaque
 
+    &.inactive
+      :left 20%
+      :bottom 60px
+
+      #w14g
+        :top -60px
+        :-moz-transform scale(0.8)
+        :-webkit-transform scale(0.8)
+
+      .screen_name_input
+        :width 260px
+        :padding 6px
+        :font-size 22px
+        :left 170px
+
+      .screen_name_label
+        :left 150px
+        :font-size 22px
+
     @media screen
       @media (max-height: 500px)
         :bottom 50px
@@ -72,7 +91,10 @@ html,body,#container,#main
       :height 91px
       :background url('../images/w14g.png')
 
-    label.screen_name_label
+    .screen_name_label
+      :position absolute
+      :left 80px
+      :top 10px
       :font-size 40px
       :color #fff
       :font-weight bold
@@ -80,11 +102,13 @@ html,body,#container,#main
       :filter dropshadow(color=#8fcaf7, offx=3, offy=3)
 
     .screen_name_input
+      :position absolute
+      :left 120px
       :font-size 30px
       :font-style italic
       :color #BBB
       :border 0
-      :width 400px
+      :width 340px
       :padding 10px
       :border-radius 10px
       :box-shadow 3px 3px 5px #99c0e5
@@ -222,7 +246,7 @@ html,body,#container,#main
   :text-align left
   :padding 10px
   :width 400px
-  :height 220px
+  :height 230px
   :border-radius 10px
   :-moz-border-radius 10px
 
@@ -254,6 +278,7 @@ html,body,#container,#main
 
 .tweet-graph
   :float right
+  :margin-top 10px
 
 .word-cloud
   :margin 30px auto