From: Tom Hughes <tom@compton.nu>
Date: Wed, 11 Feb 2015 21:26:22 +0000 (+0000)
Subject: Wrap flash messages in a div instead of a paragraph
X-Git-Tag: live~4268
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/27179c870656fdd7adbc42e8b76fec0227594be9

Wrap flash messages in a div instead of a paragraph

This allows more complex HTML in the message, closing #896.
---

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 42616fadb..e08b9ab87 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1746,19 +1746,26 @@ header .search_form {
 
 /* Rules for "flash" notice boxes shown at the top of the content area */
 
-.error {
+.flash {
   padding: $lineheight;
-  background-color: #ff7070;
-}
 
-.warning {
-  padding: $lineheight;
-  background-color: #ffe0cc;
-}
+  &.error {
+    background-color: #ff7070;
+  }
 
-.notice {
-  padding: $lineheight;
-  background-color: #CBEEA7;
+  &.warning {
+    background-color: #ffe0cc;
+  }
+
+  &.notice {
+    background-color: #CBEEA7;
+  }
+
+  div.message {
+    display: inline-block;
+    margin-left: $lineheight / 2;
+    vertical-align: middle;
+  }
 }
 
 /* Rules for highlighting fields with rails validation errors */
diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index 51ef3fe41..5a4288c4d 100644
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -1,20 +1,20 @@
 <% if flash[:error] %>
-  <p class="error">
+  <div class="flash error">
     <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
-    <%= raw flash[:error] %>
-  </p>
+    <div class="message"><%= raw flash[:error] %></div>
+  </div>
 <% end %>
 
 <% if flash[:warning] %>
-  <p class="warning">
+  <div class="flash warning">
     <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
-    <%= raw flash[:warning] %>
-  </p>
+    <div class="message"><%= raw flash[:warning] %></div>
+  </div>
 <% end %>
 
 <% if flash[:notice] %>
-  <p class="notice">
+  <div class="flash notice">
     <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
-    <%= raw flash[:notice] %>
-  </p>
+    <div class="message"><%= raw flash[:notice] %></div>
+  </div>
 <% end %>
diff --git a/test/controllers/message_controller_test.rb b/test/controllers/message_controller_test.rb
index 1476831cf..ad604174d 100644
--- a/test/controllers/message_controller_test.rb
+++ b/test/controllers/message_controller_test.rb
@@ -149,7 +149,7 @@ class MessageControllerTest < ActionController::TestCase
             :message => { :title => "Test Message", :body => "Test message body" }
           assert_response :success
           assert_template "new"
-          assert_select "p.error", /wait a while/
+          assert_select ".error", /wait a while/
         end
       end
     end