Improve paginator 'show all' layout

jet/static/jet/css/_changelist.scss

@@ -215,44 +215,54 @@
     display: inherit;
   }
 
-  span:not(.pages-wrapper), a {
-    font-size: 14px;
-    padding: 6px 10px;
+  .pages-wrapper {
+    margin-left: 10px;
     display: inline-block;
+    margin-bottom: 5px;
 
-    &:first-child {
-      border-radius: 4px 0 0 4px;
+    @include for-mobile {
+      margin-left: 0;
     }
 
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-    }
+    span, a {
+      font-size: 14px;
+      padding: 6px 10px;
+      display: inline-block;
 
-    &:first-child:last-child {
-      border-radius: 4px;
-    }
-  }
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
 
-  span:not(.pages-wrapper) {
-    background-color: $button-active-background-color;
-    color: $button-active-text-color;
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
 
-    &.disabled {
-      background-color: $button-background-color;
-      color: $button-text-color;
+      &:first-child:last-child {
+        border-radius: 4px;
+      }
     }
-  }
 
-  a:not(.showall) {
-    &:link, &:visited {
-      background-color: $button-background-color;
-      color: $button-text-color;
-      text-decoration: none;
+    span {
+      background-color: $button-active-background-color;
+      color: $button-active-text-color;
+
+      &.disabled {
+        background-color: $button-background-color;
+        color: $button-text-color;
+      }
     }
 
-    &:focus, &:hover {
-      background-color: $button-hover-background-color;
-      color: $button-hover-text-color;
+    a {
+      &:link, &:visited {
+        background-color: $button-background-color;
+        color: $button-text-color;
+        text-decoration: none;
+      }
+
+      &:focus, &:hover {
+        background-color: $button-hover-background-color;
+        color: $button-hover-text-color;
+      }
     }
   }
 
@@ -262,16 +272,6 @@
     }
   }
 
-  .pages-wrapper {
-    margin-left: 10px;
-    display: inline-block;
-    margin-bottom: 5px;
-
-    @include for-mobile {
-      margin-left: 0;
-    }
-  }
-
   .label  {
     padding: 8px 0;
   }

jet/static/jet/js/src/layout-updaters/paginator.js

@@ -18,7 +18,7 @@ PaginatorUpdater.prototype = {
 
                 if ($.trim($node.text()) == '...') {
                     $node.wrap($('<span>').addClass('disabled'));
-                } else {
+                } else if ($.trim($node.text()) == '') {
                     $node.remove();
                 }
             }
@@ -30,7 +30,8 @@ PaginatorUpdater.prototype = {
         var $pageNodes = $([]);
 
         this.$paginator.contents().each(function() {
-            var pageNode = this.tagName == 'A' || this.tagName == 'SPAN';
+            var $node = $(this);
+            var pageNode = (this.tagName == 'A' && !$node.hasClass('showall')) || this.tagName == 'SPAN';
 
             if (pageNode) {
                 foundPage = true;
@@ -41,8 +42,6 @@ PaginatorUpdater.prototype = {
             }
 
             if (pageNode && !pagesEnded) {
-                var $node = $(this);
-
                 $node.detach();
                 $pageNodes = $pageNodes.add($node);
             } else {
@@ -57,13 +56,12 @@ PaginatorUpdater.prototype = {
         var $nodes = $([]);
 
         this.$paginator.contents().each(function() {
-            var pageNode = this.tagName == 'A' || this.tagName == 'SPAN';
+            var $node = $(this);
+            var pageNode = (this.tagName == 'A' && !$node.hasClass('showall')) || this.tagName == 'SPAN';
 
             if (pageNode) {
                 foundPage = true;
             } else if (foundPage && !pageNode && this.tagName != 'INPUT') {
-                var $node = $(this);
-
                 $node.detach();
                 $nodes = $nodes.add($node);
             }