commit bfbc6ede8614d4cf0bdb2017daa340726ff35c34
parent b2b39bac843f3bcb1dfc36764b74674780a627b2
Author: Silas Brack <silasbrack@gmail.com>
Date: Wed, 1 Oct 2025 12:51:56 +0200
feat: improve mobile tabs
Diffstat:
4 files changed, 44 insertions(+), 25 deletions(-)
diff --git a/src/simple_web_app/templates/index.html b/src/simple_web_app/templates/index.html
@@ -13,18 +13,22 @@
<li><a style="cursor: pointer;" hx-get="/settings" hx-target="#modal-placeholder" hx-swap="innerHTML" class="secondary"><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z"/></svg></a></li>
</ul>
</nav>
- <nav>
- <ul>
- <li><a href="#">World</a></li>
- <li><a href="#">USA</a></li>
- <li><a href="#">Business</a></li>
- <li><a href="#">Technology</a></li>
- <li><a href="#">Science</a></li>
- <li><a href="#">Sports</a></li>
- <li><a href="#">Gaming</a></li>
- <li><a href="#">Today in History</a></li>
- </ul>
- </nav>
+
+ <div class="overflow-auto">
+ <table>
+ <tr>
+ <th><strong><a href="#"><strong><a href="#">World</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">USA</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Business</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Technology</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Science</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Sports</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Gaming</a></strong></th>
+ <th><strong><a href="#"><strong><a href="#">Today in History</a></strong></th>
+ </tr>
+ </table>
+ </div>
+
<div id="modal-placeholder"></div>
<p>
<article>
@@ -102,14 +106,14 @@
</details>
</article>
</p>
- <button>Mark all as read</button>
+ <nav><ul></ul><ul><li> <button>Mark all as read</button></li></ul><ul></ul></nav>
<!-- </article> -->
<footer>
<nav>
<ul></ul>
<ul>
<li><a href=""><svg height="24pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M237.9 461.4C237.9 463.4 235.6 465 232.7 465C229.4 465.3 227.1 463.7 227.1 461.4C227.1 459.4 229.4 457.8 232.3 457.8C235.3 457.5 237.9 459.1 237.9 461.4zM206.8 456.9C206.1 458.9 208.1 461.2 211.1 461.8C213.7 462.8 216.7 461.8 217.3 459.8C217.9 457.8 216 455.5 213 454.6C210.4 453.9 207.5 454.9 206.8 456.9zM251 455.2C248.1 455.9 246.1 457.8 246.4 460.1C246.7 462.1 249.3 463.4 252.3 462.7C255.2 462 257.2 460.1 256.9 458.1C256.6 456.2 253.9 454.9 251 455.2zM316.8 72C178.1 72 72 177.3 72 316C72 426.9 141.8 521.8 241.5 555.2C254.3 557.5 258.8 549.6 258.8 543.1C258.8 536.9 258.5 502.7 258.5 481.7C258.5 481.7 188.5 496.7 173.8 451.9C173.8 451.9 162.4 422.8 146 415.3C146 415.3 123.1 399.6 147.6 399.9C147.6 399.9 172.5 401.9 186.2 425.7C208.1 464.3 244.8 453.2 259.1 446.6C261.4 430.6 267.9 419.5 275.1 412.9C219.2 406.7 162.8 398.6 162.8 302.4C162.8 274.9 170.4 261.1 186.4 243.5C183.8 237 175.3 210.2 189 175.6C209.9 169.1 258 202.6 258 202.6C278 197 299.5 194.1 320.8 194.1C342.1 194.1 363.6 197 383.6 202.6C383.6 202.6 431.7 169 452.6 175.6C466.3 210.3 457.8 237 455.2 243.5C471.2 261.2 481 275 481 302.4C481 398.9 422.1 406.6 366.2 412.9C375.4 420.8 383.2 435.8 383.2 459.3C383.2 493 382.9 534.7 382.9 542.9C382.9 549.4 387.5 557.3 400.2 555C500.2 521.8 568 426.9 568 316C568 177.3 455.5 72 316.8 72zM169.2 416.9C167.9 417.9 168.2 420.2 169.9 422.1C171.5 423.7 173.8 424.4 175.1 423.1C176.4 422.1 176.1 419.8 174.4 417.9C172.8 416.3 170.5 415.6 169.2 416.9zM158.4 408.8C157.7 410.1 158.7 411.7 160.7 412.7C162.3 413.7 164.3 413.4 165 412C165.7 410.7 164.7 409.1 162.7 408.1C160.7 407.5 159.1 407.8 158.4 408.8zM190.8 444.4C189.2 445.7 189.8 448.7 192.1 450.6C194.4 452.9 197.3 453.2 198.6 451.6C199.9 450.3 199.3 447.3 197.3 445.4C195.1 443.1 192.1 442.8 190.8 444.4zM179.4 429.7C177.8 430.7 177.8 433.3 179.4 435.6C181 437.9 183.7 438.9 185 437.9C186.6 436.6 186.6 434 185 431.7C183.6 429.4 181 428.4 179.4 429.7z"/></svg> Contribute</a></li>
- <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /> </svg> About Kagi News</a></li>
+ <li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /> </svg> About</a></li>
<li><a href=""><svg height="20pt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" /> </svg> RSS Feed</a></li>
</ul>
diff --git a/src/simple_web_app/templates/news_card.html b/src/simple_web_app/templates/news_card.html
@@ -0,0 +1,9 @@
+<article>
+<header><small><a href="">{{ tag }}</a></small></header>
+<details>
+<summary>
+<strong>{{ title }}</strong>
+</summary>
+<p><small>{{ content }}</small></p>
+</details>
+</article>
diff --git a/src/simple_web_app/templates/search.html b/src/simple_web_app/templates/search.html
@@ -14,6 +14,7 @@
hx-target="#search-results"
hx-indicator=".htmx-indicator">
+ <div class="overflow-auto">
<table class="table">
<thead>
<tr>
@@ -25,6 +26,7 @@
<tbody id="search-results">
</tbody>
</table>
+ </div>
<footer>
<button _="on click trigger closeModal" class="secondary">
diff --git a/src/simple_web_app/templates/settings.html b/src/simple_web_app/templates/settings.html
@@ -1,16 +1,20 @@
<div id="modal" class="modal-is-open modal-is-opening" _="on closeModal remove .modal-is-opening then wait 10 then add .modal-is-closing then wait for animationend then remove me">
<dialog _="on click if target is me then trigger closeModal" open>
<article>
- <nav>
- <ul>
- <li><small>General</small></li>
- <li><small>Categories</small></li>
- <li><small>Sections</small></li>
- <li><small>Content Filter</small></li>
- <li><small>Syncing</small></li>
- <li><small>Experimental</small></li>
- </ul>
- </nav>
+
+ <div class="overflow-auto">
+ <table>
+ <tr>
+ <th><strong><a href="#">General</a></strong></th>
+ <th><strong><a href="#">Categories</a></strong></th>
+ <th><strong><a href="#">Sections</a></strong></th>
+ <th><strong><a href="#">Content Filter</a></strong></th>
+ <th><strong><a href="#">Syncing</a></strong></th>
+ <th><strong><a href="#">Experimental</a></strong></th>
+ </tr>
+ </table>
+ </div>
+
<p>
<h4>Appearance</h4>
@@ -40,7 +44,7 @@
<button _="on click trigger closeModal" class="secondary">
Cancel
</button>
- <button>Confirm</button>
+ <button>Save</button>
</footer>
</article>
</dialog>
