bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a Settings > Email previews page showing every branded email with sample data

Browse Source 
Renders the real templates every send function uses (claim approved,
membership invoice, invoice reminder) against hand-built placeholder
context -- no real Member/ClubMembership/DuesInvoice row needed, so
nothing here can leak real data. Each card shows the subject line and
toggles between the HTML render (in an iframe, so the email's own
markup can't clash with the page's) and the plain-text body, using
the same bg-steel pill-toggle pattern as the news preview's NL/EN
switch (generalised to .view-toggle-btn, kept .news-lang-btn as an
alias). Admin-only, alongside Club identity in Settings.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-20 22:54:08 +02:00
parent 7ab7ac1982
commit d5e396102e
10 changed files with 235 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/management.css
View File

@@ -1679,15 +1679,20 @@
}
}
/* --- News preview (management/templates/management/_news_preview.html) ---
The NL/EN language toggle above the article body -- same bg-steel pill
shell as member_list.html's Members/Guardians/Both selector, but a JS-
toggled pair of <button>s (an in-page content swap, not a page navigation
with its own querystring state) rather than links, so a dedicated small
class pair is simpler than juggling several Tailwind utilities via
classList from the script. */
/* --- In-page content-swap toggle (bg-steel pill shell) ---
Same bg-steel pill shell as member_list.html's Members/Guardians/Both
selector, but a JS-toggled pair (or more) of <button>s -- an in-page
content swap, not a page navigation with its own querystring state -- so a
dedicated small class pair is simpler than juggling several Tailwind
utilities via classList from the script.
.view-toggle-btn is the generic name (email_previews.html's Email/Plain
text toggle); .news-lang-btn is kept as an alias so _news_preview.html's
NL/EN toggle (and its own JS, which reads that exact class) needs no
change. */
@layer components {
.news-lang-btn {
.news-lang-btn,
.view-toggle-btn {
border-radius: 999px;
padding: 0.375rem 0.75rem;
font-family: var(--font-display);
@@ -1700,11 +1705,13 @@
transition: background-color 0.15s ease, color 0.15s ease;
}
.news-lang-btn:hover {
.news-lang-btn:hover,
.view-toggle-btn:hover {
color: #fff;
}
.news-lang-btn.active {
.news-lang-btn.active,
.view-toggle-btn.active {
background: #fff;
color: var(--color-ink);
}