Wrap flash messages in a div instead of a paragraph
authorTom Hughes <tom@compton.nu>
Wed, 11 Feb 2015 21:26:22 +0000 (21:26 +0000)
committerTom Hughes <tom@compton.nu>
Wed, 11 Feb 2015 21:32:56 +0000 (21:32 +0000)
This allows more complex HTML in the message, closing #896.

app/assets/stylesheets/common.scss
app/views/layouts/_flash.html.erb
test/controllers/message_controller_test.rb

index 42616fadbab6e9350f48dc76b454b2acd3ce24b9..e08b9ab87913987dea8987a6f78928501c260148 100644 (file)
@@ -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 */
index 51ef3fe41548d202bec942e39748e39b79a4e940..5a4288c4d2c0ed250fe8e23c06cc9d6fb83b246b 100644 (file)
@@ -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 %>
index 1476831cf4dd29923262fe16daf1a42895ee4087..ad604174d952808e42f4e3ea94b8d9ec4ed487cc 100644 (file)
@@ -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