(add) pagination

apps/block_scout_web/assets/css/app.scss

@@ -37,16 +37,17 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/progress";
 
 // Bootstrap Components
+@import "node_modules/bootstrap/scss/alert";
+@import "node_modules/bootstrap/scss/badge";
+@import "node_modules/bootstrap/scss/card";
 @import "node_modules/bootstrap/scss/dropdown";
-@import "node_modules/bootstrap/scss/transitions";
-@import "node_modules/bootstrap/scss/tables";
+@import "node_modules/bootstrap/scss/forms";
 @import "node_modules/bootstrap/scss/nav";
 @import "node_modules/bootstrap/scss/navbar";
-@import "node_modules/bootstrap/scss/card";
-@import "node_modules/bootstrap/scss/forms";
+@import "node_modules/bootstrap/scss/pagination";
+@import "node_modules/bootstrap/scss/tables";
 @import "node_modules/bootstrap/scss/tooltip";
-@import "node_modules/bootstrap/scss/badge";
-@import "node_modules/bootstrap/scss/alert";
+@import "node_modules/bootstrap/scss/transitions";
 
 // Code highlight
 @import "node_modules/highlight.js/styles/default";

apps/block_scout_web/assets/css/components/_pagination.scss

@@ -1,35 +1,42 @@
+$pagination-page-link-background: #f5f6fa !default;
+$pagination-page-link-color: #a3a9b5 !default;
+$pagination-page-link-background-active: $primary !default;
+$pagination-page-link-color-active: #fff !default;
+
 .pagination {
-  display: block;
+  margin: 0;
+  padding: 30px;
 
-  &-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-  }
+  .page-item {
+    margin: 0 10px 0 0;
 
-  li {
-    font-size: 13px;
-    display: inline-block;
-    margin: 0;
-    margin-right: explorer-size(-3);
-    &:last-of-type { margin-right: 0; }
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
-  &-link {
-    display: block;
-    line-height: 1;
-    color: $gray-400;
-    text-decoration: none;
-    padding: 7px 9px;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
+  .page-link {
+      background-color: $pagination-page-link-background;
+      border: 1px solid $pagination-page-link-background;
+      color: $pagination-page-link-color;
+      display: block;
+      line-height: 1.25;
+      margin: 0;
+      padding: 0.5rem 0.75rem;
+      position: relative;
 
-    &:hover,
-    &.is-current {
-      border-color: $primary;
-      background: $primary;
-      color: $white;
-    }
+      &:hover {
+        background-color: darken($pagination-page-link-background, 5%);
+        border-color: darken($pagination-page-link-background, 5%);
+      }
+
+      .active & {
+        &,
+        &:hover {
+          background-color: $pagination-page-link-background-active;
+          border-color: $pagination-page-link-background-active;
+          color: $pagination-page-link-color-active;
+        }
+      }
   }
-}
+}

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -53,7 +53,8 @@ $stakes-table-cell-separation: 25px !default;
 
 .stakes-td-order {
     min-width: 50px;
-    text-align: center;
+    padding-left: 30px;
+    text-align: left;
 }
 
 .stakes-td-link-style {

apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination.html.eex

@@ -0,0 +1,9 @@
+<ul class="pagination">
+    <li class="page-item"><a class="page-link" href="#"><</a></li>
+    <li class="page-item active"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">...</a></li>
+    <li class="page-item"><a class="page-link" href="#">12</a></li>
+    <li class="page-item"><a class="page-link" href="#">></a></li>
+</ul>

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex

@@ -19,7 +19,7 @@
             </tr>
             <%= end %>
             <%= if not @empty_content do %>
-            <tr>
+            <tr class="stakes-tr-banned">
                 <td class="stakes-td"><div class="stakes-td-order">1</div></td>
                 <td class="stakes-td">
                     <%=
@@ -41,9 +41,7 @@
                 <td class="stakes-td">2.56%</td>
                 <td class="stakes-td"><span class="stakes-td-link-style">3500</span></td>
                 <td class="stakes-td">
-                    <div class="stakes-controls">
-                        <%= render BlockScoutWeb.StakesView, "_stakes_control_stake.html" %>
-                    </div>
+                    <span class="stakes-td-banned-info">Banned until block #345345 (15 May 2020)</span>
                 </td>
             </tr>
             <%= for i <- 2..5 do %>
@@ -80,4 +78,8 @@
             <%= end %>
         </tbody>
     </table>
-</div>
+</div>
+<%=
+    render BlockScoutWeb.CommonComponentsView,
+    "_pagination.html"
+%>