Refactored messages.js

- Simplified code using a combination of CSS and JavaScript
- Stopped using jQuery
- Moved refactored code to `djangoproject.js`

This patch should bring no user-facing changes.

Refs django#1827

djangoproject/scss/_style.scss

@@ -3416,6 +3416,8 @@ ul.corporate-members li {
         color: $green-dark;
         border: 1px solid $green-dark;
         border-radius: 4px;
+        opacity: 1;
+        transition: opacity 400ms;
 
         &::before {
             @include fa-icon();
@@ -3427,6 +3429,10 @@ ul.corporate-members li {
             margin-right: 10px;
         }
 
+        &.fade-out {
+            opacity: 0;
+        }
+
         &.info {
             &::before {
                 content: $fa-var-info-circle;

djangoproject/static/js/djangoproject.js

@@ -11,3 +11,14 @@ document.querySelectorAll('#doc-versions a').forEach(function (el) {
     this.href = this.href.split('#')[0] + window.location.hash;
   });
 });
+
+// Fade out and remove message elements when close icon is clicked
+document.querySelectorAll('.messages li .close').forEach(function (el) {
+  el.addEventListener('click', function (e) {
+    this.parentElement.classList.add('fade-out');
+
+    setTimeout(function () {
+      el.parentElement.style.display = 'none';
+    }, 400);
+  });
+});

djangoproject/static/js/main.js

@@ -57,10 +57,6 @@ define(function () {
     mods.push('mod/corporate-member-join');
   }
 
-  if (hasClass('messages')) {
-    mods.push('mod/messages');
-  }
-
   if (hasClass('code-block-caption') || hasClass('snippet')) {
     mods.push('mod/clippify');
   }