lichenblankie/tinyweb-forum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean layout: toolbar row with search+actions, structured thread list items

Browse source
This commit is contained in:
blankie 2026-06-05 04:24:15 +00:00
parent cd88a8bffc
commit 15d9de09f2
1 changed files with 21 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

36
tinyweb_forum/handlers.py
View file

@ -45,17 +45,18 @@ FORUM_CSS = """
.forum-form label.checkbox-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .forum-form label.checkbox-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.forum-form label.inline-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; white-space: nowrap; } .forum-form label.inline-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; white-space: nowrap; }
.forum-form small { display: block; margin-bottom: 8px; } .forum-form small { display: block; margin-bottom: 8px; }
.forum-search { margin: 0.5rem 0; } .forum-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0.5rem 0; }
.forum-search form { display: block; } .forum-toolbar form { flex: 1; min-width: 160px; }
.forum-search input[name=q] { .forum-toolbar input[name=q] {
width: 100%; box-sizing: border-box; padding: 10px 12px; width: 100%; box-sizing: border-box; padding: 8px 12px;
background: rgba(8, 18, 22, 0.8); border: 1px solid rgba(40, 70, 65, 0.4); background: rgba(8, 18, 22, 0.8); border: 1px solid rgba(40, 70, 65, 0.4);
border-radius: 4px; color: #90b4ac; font-size: 0.95rem; border-radius: 4px; color: #90b4ac; font-size: 0.9rem;
transition: border-color 0.2s, box-shadow 0.3s; transition: border-color 0.2s, box-shadow 0.3s;
} }
.forum-search input[name=q]:focus { .forum-toolbar input[name=q]:focus {
outline: none; border-color: rgba(80, 140, 110, 0.5); box-shadow: 0 0 18px rgba(100, 200, 150, 0.06); outline: none; border-color: rgba(80, 140, 110, 0.5); box-shadow: 0 0 18px rgba(100, 200, 150, 0.06);
} }
.forum-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.forum-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0.5rem 0; } .forum-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0.5rem 0; }
a.forum-action, a.forum-action-inline { a.forum-action, a.forum-action-inline {
color: #5a7880; text-decoration: none; border-bottom: none; font-size: 0.88rem; color: #5a7880; text-decoration: none; border-bottom: none; font-size: 0.88rem;
@ -67,8 +68,11 @@ a.forum-action-inline { padding: 2px 6px; border: none; }
a.forum-action-inline:hover { border: none; } a.forum-action-inline:hover { border: none; }
p.meta { font-size: 0.85rem; color: #3a5560; } p.meta { font-size: 0.85rem; color: #3a5560; }
.forum-list { list-style: none; padding-left: 0; } .forum-list { list-style: none; padding-left: 0; }
.forum-list li { padding: 0.6rem 0; border-bottom: 1px solid rgba(30, 55, 50, 0.2); } .forum-list li { padding: 0.8rem 0; border-bottom: 1px solid rgba(30, 55, 50, 0.2); }
.forum-list li:last-child { border-bottom: none; } .forum-list li:last-child { border-bottom: none; }
.forum-list .thread-title { margin-bottom: 0.15rem; }
.forum-list .thread-meta { font-size: 0.78rem; color: #3a5560; }
.forum-list a { border-bottom: none; }
.forum-form input[type=text], .forum-form input[type=url] { font-family: inherit; } .forum-form input[type=text], .forum-form input[type=url] { font-family: inherit; }
.forum .post { border-left-color: rgba(40, 70, 65, 0.3); } .forum .post { border-left-color: rgba(40, 70, 65, 0.3); }
</style>""" </style>"""
@ -250,14 +254,17 @@ class ForumHandlers:
reply_label = f"{r['reply_count']} replies" if r['reply_count'] else "no replies" reply_label = f"{r['reply_count']} replies" if r['reply_count'] else "no replies"
items += ( items += (
f'<li>' f'<li>'
f'<div class="thread-title">'
f'<small>{badge}{mute_badge}</small> ' f'<small>{badge}{mute_badge}</small> '
f'<a href="/forum/t/{esc(r["id"])}">{esc(r["title"])}</a>' f'<a href="/forum/t/{esc(r["id"])}">{esc(r["title"])}</a>'
f'{tags_html}' f'{tags_html}'
f'<br>' f'</div>'
f'<small>{esc(self._author_str(r["author_name"], r["author_instance"]))}' f'<div class="thread-meta">'
f'{esc(self._author_str(r["author_name"], r["author_instance"]))}'
f' · {self._time_ago(r["created_at"])}' f' · {self._time_ago(r["created_at"])}'
f' · {r["score"]} upvotes' f' · {r["score"]} upvotes'
f' · {reply_label}</small>' f' · {reply_label}'
f'</div>'
f'</li>' f'</li>'
) )
if not items: if not items:
@ -265,7 +272,7 @@ class ForumHandlers:
new_label = f" ({new_count} new)" if new_count else "" new_label = f" ({new_count} new)" if new_count else ""
search_form = ( search_form = (
f'<form method="get" action="/forum">' f'<form method="get" action="/forum">'
f'<input name="q" placeholder="search forum" size="30" value="{esc(search)}">' f'<input name="q" placeholder="search" value="{esc(search)}">'
f'</form>' f'</form>'
) )
tag_label = f' — tag: {esc(tag)}' if tag else "" tag_label = f' — tag: {esc(tag)}' if tag else ""
@ -273,15 +280,14 @@ class ForumHandlers:
page_url = f'/forum?q={esc(search)}&tag={esc(tag)}&muted=1' if show_muted else (f'/forum?q={esc(search)}&tag={esc(tag)}' if search or tag else '/forum') page_url = f'/forum?q={esc(search)}&tag={esc(tag)}&muted=1' if show_muted else (f'/forum?q={esc(search)}&tag={esc(tag)}' if search or tag else '/forum')
return self._respond( return self._respond(
f"<h1>forum{tag_label}</h1>" f"<h1>forum{tag_label}</h1>"
f'<div class="forum-search">' f'<div class="forum-toolbar">'
f'{search_form}' f'{search_form}'
f"</div>" f'<div class="forum-toolbar-actions">'
f'<div class="forum-actions">'
f'<a class="forum-action" href="/forum/new">+ new</a>' f'<a class="forum-action" href="/forum/new">+ new</a>'
f'<a class="forum-action" href="/forum/moderation">mod</a>' f'<a class="forum-action" href="/forum/moderation">mod</a>'
f'<a class="forum-action" href="/forum/sync/now">sync now</a>' f'<a class="forum-action" href="/forum/sync/now">sync now</a>'
f'{muted_link}' f'{muted_link}'
f"</div>" f'</div></div>'
f"<p class=\"meta\">{total} threads{new_label}</p>" f"<p class=\"meta\">{total} threads{new_label}</p>"
f'<ul class="forum-list">{items}</ul>' f'<ul class="forum-list">{items}</ul>'
f"{self._page_nav(page, total, page_url)}" f"{self._page_nav(page, total, page_url)}"