Restyle flash message. Not it does not overflow head panel

app/assets/javascripts/main.js.coffee

@@ -54,10 +54,10 @@ $ ->
     $(@).parents('form').submit()
 
   # Flash
-  if (flash = $("#flash-container")).length > 0
+  if (flash = $(".flash-container")).length > 0
-    flash.click -> $(@).slideUp("slow")
+    flash.click -> $(@).fadeOut()
-    flash.slideDown "slow"
+    flash.show()
-    setTimeout (-> flash.slideUp("slow")), 3000
+    setTimeout (-> flash.fadeOut()), 3000
 
   # Disable form buttons while a form is submitting
   $('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->

app/assets/stylesheets/common.scss

@@ -67,27 +67,17 @@ table a code {
 }
 
 /** FLASH message **/
-#flash-container {
+.flash-container {
-  height: 50px;
-  position: fixed;
-  z-index: 10001;
-  top: 0px;
-  width: 100%;
-  margin-bottom: 15px;
-  overflow: hidden;
-  background: white;
-  cursor: pointer;
-  border-bottom: 1px solid #ccc;
-  text-align: center;
   display: none;
+  .alert {
+    cursor: pointer;
+    margin: 0;
+    text-align: center;
+    border-radius: 0;
 
-  h4 {
+    span {
-    color: #666;
+      font-size: 14px;
-    font-size: 18px;
+    }
-    line-height: 38px;
-    padding-top: 5px;
-    margin: 2px;
-    font-weight: normal;
   }
 }
 

app/assets/stylesheets/sections/login.scss

@@ -1,7 +1,7 @@
 /* Login Page */
 body.login-page{
-  padding-top: 7%;
+  background: #EEE;
-  background: #666;
+  .container .content { padding-top: 5%; }
 }
 
 .login-box{

app/views/layouts/_flash.html.haml

@@ -1,3 +1,8 @@
-- if text = alert || notice
+.flash-container
-  #flash-container
+  - if alert
-    %h4= text
+    .alert
+      %span= alert
+
+  - elsif notice
+    .alert.alert-info
+      %span= notice

app/views/layouts/admin.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "Admin area"
   %body{class: "#{app_theme} admin"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: "Admin area"
+    = render "layouts/flash"
     .container
       %ul.main_menu
         = nav_link(controller: :dashboard, html_options: {class: 'home'}) do

app/views/layouts/application.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "Dashboard"
   %body{class: "#{app_theme} application"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: "Dashboard"
+    = render "layouts/flash"
     .container
       %ul.main_menu
         = nav_link(path: 'dashboard#show', html_options: {class: 'home'}) do

app/views/layouts/devise.html.haml

@@ -3,4 +3,7 @@
   = render "layouts/head"
   %body.ui_basic.login-page
     = render "layouts/flash"
-    .container= yield
+    .container
+      .content
+        %center
+          = yield

app/views/layouts/errors.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "Error"
   %body{class: "#{app_theme} application"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: ""
+    = render "layouts/flash"
     .container
       .content
         %center.padded.prepend-top-20

app/views/layouts/group.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "#{@group.name}"
   %body{class: "#{app_theme} application"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: "group: #{@group.name}"
+    = render "layouts/flash"
     .container
       %ul.main_menu
         = nav_link(path: 'groups#show', html_options: {class: 'home'}) do

app/views/layouts/profile.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "Profile"
   %body{class: "#{app_theme} profile"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: "Profile"
+    = render "layouts/flash"
     .container
       %ul.main_menu
         = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

app/views/layouts/project_resource.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
   %body{class: "#{app_theme} project"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: project_title(@project)
+    = render "layouts/flash"
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'
 

app/views/layouts/user_team.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head", title: "#{@team.name}"
   %body{class: "#{app_theme} application"}
-    = render "layouts/flash"
     = render "layouts/head_panel", title: "team: #{@team.name}"
+    = render "layouts/flash"
     .container
       %ul.main_menu
         = nav_link(path: 'teams#show', html_options: {class: 'home'}) do