Ilia Denisov
f6bffd1f57
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 10s
CI / ui (pull_request) Successful in 27s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 54s
- Telegram (lib/telegram.ts): chrome colours (setHeaderColor/setBackgroundColor/setBottomBarColor) match Telegram's header/bg/bottom bar to the app; native BackButton on sub-screens (app chevron hidden in TG); HapticFeedback on tile place/commit/error; enableClosingConfirmation while a game is open; disableVerticalSwipes so swipe-to-minimise doesn't fight tile drag / board scroll - #9 board-only vertical scroll: Screen 'column' mode lets the board area scroll while score/status/rack/tab bar stay fixed (zoom keeps its own scroll) - #10 check-word dialog opens in Modal keyboard-overlay mode (top-anchored, keyboard overlays the empty area) — no resize/relayout jank; other modals stay keyboard-aware - docs: UI_DESIGN Telegram integration + vertical fit/keyboard; PLAN round 2-3 follow-ups
65 lines
1.5 KiB
Svelte
65 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import Header from './Header.svelte';
|
|
import AdBanner from './AdBanner.svelte';
|
|
|
|
// The app-shell layout (all screens): the nav bar grows; the ad strip, content and
|
|
// optional tab bar pin to the bottom (ad directly above the content). Pass `scroll`
|
|
// false for screens that own their vertical fit (the game board).
|
|
let {
|
|
title,
|
|
back,
|
|
menu,
|
|
tabbar,
|
|
children,
|
|
scroll = true,
|
|
growNav = false,
|
|
column = false,
|
|
}: {
|
|
title: string;
|
|
back?: string;
|
|
menu?: Snippet;
|
|
tabbar?: Snippet;
|
|
children?: Snippet;
|
|
scroll?: boolean;
|
|
growNav?: boolean;
|
|
// column lays the content out as a flex column so a child can own the vertical fit
|
|
// (the game makes only its board scroll while the score/rack/tab bar stay put).
|
|
column?: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="screen">
|
|
<Header {title} {back} {menu} grow={growNav} />
|
|
<AdBanner />
|
|
<main class="content" class:scroll class:fill={!growNav} class:column>{@render children?.()}</main>
|
|
{#if tabbar}
|
|
<nav class="tabbar">{@render tabbar()}</nav>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.screen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
.content {
|
|
flex: 0 1 auto;
|
|
min-height: 0;
|
|
}
|
|
.content.fill {
|
|
flex: 1 1 auto;
|
|
}
|
|
.content.scroll {
|
|
overflow-y: auto;
|
|
}
|
|
.content.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tabbar {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|