Makes table pagination responsive

Media queries for medium screens

Adds entry to CHANGELOG

Rollback to previous design

Adds class for previous sibling

Fix removed class

Fixes after review

Fix scss linter

1 files changed, 43 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index b6f21fd8c91..2700d5db9f0 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -7,8 +7,51 @@
   .pagination {
     padding: 0;
   }
+
+  .gap,
+  .gap:hover {
+    background-color: $gray-light;
+    padding: 6px;
+    cursor: default;
+  }
 }
 
 .panel > .gl-pagination {
   margin: 0;
 }
+
+/**
+ * Small screen pagination
+ */
+
+@media (max-width: $screen-xs) {
+  .gl-pagination {
+    .pagination li a {
+      padding: 6px 14px;
+    }
+
+    .page {
+      display: none;
+
+      &.active {
+        display: inline;
+      }
+    }
+  }
+}
+
+/**
+ * Medium screen pagination
+ */
+@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+  .gl-pagination {
+    .page {
+      display: none;
+
+      &.active,
+      &.sibling {
+        display: inline;
+      }
+    }
+  }
+}