Tweaking logic for alert bar to make messages more human readable for all use cases.

app/assets/stylesheets/darkswarm/animations.sass

@@ -187,7 +187,25 @@ product.animate-repeat
      it as hidden. */
     display: block !important
 
-  
+
+.animate-show
+  opacity: 1 !important
+  -webkit-transition: all 300ms ease-in-out
+  -moz-transition: all 300ms ease-in-out
+  -o-transition: all 300ms ease-in-out
+  transition: all 300ms ease-in-out
+
+  &.ng-hide
+    opacity: 0 !important
+ 
+  // &.ng-hide-add-active, &.ng-hide-remove-active
+
+  &.ng-hide-add, &.ng-hide-remove
+    /* IMPORTANT: this needs to be here to make it visible during the animation
+     since the .ng-hide class is already on the element rendering
+     it as hidden. */
+    display: block !important
+
  
  
 

app/views/shop/products/_form.html.haml

@@ -14,8 +14,10 @@
             {{ appliedPropertiesList() }}
           %span.applied-taxons
             {{ appliedTaxonsList() }}
-          %span.applied-search{ ng: { hide: "!query"} }
-            with {{ query }}
+          %span{ ng: { hide: "!query"} }
+            %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
+              with
+            %span.applied-search "{{ query }}"
   .row
     .small-12.medium-6.large-5.columns
       %input#search.text{"ng-model" => "query",