Stage 17 (contour round 3): Telegram Mini Apps polish, board scroll, keyboard overlay
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
This commit is contained in:
Ilia Denisov
2026-06-06 12:55:46 +02:00
parent 645a503532
commit f6bffd1f57
9 changed files with 204 additions and 18 deletions
+9 -1
View File
@@ -14,6 +14,7 @@
children,
scroll = true,
growNav = false,
column = false,
}: {
title: string;
back?: string;
@@ -22,13 +23,16 @@
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}>{@render children?.()}</main>
<main class="content" class:scroll class:fill={!growNav} class:column>{@render children?.()}</main>
{#if tabbar}
<nav class="tabbar">{@render tabbar()}</nav>
{/if}
@@ -50,6 +54,10 @@
.content.scroll {
overflow-y: auto;
}
.content.column {
display: flex;
flex-direction: column;
}
.tabbar {
flex: 0 0 auto;
}