style: update notification look and feel (#14613)

gadjo/static/css/gadjo.scss

@@ -186,26 +186,47 @@ body[data-environment-label] span#applabel {
 /* notifications */
 
 ul.messages {
-	position: fixed;
-	width: 30em;
-	top: 8px;
-	right: 10px;
 	padding: 0;
-	z-index: 2000;
-	margin-top: 1em;
+	margin: 0;
 	list-style-type: none;
-	margin: auto;
-	background: #646464;
-	background: rgba(40, 40, 40, 0.95);
-	color: white;
-	text-shadow: 1px 1px 1px black;
-	border-radius: 10px;
-	box-shadow: 0 0 4px black;
-}
+	max-width: 100ex;
 
-ul.messages li {
-	padding: 1ex;
-	margin: 1ex;
+	li {
+		font-size: 110%;
+		background: #fafafa;
+		margin: 1ex 0;
+		padding: 1ex;
+		border: 1px solid transparent;
+		border-left-width: 25px;
+		&:before {
+			position: absolute;
+			left: 0;
+			width: 25px;
+			display: inline-block;
+			text-align: center;
+			font-family: FontAwesome;
+			color: white;
+		}
+		&.info {
+			&:before { content: "\f05a"; } /* info-circle */
+			border-color: #00b000;
+		}
+		&.warning {
+			&:before { content: "\f06a"; } /* exclamation-circle */
+			border-color: #ffb000;
+		}
+		&.error {
+			&:before { content: "\f071"; } /* exclamation-triangle */
+			border-color: #b00000;
+		}
+		.close {
+			float: right;
+			cursor: pointer;
+			font-weight: bold;
+			border: none;
+			color: inherit;
+		}
+	}
 }
 
 /* main content */

gadjo/static/js/gadjo.js

@@ -316,5 +316,12 @@ var gadjo_js = gadjo_js || {};
         var timestamp = ((new Date().getTime() / 1000) % 86400 ) / (86400 / 440);
         $('div#header').css('background-position', '0 -' + timestamp + 'px');
       }
+      $('.messages > li').each(function(idx, elem) {
+        var elem = $('<a aria-hidden="true" class="close">×</a>');
+        $(elem).on('click', function() {
+          $(this).parent('li').fadeOut('slow');
+        });
+        $(this).prepend(elem);
+      });
     });
 })();

gadjo/templates/gadjo/root.html

@@ -79,14 +79,6 @@
     <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
     {% endfor %}
 </ul>
-<script>
-(function () {
-    var $ = jQuery;
-    $(document).ready(function() {
-      $('.messages').delay(5000).fadeOut('slow');
-    });
-})();
-</script>
 {% endif %}
 {% endblock %}