local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 53 Pull requests 1 Projects 2 Releases 3 Packages 1 Activity Actions

style: consistent save buttons and active tab

Browse source
This commit is contained in:
carla 2026-03-12 15:59:53 +01:00
parent 82962a2f2a
commit ba08434604
15 changed files with 486 additions and 438 deletions
Download patch file Download diff file Expand all files Collapse all files

27
DESIGN_GUIDELINES.md
View file

@ -46,14 +46,14 @@ Every authenticated page should follow the same structure:
**MUST:** Use `<.header>` on every page (except login/public pages).
**SHOULD:** Put short explanations into `<:subtitle>` rather than sprinkling random text blocks.
### 2.2 Edit/New form header: Back button left (mandatory)
### 2.2 Edit/New form header and footer buttons (mandatory)
For LiveViews that render an edit or new form (e.g. member, group, role, user, custom field, membership fee type):
- **MUST:** Provide a **Back** button on the **left** side of the header using the `<:leading>` slot (same as data fields: Back left, title next, primary action on the right).
- **MUST:** Provide a **Back** button on the **left** side of the header using the `<:leading>` slot (same as data fields: Back left, title next).
- **MUST:** Use the same pattern everywhere: Back button with `variant="neutral"`, arrow-left icon, and label “Back”. It navigates to the previous context (e.g. detail page or index) via a `return_path`-style helper.
- **SHOULD:** Place the primary action (e.g. “Save”) in `<:actions>` on the right.
- **Rationale:** Users expect a consistent way to leave the form without submitting; Back left matches the data fields edit view and keeps primary actions on the right.
- **MUST:** Place **exactly one** form button bar **below all form fields**, inside the `<.form>`, with: **Abbrechen** (Cancel) left, **Speichern** (Save) right. Use `gettext("Cancel")`, `gettext("Save <ressourcename>")`, `phx-disable-with={gettext("Saving...")}` on the submit button. No submit button in the header; no duplicate submit buttons.
- **Rationale:** Users expect a consistent way to leave the form without submitting; Back left. One primary action (Save) per form, in the footer, avoids double submits and matches the reference (member edit form).
**Template for form pages:**
```heex
@ -66,15 +66,20 @@ For LiveViews that render an edit or new form (e.g. member, group, role, user, c
</:leading>
Page title (e.g. “Edit Member” or “New User”)
<:subtitle>Short explanation.</:subtitle>
<:actions>
<.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
{gettext("Save")}
</.button>
</:actions>
</.header>
```
If the `<.header>` is outside the `<.form>`, the submit button must reference the form via the `form` attribute (e.g. `form="user-form"`).
<.form for={@form} id="..." phx-change="validate" phx-submit="save">
<%!-- form sections and fields --%>
<div class="mt-6 flex items-center justify-end gap-4">
<.button navigate={return_path(@return_to, @resource)} variant="neutral" type="button">
{gettext("Abbrechen")}
</.button>
<.button type="submit" phx-disable-with={gettext("Speichern...")} variant="primary">
{gettext("Speichern")}
</.button>
</div>
</.form>
```
## 3) Typography (system)