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>
<meta charset="utf-8" />
<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%
<link rel="manifest" href="/manifest.json" />
</head>

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

@ -82,14 +82,11 @@
{#if isCheckingUsername}
<p>Checking for existing username...</p>
{:else if hasExistingUsername}
<p>
Your Lightning address: <strong>{existingUsername}@{BASE_DOMAIN}</strong>
</p>
<p>Your Lightning address:</p>
<pre>{existingUsername}@{BASE_DOMAIN}</pre>
{:else}
<p>
Register a username to receive Lightning payments at {username ||
"yourname"}@{BASE_DOMAIN}
</p>
<p>Register a username to receive Lightning payments at:</p>
<pre>{username || "yourname"}@{BASE_DOMAIN}</pre>
<div class="form-group">
<label for="username">Username:</label>
@ -153,4 +150,22 @@
.status-message.error {
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>

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

@ -19,6 +19,7 @@
</script>
<dialog bind:this={dialogEl} onclose={() => (open = false)}>
<button class="close" onclick={closeDialog}>&times;</button>
<div class="content">
<h3>Receive</h3>
@ -49,6 +50,17 @@
</dialog>
<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 {
display: flex;
flex-direction: column;

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

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

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

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

4
src/lib/style.css
View file

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