fix: wallet page layout - sticky sidebar with scroll, full-width owner summary below
- Sidebar: sticky with height=100vh, search field, internal scroll for user list - Owner Summary: full-width below user/wallet section, not inside right column - Wallet main: normal flow scrolling, not fixed height
This commit is contained in:
@@ -355,7 +355,7 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
max-height: calc(100vh - 2rem);
|
height: calc(100vh - 2rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -438,10 +438,19 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-section {
|
.wallet-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallet-bottom {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
border-top: 2px solid var(--border);
|
}
|
||||||
|
|
||||||
|
.stats-section {
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
|
border-top: 2px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-section h2 {
|
.stats-section h2 {
|
||||||
|
|||||||
@@ -169,28 +169,30 @@ export function renderWalletLayout(users, selectedUser, wallets, stats, seedPhra
|
|||||||
</div>` : '';
|
</div>` : '';
|
||||||
|
|
||||||
const content = `
|
const content = `
|
||||||
<div class="wallet-layout">
|
<div class="wallet-page">
|
||||||
<aside class="wallet-sidebar">
|
<div class="wallet-layout">
|
||||||
<div class="wallet-sidebar-header">
|
<aside class="wallet-sidebar">
|
||||||
<h3>Users</h3>
|
<div class="wallet-sidebar-header">
|
||||||
<input type="text" id="user-search" placeholder="Search by name or ID..." class="wallet-search" autocomplete="off">
|
<h3>Users</h3>
|
||||||
</div>
|
<input type="text" id="user-search" placeholder="Search by name or ID..." class="wallet-search" autocomplete="off">
|
||||||
<div class="wallet-user-list" id="user-list">${userListHtml || '<p class="muted">No users</p>'}</div>
|
</div>
|
||||||
</aside>
|
<div class="wallet-user-list" id="user-list">${userListHtml || '<p class="muted">No users</p>'}</div>
|
||||||
<section class="wallet-main">
|
</aside>
|
||||||
${selectedUser ? `
|
<section class="wallet-main">
|
||||||
<h2>${escapeHtml(selectedUser.username || 'User #' + selectedUser.id)}
|
${selectedUser ? `
|
||||||
<span class="muted" style="font-weight:normal;font-size:0.85rem;"> — ${selectedUser.telegram_id}</span>
|
<h2>${escapeHtml(selectedUser.username || 'User #' + selectedUser.id)}
|
||||||
</h2>
|
<span class="muted" style="font-weight:normal;font-size:0.85rem;"> — ${selectedUser.telegram_id}</span>
|
||||||
${balanceCard}
|
</h2>
|
||||||
<h3>Crypto Wallets (${wallets.length})</h3>
|
${balanceCard}
|
||||||
<table>
|
<h3>Crypto Wallets (${wallets.length})</h3>
|
||||||
<thead><tr><th>Type</th><th>Address</th><th>Balance</th><th>Created</th></tr></thead>
|
<table>
|
||||||
<tbody>${walletRows}</tbody>
|
<thead><tr><th>Type</th><th>Address</th><th>Balance</th><th>Created</th></tr></thead>
|
||||||
</table>
|
<tbody>${walletRows}</tbody>
|
||||||
` : '<p class="muted">Select a user to view wallets</p>'}
|
</table>
|
||||||
${ownerSection}
|
` : '<p class="muted">Select a user to view wallets</p>'}
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
${ownerSection ? `<div class="wallet-bottom">${ownerSection}</div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user