Drop ID

app/assets/stylesheets/_flash_messages.scss

@@ -1,4 +1,4 @@
-#flash-body {
+.flash-body {
   left: 0;
   position: fixed;
   text-align: center;
@@ -7,9 +7,9 @@
   width: 100%;
   &.expose {  @include animation(expose, 10s) }
 
-  #flash-message {
+  .flash-message {
     border-radius: 0;
-    box-shadow: $card-shadow;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
     display: inline-block;
     font-weight: bold;
     max-width: 800px;

app/assets/stylesheets/animations.scss

@@ -1,8 +1,8 @@
 // flash message animations - header height is about 50px
 @keyframes expose {
   0% { top: -100px; }
-  15% { top: 44px; }
+  12% { top: 50px; }
-  85% { top: 44px; }
+  88% { top: 50px; }
   100% { top: -100px; }
 }
 

app/assets/templates/flash_messages_tpl.jst.hbs

@@ -1,5 +1,5 @@
-<div id="flash-body" class="expose">
+<div class="flash-body expose">
-  <div id="flash-message" class="alert {{ alertLevel }}">
+  <div class="flash-message alert {{ alertLevel }}">
     {{ message }}
   </div>
 </div>

app/helpers/layout_helper.rb

@@ -67,15 +67,9 @@ module LayoutHelper
 
   def flash_messages
     flash.map do |name, msg|
-      klass = if name == "alert"
+      klass = flash_class name
-                "warning"
+      content_tag(:div, msg, class: "flash-body expose") do
-              elsif name == "error"
+        content_tag(:div, msg, class: "flash-message message alert alert-#{klass}")
-                "danger"
-              else
-                "success"
-              end
-      content_tag(:div, msg, id: "flash-body", class: "expose") do
-        content_tag(:div, msg, id: "flash-message", class: "message alert alert-#{klass}")
       end
     end.join(' ').html_safe
   end

app/helpers/sessions_helper.rb

@@ -17,6 +17,6 @@ module SessionsHelper
   end
 
   def flash_class(name)
-    {notice: "success", alert: "warning", error: "danger"}[name.to_sym]
+    {notice: "success", alert: "danger", error: "danger"}[name.to_sym]
   end
 end

app/views/sessions/new.mobile.haml

@@ -10,7 +10,7 @@
   #main_stream.stream
     - flash.each do |name, msg|
       .expose#flash-container
-        #flash-message{class: "message alert alert-#{flash_class name}"}
+        .flash-message{class: "message alert alert-#{flash_class name}"}
           = msg
 
     #login_form

features/support/application_cuke_helpers.rb

@@ -8,7 +8,7 @@ module ApplicationCukeHelpers
   end
 
   def flash_message_alert?
-    flash_message(selector: "warning").visible?
+    flash_message(selector: "danger").visible?
   end
 
   def flash_message_containing?(text)
@@ -18,7 +18,7 @@ module ApplicationCukeHelpers
   def flash_message(opts={})
     selector = opts.delete(:selector)
     selector &&= ".alert-#{selector}"
-    find(selector || "#flash-message", {match: :first}.merge(opts))
+    find(selector || ".flash-message", {match: :first}.merge(opts))
   end
 
   def confirm_form_validation_error(element)

spec/javascripts/app/views/aspect_create_view_spec.js

@@ -117,7 +117,7 @@ describe("app.views.AspectCreate", function() {
         it("should display a flash message", function() {
           this.view.createAspect();
           jasmine.Ajax.requests.mostRecent().respondWith(this.response);
-          expect(this.view.$("#flash-message")).toBeSuccessFlashMessage(
+          expect(this.view.$(".flash-message")).toBeSuccessFlashMessage(
             Diaspora.I18n.t("aspects.create.success", {name: "new name"})
           );
         });
@@ -140,7 +140,7 @@ describe("app.views.AspectCreate", function() {
         it("should display a flash message", function() {
           this.view.createAspect();
           jasmine.Ajax.requests.mostRecent().respondWith(this.response);
-          expect(this.view.$("#flash-message")).toBeErrorFlashMessage(
+          expect(this.view.$(".flash-message")).toBeErrorFlashMessage(
             Diaspora.I18n.t("aspects.create.failure")
           );
         });

spec/javascripts/app/views/aspect_membership_view_spec.js

@@ -38,7 +38,7 @@ describe("app.views.AspectMembership", function(){
       this.newAspect.trigger('click');
       jasmine.Ajax.requests.mostRecent().respondWith(success);
 
-      expect(this.view.$("#flash-message")).toBeSuccessFlashMessage(
+      expect(this.view.$(".flash-message")).toBeSuccessFlashMessage(
         Diaspora.I18n.t("aspect_dropdown.started_sharing_with", {name: this.personName})
       );
     });
@@ -58,7 +58,7 @@ describe("app.views.AspectMembership", function(){
       this.newAspect.trigger('click');
       jasmine.Ajax.requests.mostRecent().respondWith(resp_fail);
 
-      expect(this.view.$("#flash-message")).toBeErrorFlashMessage(
+      expect(this.view.$(".flash-message")).toBeErrorFlashMessage(
         Diaspora.I18n.t("aspect_dropdown.error", {name: this.personName})
       );
     });
@@ -82,7 +82,7 @@ describe("app.views.AspectMembership", function(){
       this.oldAspect.trigger('click');
       jasmine.Ajax.requests.mostRecent().respondWith(success);
 
-      expect(this.view.$("#flash-message")).toBeSuccessFlashMessage(
+      expect(this.view.$(".flash-message")).toBeSuccessFlashMessage(
         Diaspora.I18n.t("aspect_dropdown.stopped_sharing_with", {name: this.personName})
       );
     });
@@ -102,7 +102,7 @@ describe("app.views.AspectMembership", function(){
       this.oldAspect.trigger('click');
       jasmine.Ajax.requests.mostRecent().respondWith(resp_fail);
 
-      expect(this.view.$("#flash-message")).toBeErrorFlashMessage(
+      expect(this.view.$(".flash-message")).toBeErrorFlashMessage(
         Diaspora.I18n.t("aspect_dropdown.error_remove", {name: this.personName})
       );
     });

spec/javascripts/app/views/comment_stream_view_spec.js

@@ -61,7 +61,7 @@ describe("app.views.CommentStream", function(){
         this.request.respondWith({status: 500});
 
         expect(this.view.$(".comment-content p").text()).not.toEqual("a new comment");
-        expect(this.view.$("#flash-message")).toBeErrorFlashMessage("posting failed!");
+        expect(this.view.$(".flash-message")).toBeErrorFlashMessage("posting failed!");
       });
     });
 

spec/javascripts/app/views/contact_view_spec.js

@@ -88,7 +88,7 @@ describe("app.views.Contact", function(){
       jasmine.Ajax.requests.mostRecent().respondWith({
         status: 400 // fail
       });
-      expect(this.view.$("#flash-message")).toBeErrorFlashMessage(
+      expect(this.view.$(".flash-message")).toBeErrorFlashMessage(
         Diaspora.I18n.t( "contacts.error_add", {name: this.model.get("person").name} )
       );
     });
@@ -151,7 +151,7 @@ describe("app.views.Contact", function(){
       jasmine.Ajax.requests.mostRecent().respondWith({
         status: 400 // fail
       });
-      expect(this.view.$("#flash-message")).toBeErrorFlashMessage(
+      expect(this.view.$(".flash-message")).toBeErrorFlashMessage(
         Diaspora.I18n.t( "contacts.error_remove", {name: this.model.get("person").name})
       );
     });

spec/javascripts/app/views/flash_messages_view-spec.js

@@ -13,21 +13,21 @@ describe("app.views.FlashMessages", function(){
 
   describe("render", function(){
     beforeEach(function(){
-      spec.content().html("<div id='flash-container'/>");
+      spec.content().html("<div class='flash-container'/>");
-      flashMessages = new app.views.FlashMessages({ el: $("#flash-container") });
+      flashMessages = new app.views.FlashMessages({ el: $(".flash-container") });
     });
 
     it("renders a success message", function(){
       flashMessages.success("success!");
-      expect(flashMessages.$("#flash-body")).toHaveClass("expose");
+      expect(flashMessages.$(".flash-body")).toHaveClass("expose");
-      expect($("#flash-message")).toHaveClass("alert-success");
+      expect($(".flash-message")).toHaveClass("alert-success");
-      expect($("#flash-message").text().trim()).toBe("success!");
+      expect($(".flash-message").text().trim()).toBe("success!");
     });
     it("renders an error message", function(){
       flashMessages.error("error!");
-      expect(flashMessages.$("#flash-body")).toHaveClass("expose");
+      expect(flashMessages.$(".flash-body")).toHaveClass("expose");
-      expect($("#flash-message")).toHaveClass("alert-danger");
+      expect($(".flash-message")).toHaveClass("alert-danger");
-      expect($("#flash-message").text().trim()).toBe("error!");
+      expect($(".flash-message").text().trim()).toBe("error!");
     });
   });
 });

spec/javascripts/app/views/pod_entry_view_spec.js

@@ -72,13 +72,13 @@ describe("app.views.PodEntry", function() {
     it("renders a success flash message", function() {
       this.view.recheckPod();
       jasmine.Ajax.requests.mostRecent().respondWith(ajaxSuccess);
-      expect(this.view.$("#flash-message")).toBeSuccessFlashMessage();
+      expect(this.view.$(".flash-message")).toBeSuccessFlashMessage();
     });
 
     it("renders an error flash message", function() {
       this.view.recheckPod();
       jasmine.Ajax.requests.mostRecent().respondWith(ajaxFail);
-      expect(this.view.$("#flash-message")).toBeErrorFlashMessage();
+      expect(this.view.$(".flash-message")).toBeErrorFlashMessage();
     });
 
     it("sets the appropriate CSS class", function() {