Add scroll-to-top and scroll-to-favorites shortcuts to the Query page
- author
- Marijn Besseling <njirambem@gmail.com> · 2026-08-17 19:49 UTC
- commit
- 30b0e5a3296d271f02358d38b27b1d9caeaa4140
- parent
- e7b74cd434
- tree
- browse at this commit
3 files changed +30 -0
Blog/Components/Pages/Query.razor +5 -0
| @@ -3,6 +3,11 @@ | ||
| 3 | 3 | <PageScript Src="./Components/Pages/Query.razor.js"/> |
| 4 | 4 | |
| 5 | 5 | <main> |
| 6 | + <div class="scroll-nav"> | |
| 7 | + <button id="scrollTopButton" type="button" aria-label="Scroll to top">↑</button> | |
| 8 | + <button id="scrollFavoritesButton" type="button" aria-label="Scroll to favorites">↓</button> | |
| 9 | + </div> | |
| 10 | + | |
| 6 | 11 | <div class="flex-row"> |
| 7 | 12 | <label for="lang">Query language</label> |
| 8 | 13 | <select id="lang"> |
Blog/Components/Pages/Query.razor.js +4 -0
| @@ -69,6 +69,10 @@ export async function onLoad() { | ||
| 69 | 69 | } |
| 70 | 70 | } |
| 71 | 71 | |
| 72 | + getById("scrollTopButton").onclick = () => window.scrollTo({top: 0, behavior: "smooth"}) | |
| 73 | + getById("scrollFavoritesButton").onclick = () => | |
| 74 | + getById("favoritesList").closest(".panel").scrollIntoView({behavior: "smooth", block: "start"}) | |
| 75 | + | |
| 72 | 76 | input.dispatchEvent(enterEvent) |
| 73 | 77 | } |
| 74 | 78 | |
Blog/wwwroot/app.css +21 -0
| @@ -532,6 +532,27 @@ dialog > .panel > legend { | ||
| 532 | 532 | gap: var() var(); |
| 533 | 533 | } |
| 534 | 534 | |
| 535 | +/* -- Scroll shortcuts ------------------------------------------------------ */ | |
| 536 | + | |
| 537 | +/* Docked to the viewport edge rather than the page flow, so it stays | |
| 538 | + reachable no matter how far down a long page (e.g. Query's history and | |
| 539 | + favorites) you've scrolled. */ | |
| 540 | +.scroll-nav { | |
| 541 | + position: fixed; | |
| 542 | + inset-inline-end: var(); | |
| 543 | + inset-block-start: 50%; | |
| 544 | + transform: translateY(-50%); | |
| 545 | + display: flex; | |
| 546 | + flex-direction: column; | |
| 547 | + gap: var(); | |
| 548 | + z-index: 100; | |
| 549 | +} | |
| 550 | + | |
| 551 | +.scroll-nav button { | |
| 552 | + line-height: 1; | |
| 553 | + padding: var(); | |
| 554 | +} | |
| 555 | + | |
| 535 | 556 | |
| 536 | 557 | /* 7. Media ================================================================= */ |
| 537 | 558 | |