Restyle flash message. Not it does not overflow head panel

Dmitriy Zaporozhets
1 parent e6b5f4ad
Showing 12 changed files with 34 additions and 36 deletions Show diff stats
app/assets/javascripts/main.js.coffee
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/login.scss
app/views/layouts/_flash.html.haml
app/views/layouts/admin.html.haml
app/views/layouts/application.html.haml
app/views/layouts/devise.html.haml
app/views/layouts/errors.html.haml
app/views/layouts/group.html.haml
app/views/layouts/profile.html.haml
app/views/layouts/project_resource.html.haml
app/views/layouts/user_team.html.haml
@@ -54,10 +54,10 @@ $ -&gt;
     $(@).parents('form').submit()
   # Flash
-  if (flash = $("#flash-container")).length > 0
-    flash.click -> $(@).slideUp("slow")
-    flash.slideDown "slow"
-    setTimeout (-> flash.slideUp("slow")), 3000
+  if (flash = $(".flash-container")).length > 0
+    flash.click -> $(@).fadeOut()
+    flash.show()
+    setTimeout (-> flash.fadeOut()), 3000
   # Disable form buttons while a form is submitting
   $('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->
@@ -67,27 +67,17 @@ table a code {
 }
 /** FLASH message **/
-#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;
+.flash-container {
   display: none;
+  .alert {
+    cursor: pointer;
+    margin: 0;
+    text-align: center;
+    border-radius: 0;
-  h4 {
-    color: #666;
-    font-size: 18px;
-    line-height: 38px;
-    padding-top: 5px;
-    margin: 2px;
-    font-weight: normal;
+    span {
+      font-size: 14px;
+    }
   }
 }
 /* Login Page */
 body.login-page{
-  padding-top: 7%;
-  background: #666;
+  background: #EEE;
+  .container .content { padding-top: 5%; }
 }
 .login-box{
-- if text = alert || notice
-  #flash-container
-    %h4= text
+.flash-container
+  - if alert
+    .alert
+      %span= alert
+
+  - elsif notice
+    .alert.alert-info
+      %span= notice
@@ -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
@@ -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
@@ -3,4 +3,7 @@
   = render "layouts/head"
   %body.ui_basic.login-page
     = render "layouts/flash"
-    .container= yield
+    .container
+      .content
+        %center
+          = yield
@@ -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
@@ -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
@@ -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
@@ -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'
@@ -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
	@@ -67,27 +67,17 @@ table a code {		@@ -67,27 +67,17 @@ table a code {
67	}	67	}
68		68
69	/ FLASH message /	69	/ FLASH message /
70	-#flash-container {
71	- height: 50px;
72	- position: fixed;
73	- z-index: 10001;
74	- top: 0px;
75	- width: 100%;
76	- margin-bottom: 15px;
77	- overflow: hidden;
78	- background: white;
79	- cursor: pointer;
80	- border-bottom: 1px solid #ccc;
81	- text-align: center;	70	+.flash-container {
82	display: none;	71	display: none;
		72	+ .alert {
		73	+ cursor: pointer;
		74	+ margin: 0;
		75	+ text-align: center;
		76	+ border-radius: 0;
83		77
84	- h4 {
85	- color: #666;
86	- font-size: 18px;
87	- line-height: 38px;
88	- padding-top: 5px;
89	- margin: 2px;
90	- font-weight: normal;	78	+ span {
		79	+ font-size: 14px;
		80	+ }
91	}	81	}
92	}	82	}
93		83
1	/* Login Page */	1	/* Login Page */
2	body.login-page{	2	body.login-page{
3	- padding-top: 7%;
4	- background: #666;	3	+ background: #EEE;
		4	+ .container .content { padding-top: 5%; }
5	}	5	}
6		6
7	.login-box{	7	.login-box{
1	-- if text = alert \|\| notice
2	- #flash-container
3	- %h4= text	1	+.flash-container
		2	+ - if alert
		3	+ .alert
		4	+ %span= alert
		5	+
		6	+ - elsif notice
		7	+ .alert.alert-info
		8	+ %span= notice