Ilia Denisov
52a0e3160d
- nav bar grows ONLY in game (other screens: minimal nav, content fills); tab bar always bottom - tab bar: tighter icon/label spacing, bigger icons, hint badge on the icon corner - board zoom reworked to width-based (real native scroll, fixes Safari/Chrome) + constant cqw labels; pinch & swipe-to-history dropped (conflict), double-tap kept, history via menu - beginner bonus labels shrunk to fit cells - Draw opens exchange directly (no confirm); confirm popovers restyled like the hamburger dropdown (vertical); removed the floating direction toggle - pending tiles darker bg (no outline); last-word dark-tile highlight (static / 1s flash) - check button disabled for <2/>15 chars, already-checked, or 5s cooldown - global user-select:none (inputs exempt); docs updated; TODO-4 alphabet-on-wire
57 lines
1.2 KiB
Svelte
57 lines
1.2 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,
|
|
}: {
|
|
title: string;
|
|
back?: string;
|
|
menu?: Snippet;
|
|
tabbar?: Snippet;
|
|
children?: Snippet;
|
|
scroll?: boolean;
|
|
growNav?: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="screen">
|
|
<Header {title} {back} {menu} grow={growNav} />
|
|
<AdBanner />
|
|
<main class="content" class:scroll class:fill={!growNav}>{@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;
|
|
}
|
|
.tabbar {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|