(add) pagination component to transactions and blocks sections.

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

@@ -67,7 +67,7 @@ $card-background-1-text-color: #fff !default;
 }
 
 .card-subtitle {
-  color: #aaa;
+  color: #333;
   font-size: 12px;
   font-weight: normal;
   line-height: 1.2;

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

@@ -17,6 +17,10 @@ $pagination-page-link-color-active: #fff !default;
   display: flex;
   justify-content: space-between;
 
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+
   &.position-bottom {
     padding-top: 30px;
   }
@@ -33,6 +37,10 @@ $pagination-page-link-color-active: #fff !default;
     font-weight: 600;
     line-height: 1.2;
 
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 15px;
+    }
+
     select {
       margin: 0 10px;
     }
@@ -43,7 +51,7 @@ $pagination-page-link-color-active: #fff !default;
     padding: 0;
 
     .page-item {
-      margin: 0 10px 0 0;
+      margin: 0 5px 0 0;
 
       &:last-child {
         margin-right: 0;
@@ -69,9 +77,11 @@ $pagination-page-link-color-active: #fff !default;
       font-weight: 600;
       height: 24px;
       margin: 0;
-      padding: 0 10px;
+      padding: 0 8px;
       position: relative;
       user-select: none;
+      text-align: center;
+      white-space: nowrap;
 
       &:not(.no-hover):hover {
         @include pagination-container-base($pagination-page-link-background-active, $pagination-page-link-color-active);

apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex

@@ -1,8 +1,6 @@
 <section class="container">
   <div class="card">
     <div class="card-body">
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %>
-
       <h1 class="card-title margin-bottom-0"><%= gettext "Addresses" %></h1>
       <p class="card-subtitle">
         <%= gettext "Showing " %>
@@ -14,6 +12,8 @@
         <%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %>
       </p>
 
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %>
+
       <div data-selector="top-addresses-list">
         <%= for {{address, tx_count}, index} <- Enum.with_index(@address_tx_count_pairs, 1) do %>
           <%= render "_tile.html",

apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex

@@ -6,7 +6,11 @@
           <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer blocks" %></a>
         </div>
       </div>
+
       <h1 class="card-title"><%= gettext("%{block_type}s", block_type: @block_type) %></h1>
+
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
       <div data-loading-message class="tile tile-muted text-center mt-3">
         <span class="loading-spinner-small mr-2">
           <span class="loading-spinner-block-1"></span>
@@ -18,10 +22,15 @@
       <div data-empty-response-message style="display: none;">
           <span><%= gettext "There are no blocks." %></span>
       </div>
-      </span>
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-          <%= gettext("Older") %>
-        </a>
+
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
+      <!--
+      <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
+        <%= gettext("Older") %>
+      </a>
+      -->
+
       <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
         <span class="loading-spinner-small mr-2">
           <span class="loading-spinner-block-1"></span>
@@ -29,6 +38,7 @@
         </span>
         <%= gettext("Loading") %>...
       </div>
+
     </div>
   </div>
 </section>

apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex

@@ -7,6 +7,9 @@
         <span data-selector="transaction-pending-count"><%= Cldr.Number.to_string!(@pending_transaction_count, format: "#,###") %></span>
         <%= gettext("Pending Transactions") %>
       </p>
+
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
@@ -33,9 +36,15 @@
         </span>
         <%= gettext("Loading") %>...
       </div>
+
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
+      <!--
       <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
         <%= gettext("Older") %>
       </a>
+      -->
+
       <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
         <span class="loading-spinner-small mr-2">
           <span class="loading-spinner-block-1"></span>

apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex

@@ -7,6 +7,9 @@
         <span data-selector="transaction-count"><%= Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %></span>
         <%= gettext("Validated Transactions") %>
       </p>
+
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
@@ -40,9 +43,13 @@
 
       <div data-selector="transactions-list" data-items></div>
 
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+
+      <!--
       <a href="#" data-next-page-button class="button button-secondary button-small float-right mt-4" style="display: none;">
         <%= gettext("Older") %>
       </a>
+      -->
 
       <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
         <span class="loading-spinner-small mr-2">