coracle/flotilla
1
6
Fork 24
Code Issues 33 Pull Requests 3 Actions Packages Projects 5 Releases Wiki Activity

Re-introduce safe inset areas

Browse Source
This commit is contained in:
Jon Staab
2025-05-08 11:05:27 -07:00
parent 6e5e1a0846
commit 841928783b
15 changed files with 96 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
capacitor.config.ts
+4 -4
View File
@@ -17,10 +17,10 @@ const config: CapacitorConfig = {
},
},
// Use this for live reload https://capacitorjs.com/docs/guides/live-reload
server: {
url: "http://192.168.1.115:1847",
cleartext: true
},
// server: {
// url: "http://192.168.1.115:1847",
// cleartext: true
// },
};
export default config;
src/app.css
+58 -60
View File
@@ -66,82 +66,80 @@ html {
@apply bg-base-300;
}
/* ios */
/* safe area insets */
.pt-sai {
padding-top: var(--sait);
}
@layer components {
.pt-sai {
padding-top: var(--sait);
}
.pr-sai {
padding-right: var(--sair);
}
.pr-sai {
padding-right: var(--sair);
}
.pb-sai {
padding-bottom: var(--saib);
}
.pb-sai {
padding-bottom: var(--saib);
}
.pl-sai {
padding-left: var(--sail);
}
.pl-sai {
padding-left: var(--sail);
}
.px-sai {
@apply pl-sai pr-sai;
}
.px-sai {
@apply pl-sai pr-sai;
}
.py-sai {
@apply pt-sai pb-sai;
}
.py-sai {
@apply pt-sai pb-sai;
}
.p-sai {
@apply py-sai px-sai;
}
.p-sai {
@apply py-sai px-sai;
}
.mt-sai {
padding-top: var(--sait);
}
.mt-sai {
padding-top: var(--sait);
}
.mr-sai {
padding-right: var(--sair);
}
.mr-sai {
padding-right: var(--sair);
}
.mb-sai {
padding-bottom: var(--saib);
}
.mb-sai {
padding-bottom: var(--saib);
}
.ml-sai {
padding-left: var(--sail);
}
.ml-sai {
padding-left: var(--sail);
}
.mx-sai {
@apply ml-sai mr-sai;
}
.mx-sai {
@apply ml-sai mr-sai;
}
.my-sai {
@apply mt-sai mb-sai;
}
.my-sai {
@apply mt-sai mb-sai;
}
.m-sai {
@apply my-sai mx-sai;
}
.m-sai {
@apply my-sai mx-sai;
}
.top-sai {
top: var(--sait);
}
.top-sai {
top: var(--sait);
}
.right-sai {
right: var(--sair);
}
.right-sai {
right: var(--sair);
}
.bottom-sai {
bottom: var(--saib);
}
.bottom-sai {
bottom: var(--saib);
}
.left-sai {
left: var(--sail);
}
.h-saib {
height: var(--saib);
.left-sai {
left: var(--sail);
}
}
/* utilities */
@@ -381,11 +379,11 @@ progress[value]::-webkit-progress-value {
/* content width for fixed elements */
.cw {
@apply w-full md:w-[calc(100%-18.5rem)];
@apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
}
.cb {
@apply bottom-14 md:bottom-0;
@apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
}
/* chat view */
src/app/components/Chat.svelte
+2
View File
@@ -126,9 +126,11 @@
})
observer.observe(chatCompose!)
observer.observe(dynamicPadding!)
return () => {
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
}
})
src/app/components/PrimaryNav.svelte
+4 -3
View File
@@ -51,7 +51,8 @@
<svelte:window bind:innerHeight={windowHeight} />
<div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
<div
class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
<div class="flex h-full flex-col justify-between">
<div>
{#if PLATFORM_RELAY}
@@ -103,9 +104,9 @@
{@render children?.()}
<!-- a little extra something for ios -->
<div class="fixed bottom-0 left-0 right-0 z-nav h-saib bg-base-100 md:hidden"></div>
<div class="fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden"></div>
<div
class="border-top bottom-0 fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
<div class="content-padding-x content-sizing flex justify-between px-2">
<div class="flex gap-2 sm:gap-8">
<PrimaryNavItem title="Home" href="/home">
src/app/components/ProfileDetail.svelte
+1 -1
View File
@@ -66,7 +66,7 @@
</div>
<ProfileInfo {pubkey} {url} />
<ModalFooter>
<Button onclick={back} class="btn btn-link">
<Button onclick={back} class="btn btn-link hidden md:block">
<Icon icon="alt-arrow-left" />
Go back
</Button>
src/app/components/Toast.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
{#if $toast}
{@const theme = $toast.theme || "info"}
<div transition:fly class="toast z-toast">
<div transition:fly class="bottom-sai right-sai toast z-toast">
{#key $toast.id}
<div
role="alert"
src/lib/components/ContentSearch.svelte
+2 -2
View File
@@ -8,13 +8,13 @@
const {...props}: Props = $props()
</script>
<div class="col-2 content-padding-t content-padding-x h-full {props.class}">
<div class="content-padding-t content-padding-x flex h-full flex-col gap-1 {props.class}">
<div class="z-feature">
<div class="content-sizing">
{@render props.input?.()}
</div>
</div>
<div class="scroll-container overflow-auto pt-2">
<div class="scroll-container overflow-auto">
<div class="content-sizing">
{@render props.content?.()}
</div>
src/lib/components/Drawer.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
onclick={onClose}>
</button>
<div
class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
class="scroll-container py-sai pr-sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
transition:translate={{axis: "x", duration: 300}}>
{@render children?.()}
</div>
src/lib/components/Page.svelte
+1 -1
View File
@@ -9,6 +9,6 @@
<div
data-component="Page"
class="scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
class="scroll-container bottom-sai top-sai cw fixed mb-14 overflow-auto bg-base-200 md:mb-0 {props.class}">
{@render props.children?.()}
</div>
src/lib/components/PageBar.svelte
+2 -2
View File
@@ -11,9 +11,9 @@
const {...props}: Props = $props()
</script>
<div data-component="PageBar" class="cw fixed top-2 z-feature rounded-xl px-2 pt-2 {props.class}">
<div data-component="PageBar" class="cw top-sai fixed z-feature p-2">
<div
class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
class="flex min-h-12 items-center justify-between gap-4 rounded-xl rounded-xl bg-base-100 px-4 shadow-xl">
<div class="ellipsize flex items-center gap-4 whitespace-nowrap">
{@render props.icon?.()}
{@render props.title?.()}
src/lib/components/PageContent.svelte
+2 -1
View File
@@ -13,6 +13,7 @@
<div
{...props}
bind:this={element}
class="scroll-container cw fixed top-12 h-[calc(100%-6.5rem)] overflow-y-auto overflow-x-hidden md:h-[calc(100%-3rem)] {props.class}">
data-component="PageContent"
class="scroll-container cw md:bottom-sai fixed bottom-[calc(var(--saib)+3.5rem)] top-[calc(var(--sait)+3rem)] overflow-y-auto overflow-x-hidden {props.class}">
{@render children?.()}
</div>
src/lib/components/SecondaryNav.svelte
+2 -1
View File
@@ -6,6 +6,7 @@
const {children}: Props = $props()
</script>
<div class="hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
<div
class="ml-sai mt-sai mb-sai hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
{@render children?.()}
</div>
src/routes/settings/about/+page.svelte
+10 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import {Capacitor} from "@capacitor/core"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
@@ -19,13 +20,15 @@
<p class="text-center text-2xl">Thanks for using</p>
<h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
<h3 class="text-2xl sm:h-12">Donate</h3>
<p class="sm:h-16">Funds will be used to support development.</p>
<Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
Support the Developer
</Link>
</div>
{#if Capacitor.getPlatform() !== "ios"}
<div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
<h3 class="text-2xl sm:h-12">Donate</h3>
<p class="sm:h-16">Funds will be used to support development.</p>
<Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
Support the Developer
</Link>
</div>
{/if}
<div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
<h3 class="text-2xl sm:h-12">Get in touch</h3>
<p class="sm:h-16">Having problems? Let us know.</p>
src/routes/spaces/[relay]/+page.svelte
+1 -1
View File
@@ -189,8 +189,8 @@
</Button>
</div>
{#if pubkey}
<Divider>Recent posts from the relay admin</Divider>
<div class="hidden flex-col gap-2" class:!flex={relayAdminEvents.length > 0}>
<Divider>Recent posts from the relay admin</Divider>
<ProfileFeed hideLoading {url} {pubkey} bind:events={relayAdminEvents} />
</div>
{/if}
src/routes/spaces/[relay]/[room]/+page.svelte
+5 -1
View File
@@ -213,13 +213,17 @@
}))
const observer = new ResizeObserver(() => {
dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
if (dynamicPadding && chatCompose) {
dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
}
})
observer.observe(chatCompose!)
observer.observe(dynamicPadding!)
return () => {
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
}
})