Auto resize the subscribers lists

public/css/mailtrain.css

@@ -25,6 +25,20 @@
     }
 }
 
+.highlight {
+    animation: highlight 0.5s;
+}
+
+@keyframes highlight {
+    0% {
+        background-color: rgba(230, 90, 10, 1.0);
+    }
+    100% {
+        background-color: rgba(255, 255, 255, 0);
+    }
+}
+
+#
 /* Supporting wider description lists */
 
 @media screen and (min-width: 768px) {

views/lists/view.hbs

@@ -207,14 +207,39 @@
 </div>
 {{#if statusColored }}
 <script>
+    (function(){
         function updateSubscribersRows () {
+            $('.dataTable thead tr').removeClass('highlight');
+            if ($(document).scrollTop() > 400) {
+                $('html, body').stop().animate({ scrollTop: 0 }, 300, function () {
+                    $('.dataTable thead tr').addClass('highlight');
+                });
+            }
+
             for (i = 0; i < 5; i++) {
                 $('.dataTable tr:has(span.subscriber-status-' + i + ')').addClass('subscriber-status-' + i);
             }
+            $(window).trigger('resize');
         }
+        function updateTableWidth () {
+            var container = $('.container');
+            var containerWidth = container.width();
+            var tableWidth = $('.dataTable').width();
+
+            console.log(containerWidth);
+            console.log(tableWidth);
+
+            if (tableWidth > containerWidth) {
+                container.css({ width: 'auto', 'max-width': tableWidth + 100 + 'px' });
+                $(window).off('resize', updateTableWidth);
+            }
+        }
+
         document.addEventListener("DOMContentLoaded", function (event) {
             updateSubscribersRows();
             $('body').on('DOMSubtreeModified', '.dataTables_info', updateSubscribersRows);
+            $(window).resize(updateTableWidth);
         });
+    })();
 </script>
 {{/if}}