Tom/Elternbeirat
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Show FAQ topics as an in-page accordion instead of drill-down pages

Browse Source
This commit is contained in:
tleininger committed 2026-09-30 16:21:49 +02:00
1 parent cb345975cb
commit eacf95e041
7 files changed
+79 -162
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/Features/Faqs/FaqList.razor
+19 -12
View File
@@ -25,16 +25,23 @@ else if (_topics.Count == 0)
}
else
{
<ul class="faq-topic-list">
@foreach (var topic in _topics)
{
<li>
<h2><a href="@($"/faqs/{topic.Slug}")">@topic.Title</a></h2>
@if (!string.IsNullOrWhiteSpace(topic.Intro))
{
<div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
}
</li>
}
</ul>
@foreach (var topic in _topics)
{
<details class="faq-topic">
<summary>@topic.Title</summary>
@if (!string.IsNullOrWhiteSpace(topic.Intro))
{
<div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
}
@foreach (var faq in topic.Faqs)
{
<details class="faq-item">
<summary>@faq.Question</summary>
<div class="faq-answer">
@((MarkupString)Markdown.ToHtml(faq.Answer))
</div>
</details>
}
</details>
}
}
Elternbeirat.Web/Features/Faqs/FaqTopicDetail.razor
-30
View File
@@ -1,30 +0,0 @@
@page "/faqs/{Slug}"
@if (_unavailable)
{
<PageTitle>Vorübergehend nicht erreichbar</PageTitle>
<p>Das Thema ist gerade nicht erreichbar. Bitte später erneut versuchen.</p>
}
else if (_topic is not null)
{
<PageTitle>@_topic.Title</PageTitle>
<nav>
<a href="/faqs">&larr; Alle Themen</a>
</nav>
<h1>@_topic.Title</h1>
@if (!string.IsNullOrWhiteSpace(_topic.Intro))
{
<div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(_topic.Intro))</div>
}
@foreach (var faq in _topic.Faqs)
{
<details class="faq-item">
<summary>@faq.Question</summary>
<div class="faq-answer">
@((MarkupString)Markdown.ToHtml(faq.Answer))
</div>
</details>
}
}
@* No topic and not unavailable: the slug was unknown; NavigationManager.NotFound()
already ran in OnParametersSetAsync and renders the not-found page. *@
Elternbeirat.Web/Features/Faqs/FaqTopicDetail.razor.cs
-63
View File
@@ -1,63 +0,0 @@
using Elternbeirat.Contracts;
using Elternbeirat.PocketBase;
using Elternbeirat.Web.Shared;
using Microsoft.AspNetCore.Components;
namespace Elternbeirat.Web.Features.Faqs;
public partial class FaqTopicDetail
{
[LoggerMessage(
Level = LogLevel.Error,
Message = "Could not load FAQ topic '{Slug}' from PocketBase; content source is unavailable.")]
private static partial void LogSourceUnavailable(
ILogger logger,
string slug,
Exception exception);
[Parameter]
public string Slug { get; set; } = string.Empty;
[Inject]
private PocketBaseClient PocketBase { get; set; } = null!;
[Inject]
private ILogger<FaqTopicDetail> Logger { get; set; } = null!;
[Inject]
private NavigationManager Navigation { get; set; } = null!;
[CascadingParameter]
private HttpContext? HttpContext { get; set; }
private FaqTopic? _topic;
// Set when the content source could not be reached or read. The markup then
// shows a "temporarily unavailable" note instead of a not-found page, matching
// the 503 this sets on the response.
private bool _unavailable;
protected override async Task OnParametersSetAsync()
{
try
{
_topic = await PocketBase.GetFaqTopicBySlugAsync(
Slug,
HttpContext?.RequestAborted ?? CancellationToken.None);
}
catch (PocketBaseUnavailableException exception)
{
// The site works, its data store is down: 503, not 404.
LogSourceUnavailable(Logger, Slug, exception);
_unavailable = true;
SourceUnavailable.SetStatus(HttpContext);
return;
}
if (_topic is null)
{
// The source answered, but there is no topic with this slug: a genuine 404.
Navigation.NotFound();
}
}
}
Elternbeirat.Web/wwwroot/app.css
+46 -13
View File
@@ -206,8 +206,7 @@ h1:focus {
lifted off the tinted page background with a soft shadow and a gentle hover. */
.post-list,
.event-list,
.faq-topic-list {
.event-list {
list-style: none;
padding: 0;
margin: 0;
@@ -216,8 +215,7 @@ h1:focus {
}
.post-list li,
.event-list li,
.faq-topic-list li {
.event-list li {
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
@@ -226,21 +224,56 @@ h1:focus {
}
.post-list li:hover,
.event-list li:hover,
.faq-topic-list li:hover {
.event-list li:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
/* FAQ topics: each card is a link to the topic's own page, with an optional intro
below the heading. The heading matches the post/event card titles. */
.faq-topic-list h2 {
margin: 0;
font-size: 1.15rem;
/* FAQ topics: each is a collapsible card. Its summary is the topic heading; open it
to reveal the optional intro and the questions (themselves collapsible .faq-item
cards). The topic marker is a rotating triangle, distinct from the +/- on the
questions nested inside, so the two accordion levels read apart. */
.faq-topic {
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
transition: box-shadow var(--transition);
}
.faq-topic-list h2 a {
text-decoration: none;
.faq-topic:hover {
box-shadow: var(--shadow-hover);
}
.faq-topic > summary {
cursor: pointer;
font-size: 1.15rem;
font-weight: 600;
color: var(--color-brand);
list-style: none;
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.faq-topic > summary::-webkit-details-marker {
display: none;
}
.faq-topic > summary::before {
content: "▸";
color: var(--color-accent-dark);
font-size: 0.9rem;
}
.faq-topic[open] > summary::before {
content: "▾";
}
/* Space the questions off the topic heading once the topic is open. */
.faq-topic[open] > .faq-item:first-of-type {
margin-top: var(--space-3);
}
.faq-topic-intro {