diff --git a/static/afac26.html b/static/afac26.html index 2bbc07b..fc73de6 100644 --- a/static/afac26.html +++ b/static/afac26.html @@ -56,23 +56,47 @@ gap: 0.5rem; margin-top: 0.5rem; } + .donation-group { + display: flex; + gap: 0.5rem; + } + .donation-group wa-button { + flex: 1; + min-width: 0; + } + .donation-group wa-button::part(base) { + height: 80px; + display: flex; + align-items: center; + justify-content: center; + } + .donation-group wa-button[data-value="custom"]::part(base) { + flex-direction: column; + } + .donation-group wa-input { + width: 80px; + margin-top: 0.4rem; + --wa-focus-ring-width: 0; + --wa-input-border-width: 0; + } + wa-input[type="number"]::part(input) { + -moz-appearance: textfield; + text-align: center; + } + wa-input[type="number"]::part(input)::-webkit-inner-spin-button, + wa-input[type="number"]::part(input)::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + wa-button.selected-yellow::part(base) { + background-color: #FEDE02; + color: #000; + } .donation-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wa-color-neutral-80); } - .custom-amount { - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: 0.5rem; - } - .rsvp-controls { - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: 0.5rem; - } .thank-you { background: var(--wa-color-success-95); color: var(--wa-color-success-30); @@ -113,28 +137,28 @@ RSVP now!
Number of people:
- 1 + 1 2 3 4 5 - 6+ + 6 + 7 + 8
Would you like to make a donation? -
Suggested: $25 per family
-
- $25 - $50 - $100 - Other - Maybe later -
- - RSVP +
+
+ Submit RSVP +
Make an additional donation? -
- $25 - $50 - $100 - Other -
-
@@ -188,12 +209,20 @@ let selectedNumPeople = 1; let selectedDonation = 25; - function setupButtonGroup(groupId, onChange) { + function setupButtonGroup(groupId, onChange, useYellow = false) { const group = document.getElementById(groupId); group.querySelectorAll('wa-button').forEach(btn => { - btn.addEventListener('click', () => { - group.querySelectorAll('wa-button').forEach(b => b.variant = 'neutral'); - btn.variant = 'brand'; + btn.addEventListener('click', (e) => { + if (e.target.tagName === 'WA-INPUT') return; + group.querySelectorAll('wa-button').forEach(b => { + b.variant = 'neutral'; + b.classList.remove('selected-yellow'); + }); + if (useYellow) { + btn.classList.add('selected-yellow'); + } else { + btn.variant = 'brand'; + } onChange(btn.dataset.value); }); }); @@ -201,33 +230,26 @@ setupButtonGroup('num-people-group', val => { selectedNumPeople = parseInt(val); - }); + }, true); setupButtonGroup('donation-group', val => { selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val)); - document.getElementById('custom-amount-row').style.display = val === 'custom' ? 'flex' : 'none'; - }); + }, true); setupButtonGroup('num-people-update-group', async val => { const numPeople = parseInt(val); const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople }); updateUI(data); - }); + }, true); setupButtonGroup('additional-donation-group', async val => { if (val === 'custom') { - document.getElementById('additional-custom-row').style.display = 'flex'; + const amount = parseInt(document.getElementById('additional-amount').value) || 0; + if (amount > 0) await startDonation(amount); } else { await startDonation(parseInt(val)); } - }); - - document.getElementById('additional-custom-btn').addEventListener('click', async () => { - const amount = parseInt(document.getElementById('additional-amount').value) || 0; - if (amount > 0) { - await startDonation(amount); - } - }); + }, true); async function loadRSVP() { const data = await api('GET', `/api/rsvp/${eventId}`); @@ -245,6 +267,13 @@ } else { document.getElementById('donation-status').textContent = ''; } + const updateGroup = document.getElementById('num-people-update-group'); + updateGroup.querySelectorAll('wa-button').forEach(b => { + b.classList.remove('selected-yellow'); + b.variant = 'neutral'; + }); + const currentBtn = updateGroup.querySelector(`wa-button[data-value="${data.numPeople}"]`); + if (currentBtn) currentBtn.classList.add('selected-yellow'); } else { document.getElementById('rsvp-prompt').style.display = 'block'; document.getElementById('rsvp-status').style.display = 'none';