GlcoinCore/specter-desktop
1
0
Fork 0
mirror of https://github.com/cryptoadvance/specter-desktop.git synced 2026-08-13 12:33:29 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Bugfix: Pagination in transactions and coin selection (#1778)

Browse source 
* pagination: bugfix + prettify
* make paginationContainer disappear if there is only one page
This commit is contained in:
Manolis Mandrapilias 2022-07-04 08:47:49 +02:00 • committed by GitHub
parent 90b661cb84
commit 5c5360e4b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/cryptoadvance/specter/static/img/down-arrow.svg Normal file
View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<polygon style="fill:#687492;" points="123.586,247.172 123.586,388.414 256,512 388.414,388.414 388.414,247.172 256,379.586 "/>
<polygon style="fill:#687492;" points="256,132.414 123.586,0 123.586,141.241 256,264.828 388.414,141.241 388.414,0 "/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 794 B

3
src/cryptoadvance/specter/templates/includes/coin_selection.html
View file

@ -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>

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

@ -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>

16
src/cryptoadvance/specter/templates/includes/tx-table.html
View file

@ -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 @@
// 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 @@
// 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');
}