Bugfix: Pagination in transactions and coin selection (cryptoadvance#…

…1778)

* pagination: bugfix + prettify
* make paginationContainer disappear if there is only one page

src/cryptoadvance/specter/templates/includes/coin_selection.html

@@ -2,8 +2,7 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
     <style>
     </style>
-    <span class="toggle_coinselection" style="cursor: pointer;">{{ _("Coin selection") }} {% if show_advanced_settings %}&#9660;{% else %}&#9654;{% endif %}</span>
-    <br>
+    <span class="toggle_coinselection" style="cursor: pointer; margin-bottom: 5px; display: block">{{ _("Coin selection") }} {% if show_advanced_settings %}&#9660;{% else %}&#9654;{% endif %}</span>
     <div class="coinselection_div" style="margin: auto; max-width: 90%; display: none;">
         <div class="errorMessagesDiv">
             <message-box type="error" style="display: none;"></message-box>

src/cryptoadvance/specter/templates/includes/page-limit-select.html

@@ -1,26 +1,34 @@
 <div style="display: flex; align-items: center;">
     <style>
         .page-limit-label {
-            float: left;
+            flex: 1 0 auto;
         }
         .page-limit-fieldset {
-            float: left;
             border: none;
             margin-top: 4px; /*to better vertically align on tx history / utxo list overview*/
-            display: inline;
         }
-        .page-limit-fieldset > select {
-            min-width: 5em;
+        .page-limit-select {
+            background-color: var(--cmap-bg-lighter);
+            background-repeat: no-repeat;
+            appearance: none; /* Remove default arrow */
+            background-image: url(/../../static/img/down-arrow.svg);
+            background-position: right;
+            background-size: 1.3em;
+            min-width: 80px;
+        }
+        .page-limit-option {
+            background-color: var(--cmap-bg-lighter);
         }
     </style>
     <span class="page-limit-label">{{ _("Page limit") }}: </span>
     <fieldset class="page-limit-fieldset">
         <select class="page-limit-select">
-            <option value="10">10</option>
-            <option value="25" selected>25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="0">{{ _("All") }}</option>
+            <option value="" class="page-limit-option" disabled="disabled">Entries</option>
+            <option value="10" class="page-limit-option">10</option>
+            <option value="25" selected class="page-limit-option">25</option>
+            <option value="50" class="page-limit-option">50</option>
+            <option value="100" class="page-limit-option">100</option>
+            <option value="0" class="page-limit-option">{{ _("All") }}</option>
         </select>
     </fieldset>
 </div>

src/cryptoadvance/specter/templates/includes/tx-table.html

@@ -87,10 +87,8 @@
             border: 1.5px solid var(--cmap-border);
             z-index: 3;
         }
-        .page-limit-div {
-            flex: 0 0 200px;
-            display: flex;
-            justify-content: space-around;
+        .page-limit-label {
+            margin-left: 5px;
         }
         .search {
             margin: auto;
@@ -239,15 +237,13 @@
     </nav>
     <div class="pagination-container">
         <a class="pagination-back pagination-arrow pagination-disabled">&#8249;</a>
-        {{ _("Page") }} <input class="pagination-idx" type="number" step="1" min="1" value="1"></input><span class="pagination-counter"></span>
+        {{ _("Page") }} &nbsp;<input class="pagination-idx" type="number" step="1" min="1" value="1"></input><span class="pagination-counter"></span>
         <a class="pagination-next pagination-arrow pagination-disabled">&#8250;</a>
         <br>
     </div>
     <div class="search-container">
         <!--Left part of the toolbar-->
-        <div class="page-limit-div">
-            {% include "includes/page-limit-select.html" %}
-        </div>
+        {% include "includes/page-limit-select.html" %}
          <!--Middle part of the toolbar-->
         <div style="flex-grow: 0.5">
             <input class="search" type="text" placeholder="Search..."></input>
@@ -469,7 +465,7 @@ <h1>{{ _("Export transactions to CSV") }}</h1>
 
             // Initialize default sort, search, limit and page parameters
             this.idx = 0;
-            this.limit = 50;
+            this.limit = 25;
             this.search = "";
             this.sortby = "time";
             this.sortdir = "desc";
@@ -942,9 +938,11 @@ <h1>{{ _("Export transactions to CSV") }}</h1>
                 // If there are multiple pages show the pagination bar
                 if (this.pageCount > 1) {
                     this.paginationContainer.classList.remove('hidden');
+                    this.paginationContainer.classList.add('pagination-container');
                     this.paginationCounter.innerText = `of ${this.pageCount}`;
                     this.paginationIdxInput.max = this.pageCount;
                 } else {
+                    this.paginationContainer.classList.remove('pagination-container');
                     this.paginationContainer.classList.add('hidden');
                 }