Better notification box

(ActionItem1474)

Better notification box
(ActionItem1474)
Antonio Terceiro
1 parent e96af6df
Showing 3 changed files with 17 additions and 22 deletions Show diff stats
app/views/shared/noosfero_layout_features.rhtml
public/designs/themes/base/style.css
public/stylesheets/application.css
@@ -2,9 +2,8 @@
       <div id="notice" onclick="Element.hide('notice');" style="display:none">
         <%= flash[:notice] %>
         <%= javascript_tag(
-          visual_effect( :appear,    'notice', :duration => 0.5, :queue => :end ) +
-          visual_effect( :highlight, 'notice', :duration => 3, :queue => :end ) +
-          visual_effect( :fade,      'notice', :duration => 1.5, :queue => :end )
+          visual_effect( :appear,    'notice', :duration => 1.5, :to => 0.8, :queue => :end ) +
+          'setTimeout(function() { %s }, 5000)' % visual_effect( :fade,      'notice', :duration => 1.0, :from => 0.8, :queue => :end )
         ) %>
       </div>
     <% end %>
@@ -327,19 +327,10 @@ div.no_media_panel {
 }
  
 div#notice {
-  background-color: #ffd;
-  color: black;
-  border: 1px solid #d3d7cf;
-  -moz-border-radius: 5px;
-
-  position: absolute;
-  top: 33px;
-  left: 10px;
-  margin-left: 0px;
-  padding: 5px;
+  right: 50%;
+  margin-right: -470px;
 }
  
-
 /* ==> blocks.css <== */
  
 .block a {
@@ -126,17 +126,22 @@ a img {
   top: 200px;
 }
  
-/* Notice */ 
+/* Notice box */
  
 div#notice {
-  z-index: 20;
+  background-color: #000;
+  color: white;
+  -moz-border-radius: 15px;
+  font-size: 16px;
+  font-weight: bold;
+  z-index: 100000;
+  padding: 10px;
+
+  width: 300px;
+  min-height: 60px;
   position: absolute;
-  top: 100px;
-  left: 50%;
-  margin-left: -200px;
-  width: 400px;
-  border: 1px solid #ddd;
-  background: #ffd;
+  top: 30px;
+  right: 30px;
 }
  
 /* * * Generic Content Formating * * */
...	...	@@ -2,9 +2,8 @@
2	2	<div id="notice" onclick="Element.hide('notice');" style="display:none">
3	3	<%= flash[:notice] %>
4	4	<%= javascript_tag(
5		- visual_effect( :appear, 'notice', :duration => 0.5, :queue => :end ) +
6		- visual_effect( :highlight, 'notice', :duration => 3, :queue => :end ) +
7		- visual_effect( :fade, 'notice', :duration => 1.5, :queue => :end )
	5	+ visual_effect( :appear, 'notice', :duration => 1.5, :to => 0.8, :queue => :end ) +
	6	+ 'setTimeout(function() { %s }, 5000)' % visual_effect( :fade, 'notice', :duration => 1.0, :from => 0.8, :queue => :end )
8	7	) %>
9	8	</div>
10	9	<% end %>
...	...
...	...	@@ -327,19 +327,10 @@ div.no_media_panel {
327	327	}
328	328
329	329	div#notice {
330		- background-color: #ffd;
331		- color: black;
332		- border: 1px solid #d3d7cf;
333		- -moz-border-radius: 5px;
334		-
335		- position: absolute;
336		- top: 33px;
337		- left: 10px;
338		- margin-left: 0px;
339		- padding: 5px;
	330	+ right: 50%;
	331	+ margin-right: -470px;
340	332	}
341	333
342		-
343	334	/* ==> blocks.css <== */
344	335
345	336	.block a {
...	...
...	...	@@ -126,17 +126,22 @@ a img {
126	126	top: 200px;
127	127	}
128	128
129		-/* Notice */
	129	+/* Notice box */
130	130
131	131	div#notice {
132		- z-index: 20;
	132	+ background-color: #000;
	133	+ color: white;
	134	+ -moz-border-radius: 15px;
	135	+ font-size: 16px;
	136	+ font-weight: bold;
	137	+ z-index: 100000;
	138	+ padding: 10px;
	139	+
	140	+ width: 300px;
	141	+ min-height: 60px;
133	142	position: absolute;
134		- top: 100px;
135		- left: 50%;
136		- margin-left: -200px;
137		- width: 400px;
138		- border: 1px solid #ddd;
139		- background: #ffd;
	143	+ top: 30px;
	144	+ right: 30px;
140	145	}
141	146
142	147	/* * * Generic Content Formating * * */
...	...