Added an sliding animation to the #form element after submit

Gave #underground a bit more space for the report
martinrehfeld · Jun 16, 2011 · d68c806 · d68c806
1 parent 23e5cd0
commit d68c806
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git 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
@@ -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,19 +91,24 @@ 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
       :text-shadow 3px 3px 5px #8fcaf7
       :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