Opgave 8c: bekræftelsesside efter bestilling + responsivt layout-fix
Baseret på brugerens gennemgang af siden i browser: - Ved succesfuld bestilling omdirigeres brugeren nu til en dedikeret GET /bestilling-modtaget i stedet for en inline besked, der skjulte vinkataloget — brugeren vil fortsat kunne se hvad de har bestilt. Siden gør det eksplicit at bestillingen først er gyldig ved modtaget betaling, og linker tilbage til bestillingssiden. - Rettet et CSS-layoutbug på smalle skærme: flex-basis (sat til 600px/260px til brug for bredde i to-kolonne-layoutet) blev fejlagtigt fortolket som højde, når layoutet skiftede til flex-direction: column under 800px, hvilket gav et stort tomt mellemrum mellem vinkatalog og sidebar. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
609c3efb05
commit
cae8decd21
4 changed files with 23 additions and 5 deletions
|
|
@ -34,3 +34,9 @@ def public_pickup_page(request: Request, session: SessionDep) -> HTMLResponse:
|
|||
return templates.TemplateResponse(
|
||||
request, "pickup.html", {"route_name": route.name, "meeting_info": route.meeting_info}
|
||||
)
|
||||
|
||||
|
||||
@router.get("/bestilling-modtaget", response_class=HTMLResponse)
|
||||
def public_order_confirmation(request: Request, session: SessionDep) -> HTMLResponse:
|
||||
route = get_route_from_domain(request, session)
|
||||
return templates.TemplateResponse(request, "order_confirmation.html", {"route_name": route.name})
|
||||
|
|
|
|||
|
|
@ -222,6 +222,11 @@ button[type="submit"]:hover {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog,
|
||||
.order-sidebar {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.order-sidebar {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -81,11 +81,8 @@
|
|||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (response.ok) {
|
||||
orderForm.querySelector(".catalog").hidden = true;
|
||||
orderForm.querySelectorAll(".field-label, .checkbox-label, button[type=submit]").forEach((el) => {
|
||||
el.hidden = true;
|
||||
});
|
||||
showMessage(messageEl, "Tak for din bestilling! En kvittering er sendt til din email.", "success");
|
||||
window.location.href = "/bestilling-modtaget";
|
||||
return;
|
||||
} else {
|
||||
showMessage(messageEl, await extractErrorDetail(response), "error");
|
||||
}
|
||||
|
|
|
|||
10
app/templates/order_confirmation.html
Normal file
10
app/templates/order_confirmation.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %} — Bestilling modtaget{% endblock %}
|
||||
{% block content %}
|
||||
<div class="signup-card">
|
||||
<h1>Tak for din bestilling!</h1>
|
||||
<p>Der er sendt en kvitteringsmail til den oplyste emailadresse med betalingsoplysninger.</p>
|
||||
<p><strong>Bemærk:</strong> bestillingen er først gyldig, når betalingen er modtaget.</p>
|
||||
<p><a href="/">Tilbage til bestilling</a></p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Reference in a new issue