Arx/PortalBTC
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve styling on small mobile screens

Browse source
This commit is contained in:
Danny Morabito 2025-07-06 18:26:32 +02:00
parent c16dc1d694
commit f2c34335db
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
6 changed files with 85 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
%sveltekit.head% %sveltekit.head%
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
</head> </head>

29
src/lib/components/LightningSettings.svelte
View file

@ -82,14 +82,11 @@
{#if isCheckingUsername} {#if isCheckingUsername}
<p>Checking for existing username...</p> <p>Checking for existing username...</p>
{:else if hasExistingUsername} {:else if hasExistingUsername}
<p> <p>Your Lightning address:</p>
Your Lightning address: <strong>{existingUsername}@{BASE_DOMAIN}</strong> <pre>{existingUsername}@{BASE_DOMAIN}</pre>
</p>
{:else} {:else}
<p> <p>Register a username to receive Lightning payments at:</p>
Register a username to receive Lightning payments at {username || <pre>{username || "yourname"}@{BASE_DOMAIN}</pre>
"yourname"}@{BASE_DOMAIN}
</p>
<div class="form-group"> <div class="form-group">
<label for="username">Username:</label> <label for="username">Username:</label>
@ -153,4 +150,22 @@
.status-message.error { .status-message.error {
color: var(--error-color); color: var(--error-color);
} }
.retro-card p {
word-break: break-word;
}
pre {
padding: 0.5rem;
background: #111;
border: 2px solid var(--accent-color);
box-shadow: 2px 2px 0 var(--accent-color);
color: #fff;
white-space: pre;
overflow-x: auto;
text-shadow: 2px 2px 0 #000;
letter-spacing: 2px;
text-align: center;
margin-bottom: 1rem;
}
</style> </style>

12
src/lib/components/ReceiveDialog.svelte
View file

@ -19,6 +19,7 @@
</script> </script>
<dialog bind:this={dialogEl} onclose={() => (open = false)}> <dialog bind:this={dialogEl} onclose={() => (open = false)}>
<button class="close" onclick={closeDialog}>&times;</button>
<div class="content"> <div class="content">
<h3>Receive</h3> <h3>Receive</h3>
@ -49,6 +50,17 @@
</dialog> </dialog>
<style> <style>
.close {
position: absolute;
top: 0.5rem;
right: 0.8rem;
background: none;
border: none;
font-size: 1.5rem;
color: var(--accent-color);
cursor: pointer;
}
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

86
src/lib/components/SendDialog.svelte
View file

@ -71,59 +71,63 @@
</script> </script>
<dialog bind:this={dialogEl} onclose={() => (open = false)}> <dialog bind:this={dialogEl} onclose={() => (open = false)}>
<h3>Send Payment</h3> <button class="close" onclick={closeDialog}>&times;</button>
<div class="content">
<h3>Send</h3>
<label>
Destination
<input
type="text"
bind:value={destination}
placeholder="bolt12 / invoice / liquid / bitcoin address"
required
/>
</label>
{#if requireAmount}
<label> <label>
Amount (sats) Destination
<input <input
type="number" type="text"
min="0" bind:value={destination}
step="1" placeholder="bolt12 / invoice / liquid / bitcoin address"
bind:value={amountSat} required
placeholder="amount in sats"
/> />
</label> </label>
{/if}
{#if status} {#if requireAmount}
<p class="status">{status}</p> <label>
{/if} Amount (sats)
<input
type="number"
min="0"
step="1"
bind:value={amountSat}
placeholder="amount in sats"
/>
</label>
{/if}
<div class="actions"> {#if status}
<Button variant="primary" onclick={handleSend} disabled={!destination}> <p class="status">{status}</p>
Send {/if}
</Button>
<Button onclick={closeDialog}>Cancel</Button> <div class="actions">
<Button variant="primary" onclick={handleSend} disabled={!destination}>
Send
</Button>
<Button onclick={closeDialog}>Cancel</Button>
</div>
</div> </div>
</dialog> </dialog>
<style> <style>
dialog { .close {
position: relative; position: absolute;
background: var(--surface-color); top: 0.5rem;
outline: none; right: 0.8rem;
width: 100%; background: none;
max-width: clamp(450px, 80vw, 650px); border: none;
border: 3px solid var(--accent-color); font-size: 1.5rem;
border-radius: 8px; color: var(--accent-color);
box-shadow: cursor: pointer;
0 0 0 4px #000,
0 0 0 8px var(--primary-color);
font-family: "Press Start 2P", monospace;
color: var(--text-color);
padding: 2rem 2.5rem;
} }
.content {
display: flex;
flex-direction: column;
}
h3 { h3 {
font-size: 1.2rem; font-size: 1.2rem;
color: var(--accent-color); color: var(--accent-color);

2
src/lib/components/Tabs.svelte
View file

@ -26,6 +26,8 @@
<style> <style>
.tabs { .tabs {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

4
src/lib/style.css
View file

@ -31,6 +31,8 @@ body {
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 1.2; line-height: 1.2;
text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000;
overflow-x: hidden;
overflow-y: auto;
} }
.app-wrapper { .app-wrapper {
@ -146,7 +148,7 @@ dialog {
background: var(--surface-color); background: var(--surface-color);
outline: none; outline: none;
width: 100%; width: 100%;
max-width: clamp(450px, 80vw, 650px); max-width: clamp(350px, 80vw, 650px);
max-height: 60vh; max-height: 60vh;
border: 3px solid var(--accent-color); border: 3px solid var(--accent-color);
border-radius: 8px; border-radius: 8px;