Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/donate: add dollar sign before custom input

Browse source
This commit is contained in:
dumbmoron 2024-08-06 18:29:39 +00:00
parent c90a01daf9
commit b510cbf9e0
No known key found for this signature in database
1 changed files with 59 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
web/src/components/donate/DonateOptionsCard.svelte
View file

@ -13,6 +13,7 @@
let customInput: HTMLInputElement; let customInput: HTMLInputElement;
let customInputValue: number | null; let customInputValue: number | null;
let customFocused = false;
type Processor = "stripe" | "liberapay"; type Processor = "stripe" | "liberapay";
let processor: Processor = "stripe"; let processor: Processor = "stripe";
@ -84,18 +85,31 @@
</DonationOption> </DonationOption>
</div> </div>
<div id="donation-custom"> <div id="donation-custom">
<input <div
id="donation-custom-input" id="input-container"
type="number" class:focused={customFocused}
min="2" >
max="10000" {#if customInputValue || customInput?.validity.badInput}
step=".01" <span id="input-dollar-sign">
required $
placeholder="custom amount (from $2)" </span>
bind:this={customInput} {/if}
bind:value={customInputValue} <input
on:keydown={(e) => e.key === 'Enter' && sendCustom()} id="donation-custom-input"
/> type="number"
min="2"
max="10000"
step=".01"
required
placeholder="custom amount (from $2)"
bind:this={customInput}
bind:value={customInputValue}
on:input ={() => customFocused = true}
on:focus ={() => customFocused = true}
on:blur ={() => customFocused = false}
on:keydown={(e) => e.key === 'Enter' && sendCustom()}
/>
</div>
<button <button
id="donation-custom-submit" id="donation-custom-submit"
on:click={sendCustom} on:click={sendCustom}
@ -201,17 +215,47 @@
gap: 6px; gap: 6px;
} }
#donation-custom-input { #input-container {
flex: 1;
padding: 12px 18px; padding: 12px 18px;
width: 100%; width: 100%;
font-size: 13px;
border-radius: 12px; border-radius: 12px;
color: var(--white); color: var(--white);
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 4px;
}
#input-dollar-sign {
animation: grow-in .05s linear;
display: block;
}
@keyframes grow-in {
from { font-size: 0 }
to { font-size: inherit }
}
#input-container, #donation-custom-input {
font-size: 13px;
}
#donation-custom-input {
flex: 1;
background-color: transparent;
color: var(--white);
border: none; border: none;
} }
#donation-custom-input:focus-visible {
box-shadow: unset !important;
}
#input-container.focused {
box-shadow: 0 0 0 1.5px var(--blue) inset;
outline: var(--blue) 0.5px solid;
}
#donation-custom-submit { #donation-custom-submit {
color: var(--white); color: var(--white);
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);