jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(events): grid-align consent hint, drop magic 24px padding

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-29 18:22:45 +01:00
parent f66455eda5
commit 7e44809a83
1 changed files with 24 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/components/EventTicketPurchase.vue
View file

@ -154,17 +154,19 @@
securely securely
</p> </p>
<label class="consent-field"> <div class="consent-block">
<input <label class="consent-field">
v-model="form.createAccount" <input
type="checkbox" v-model="form.createAccount"
:disabled="processing" type="checkbox"
> :disabled="processing"
<span>Create a free guest account so I can manage my registration</span> >
</label> <span>Create a free guest account so I can manage my registration</span>
<p class="field-hint consent-hint"> </label>
Guest accounts let you view your tickets and register faster next time. We won't add you to member communications. <p class="field-hint consent-hint">
</p> Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
</p>
</div>
<button <button
type="submit" type="submit"
@ -450,22 +452,26 @@ const formatEventDate = (date) => {
margin-top: 2px; margin-top: 2px;
} }
.consent-field { .consent-block {
display: flex; display: grid;
grid-template-columns: auto 1fr;
align-items: flex-start; align-items: flex-start;
gap: 8px; column-gap: 8px;
row-gap: 4px;
margin-bottom: 14px;
}
.consent-field {
display: contents;
font-size: 12px; font-size: 12px;
color: var(--text); color: var(--text);
margin-bottom: 4px;
cursor: pointer; cursor: pointer;
} }
.consent-field input[type="checkbox"] { .consent-field input[type="checkbox"] {
margin-top: 3px; margin-top: 3px;
flex-shrink: 0;
accent-color: var(--candle); accent-color: var(--candle);
} }
.consent-hint { .consent-hint {
margin-bottom: 14px; grid-column: 2;
padding-left: 24px; margin: 0;
} }
</style> </style>