helios/rsvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix donation button styling and input field interactions

Browse Source
This commit is contained in:
Ian Gulliver
2025-12-30 10:41:44 -08:00
parent d2315fa1c5
commit a247704523
1 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/afac26.html
View File

@@ -57,13 +57,10 @@
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.donation-group { .donation-group {
display: flex; display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem; gap: 0.5rem;
} }
.donation-group wa-button {
flex: 1;
min-width: 0;
}
.donation-group wa-button::part(base) { .donation-group wa-button::part(base) {
height: 80px; height: 80px;
display: flex; display: flex;
@@ -78,20 +75,36 @@
margin-top: 0.4rem; margin-top: 0.4rem;
--wa-focus-ring-width: 0; --wa-focus-ring-width: 0;
--wa-input-border-width: 0; --wa-input-border-width: 0;
--wa-input-focus-ring-color: transparent;
--wa-input-border-color: transparent;
--wa-input-border-color-focus: transparent;
} }
wa-input[type="number"]::part(input) { wa-input[type="number"]::part(input) {
-moz-appearance: textfield; -moz-appearance: textfield;
text-align: center; text-align: center;
} }
.donation-group wa-input::part(base) {
border: none;
box-shadow: none;
outline: none;
}
.donation-group wa-input::part(base):focus-within {
border: none;
box-shadow: none;
outline: none;
}
wa-input[type="number"]::part(input)::-webkit-inner-spin-button, wa-input[type="number"]::part(input)::-webkit-inner-spin-button,
wa-input[type="number"]::part(input)::-webkit-outer-spin-button { wa-input[type="number"]::part(input)::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
wa-button.selected-yellow::part(base) { wa-button.selected::part(base) {
background-color: #FEDE02; background-color: #FEDE02;
color: #000; color: #000;
} }
.donation-group wa-input::part(prefix) {
padding-right: 0;
}
.donation-section { .donation-section {
margin-top: 1rem; margin-top: 1rem;
padding-top: 1rem; padding-top: 1rem;
@@ -137,7 +150,7 @@
<strong>RSVP now!</strong> <strong>RSVP now!</strong>
<div style="margin-top: 0.5rem;">Number of people:</div> <div style="margin-top: 0.5rem;">Number of people:</div>
<div class="button-group" id="num-people-group"> <div class="button-group" id="num-people-group">
<wa-button size="small" variant="neutral" class="selected-yellow" data-value="1">1</wa-button> <wa-button size="small" variant="neutral" class="selected" data-value="1">1</wa-button>
<wa-button size="small" variant="neutral" data-value="2">2</wa-button> <wa-button size="small" variant="neutral" data-value="2">2</wa-button>
<wa-button size="small" variant="neutral" data-value="3">3</wa-button> <wa-button size="small" variant="neutral" data-value="3">3</wa-button>
<wa-button size="small" variant="neutral" data-value="4">4</wa-button> <wa-button size="small" variant="neutral" data-value="4">4</wa-button>
@@ -149,9 +162,9 @@
<div class="donation-section"> <div class="donation-section">
<strong>Would you like to make a donation?</strong> <strong>Would you like to make a donation?</strong>
<div class="button-group donation-group" id="donation-group"> <div class="button-group donation-group" id="donation-group">
<wa-button variant="neutral" class="selected-yellow" data-value="25">$25</wa-button> <wa-button variant="neutral" class="selected" data-value="25">$25</wa-button>
<wa-button variant="neutral" data-value="50">$50</wa-button> <wa-button variant="neutral" data-value="50">$50</wa-button>
<wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100" placeholder="100"></wa-input></wa-button> <wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>
<wa-button variant="neutral" data-value="0">Maybe later</wa-button> <wa-button variant="neutral" data-value="0">Maybe later</wa-button>
</div> </div>
</div> </div>
@@ -180,7 +193,7 @@
<div class="button-group donation-group" id="additional-donation-group"> <div class="button-group donation-group" id="additional-donation-group">
<wa-button variant="neutral" data-value="25">$25</wa-button> <wa-button variant="neutral" data-value="25">$25</wa-button>
<wa-button variant="neutral" data-value="50">$50</wa-button> <wa-button variant="neutral" data-value="50">$50</wa-button>
<wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="additional-amount" min="1" value="100"></wa-input></wa-button> <wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="additional-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>
</div> </div>
</div> </div>
</div> </div>
@@ -209,17 +222,17 @@
let selectedNumPeople = 1; let selectedNumPeople = 1;
let selectedDonation = 25; let selectedDonation = 25;
function setupButtonGroup(groupId, onChange, useYellow = false) { function setupButtonGroup(groupId, onChange, useHighlight = false) {
const group = document.getElementById(groupId); const group = document.getElementById(groupId);
group.querySelectorAll('wa-button').forEach(btn => { group.querySelectorAll('wa-button').forEach(btn => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
if (e.target.tagName === 'WA-INPUT') return; if (e.target.tagName === 'WA-INPUT') return;
group.querySelectorAll('wa-button').forEach(b => { group.querySelectorAll('wa-button').forEach(b => {
b.variant = 'neutral'; b.variant = 'neutral';
b.classList.remove('selected-yellow'); b.classList.remove('selected');
}); });
if (useYellow) { if (useHighlight) {
btn.classList.add('selected-yellow'); btn.classList.add('selected');
} else { } else {
btn.variant = 'brand'; btn.variant = 'brand';
} }
@@ -236,6 +249,19 @@
selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val)); selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val));
}, true); }, true);
document.getElementById('custom-amount').addEventListener('focus', () => {
const group = document.getElementById('donation-group');
group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
group.querySelector('wa-button[data-value="custom"]').classList.add('selected');
selectedDonation = 'custom';
});
document.getElementById('additional-amount').addEventListener('focus', () => {
const group = document.getElementById('additional-donation-group');
group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
group.querySelector('wa-button[data-value="custom"]').classList.add('selected');
});
setupButtonGroup('num-people-update-group', async val => { setupButtonGroup('num-people-update-group', async val => {
const numPeople = parseInt(val); const numPeople = parseInt(val);
const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople }); const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople });
@@ -269,11 +295,11 @@
} }
const updateGroup = document.getElementById('num-people-update-group'); const updateGroup = document.getElementById('num-people-update-group');
updateGroup.querySelectorAll('wa-button').forEach(b => { updateGroup.querySelectorAll('wa-button').forEach(b => {
b.classList.remove('selected-yellow'); b.classList.remove('selected');
b.variant = 'neutral'; b.variant = 'neutral';
}); });
const currentBtn = updateGroup.querySelector(`wa-button[data-value="${data.numPeople}"]`); const currentBtn = updateGroup.querySelector(`wa-button[data-value="${data.numPeople}"]`);
if (currentBtn) currentBtn.classList.add('selected-yellow'); if (currentBtn) currentBtn.classList.add('selected');
} else { } else {
document.getElementById('rsvp-prompt').style.display = 'block'; document.getElementById('rsvp-prompt').style.display = 'block';
document.getElementById('rsvp-status').style.display = 'none'; document.getElementById('rsvp-status').style.display = 'none';