ekzyis/zaply
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add slider for zap message size

Browse Source
This commit is contained in:
ekzyis 2025-01-24 21:47:16 +01:00
parent 3b6933e16a
commit aff49782cf
2 changed files with 54 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/zap.templ
View File

@ -9,12 +9,12 @@ import (
templ Zap(inv *lightning.Invoice) { templ Zap(inv *lightning.Invoice) {
<div class="bg-[#212529] w-fit zap-animate-in border border-[#212529] m-3 rounded-lg" id={ inv.PaymentHash }> <div class="bg-[#212529] w-fit zap-animate-in border border-[#212529] m-3 rounded-lg" id={ inv.PaymentHash }>
<div class="flex flex-row gap-3 py-1 items-center"> <div class="flex flex-row gap-3 py-1 items-center">
<svg width="32" height="32" viewBox="0 0 200 307" fill="#fada5e" xmlns="http://www.w3.org/2000/svg" class="ps-3"> <svg width="32" height="32" viewBox="0 0 200 307" fill="#fada5e" xmlns="http://www.w3.org/2000/svg" class="zap-svg ps-3">
<path d="M56 0L107.606 131H90.2129H89L1.52588e-05 131L177 307L106.979 165H121H160H200L56 0Z"/> <path d="M56 0L107.606 131H90.2129H89L1.52588e-05 131L177 307L106.979 165H121H160H200L56 0Z"/>
</svg> </svg>
<div class="flex flex-col pe-3 py-1"> <div class="flex flex-col pe-3 py-1">
<div class="text-lg text-[#f0f0f0]">{ inv.Description }</div> <div class="zap-description text-[#f0f0f0]">{ inv.Description }</div>
<div class="text-sm text-slate-300">{ fmt.Sprintf("%s", humanize(inv.Msats)) }</div> <div class="zap-amount text-slate-300">{ fmt.Sprintf("%s", humanize(inv.Msats)) }</div>
</div> </div>
</div> </div>
</div> </div>

53
pages/overlay.templ
View File

@ -16,6 +16,7 @@ templ Overlay(lnurl string, lnaddr string) {
if GetEnv(ctx) == "development" { if GetEnv(ctx) == "development" {
<script src={ GetBaseUrl(ctx) + "/js/livereload.js" }></script> <script src={ GetBaseUrl(ctx) + "/js/livereload.js" }></script>
} }
<style id="zap-custom-css"></style>
</head> </head>
<body> <body>
<div id="controls" class="hidden grid grid-cols-2 fixed top-0 left-0 items-center gap-3 m-3"> <div id="controls" class="hidden grid grid-cols-2 fixed top-0 left-0 items-center gap-3 m-3">
@ -29,6 +30,16 @@ templ Overlay(lnurl string, lnaddr string) {
value="1.0" value="1.0"
class="w-32 accent-teal" class="w-32 accent-teal"
/> />
<label for="zap-scale-slider" class="text-black">Zap message size:</label>
<input
type="range"
id="zap-scale-slider"
min="1"
max="5"
step="1"
value="1.0"
class="w-32 accent-teal"
/>
</div> </div>
<div <div
id="zap-container" id="zap-container"
@ -39,7 +50,7 @@ templ Overlay(lnurl string, lnaddr string) {
class="fixed bottom-0 right-0 cursor-move" class="fixed bottom-0 right-0 cursor-move"
draggable="true" draggable="true"
> >
<div class="hidden items-center justify-center text-center border border-dashed border-[#212529] m-3 h-[64px] w-[384px] text-lg"> <div id="zap-template" class="hidden items-center justify-center text-center border border-dashed border-[#212529] m-0 p-3 w-fit">
zap messages will show up here zap messages will show up here
</div> </div>
</div> </div>
@ -110,7 +121,7 @@ templ Overlay(lnurl string, lnaddr string) {
// hide 'zap messages will show up here' if query param given // hide 'zap messages will show up here' if query param given
function showHelpers() { function showHelpers() {
document.querySelector('#zap-container>div').style.display = "flex"; document.querySelector('#zap-template').style.display = "flex";
document.querySelector('#controls').style.display = "grid"; document.querySelector('#controls').style.display = "grid";
} }
@ -143,6 +154,44 @@ templ Overlay(lnurl string, lnaddr string) {
enableSlider('qr-scale-slider', 'qr-scaler', 'qrScale', (element, value) => { enableSlider('qr-scale-slider', 'qr-scaler', 'qrScale', (element, value) => {
element.style.transform = `scaleX(${value}) scaleY(${value})`; element.style.transform = `scaleX(${value}) scaleY(${value})`;
}) })
enableSlider('zap-scale-slider', 'zap-custom-css', 'zapScale', (element, value) => {
// https://tailwindcss.com/docs/font-size
const description = {
1.0: 'font-size: 18px', // text-lg
2.0: 'font-size: 20px', // text-xl
3.0: 'font-size: 24px', // text-2xl
4.0: 'font-size: 30px', // text-3xl
5.0: 'font-size: 36px', // text-4xl
}
const amount = {
1.0: 'font-size: 14px', // text-sm
2.0: 'font-size: 16px', // text-base
3.0: 'font-size: 18px', // text-lg
4.0: 'font-size: 20px', // text-xl
5.0: 'font-size: 24px', // text-2xl
}
const svg = {
1.0: 'width: 32px; height: 32px',
2.0: 'width: 40px; height: 40px',
3.0: 'width: 48px; height: 48px',
4.0: 'width: 56px; height: 56px',
5.0: 'width: 64px; height: 64px',
}
element.textContent = `
#zap-template {
${description[value]}
}
.zap-description {
${description[value]}
}
.zap-amount {
${amount[value]}
}
.zap-svg {
${svg[value]}
}
`;
})
</script> </script>
</body> </body>
</html> </html>