RanchiMall/algorandwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add icons to transaction filter buttons and enhance their responsive styling.

Browse Source
This commit is contained in:
void-57 2025-12-05 14:23:09 +05:30
parent 93d25d6d33
commit c96eb7cdea
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -267,16 +267,19 @@
<!-- Transaction History Section --> <!-- Transaction History Section -->
<div id="transactionFilterSection" class="transaction-section" style="display: none;"> <div id="transactionFilterSection" class="transaction-section" style="display: none;">
<div class="transaction-header"> <div class="transaction-header">
<h3><i class="fas fa-history"></i> Transactions</h3> <h3>Transactions</h3>
<div class="transaction-filters"> <div class="transaction-filters">
<button class="filter-btn active" data-filter="all" onclick="filterTransactions('all')"> <button class="filter-btn active" data-filter="all" onclick="filterTransactions('all')" title="All Transactions">
All <i class="fas fa-exchange-alt"></i>
<span class="filter-text">All</span>
</button> </button>
<button class="filter-btn" data-filter="received" onclick="filterTransactions('received')"> <button class="filter-btn" data-filter="received" onclick="filterTransactions('received')" title="Received">
Received <i class="fas fa-arrow-down"></i>
<span class="filter-text">Received</span>
</button> </button>
<button class="filter-btn" data-filter="sent" onclick="filterTransactions('sent')"> <button class="filter-btn" data-filter="sent" onclick="filterTransactions('sent')" title="Sent">
Sent <i class="fas fa-arrow-up"></i>
<span class="filter-text">Sent</span>
</button> </button>
</div> </div>
</div> </div>

25
style.css
View File

@ -3175,6 +3175,13 @@ body:has(.header) .container {
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-btn i {
font-size: 0.9rem;
} }
.filter-btn:hover { .filter-btn:hover {
@ -3200,12 +3207,24 @@ body:has(.header) .container {
} }
.transaction-filters { .transaction-filters {
gap: 0.35rem; gap: 0.5rem;
} }
.filter-btn { .filter-btn {
padding: 0.4rem 0.6rem; padding: 0.5rem 0.6rem;
font-size: 0.75rem; font-size: 0.85rem;
border-radius: 0.35rem; border-radius: 0.35rem;
gap: 0;
min-width: 38px;
justify-content: center;
}
.filter-btn i {
font-size: 0.85rem;
}
/* Hide text on mobile, show only icons */
.filter-btn .filter-text {
display: none;
} }
} }