Let the launch screen scroll, now that it offers three routes
The signed-out screen was a `VerticalLayout { alignment: center }` with
no scroll. That was already tight with two routes; the folder option
made the column taller than a 900x560 window, and a centred layout that
overflows clips at *both* ends — so the masthead and the last route
disappear together, with nothing on screen to suggest either existed.
A Flickable whose viewport follows the content, and a top padding that
centres the column only while it fits. Both cases checked against the
running app: centred at 1000x1800, top-aligned and scrollable at
900x560.
This commit is contained in:
@@ -93,15 +93,37 @@ export component LaunchScreen inherits Rectangle {
|
||||
init => { self.focus(); }
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
padding: Theme.gap-lg;
|
||||
// Scrollable, and it has to be. The signed-out screen offers three routes
|
||||
// — browser sign-in, an app password, a folder — and the column is taller
|
||||
// than a laptop window in a side-by-side split, let alone a phone. A
|
||||
// centred `VerticalLayout` that overflows clips at *both* ends, so the
|
||||
// masthead and the last route disappear together and there is no
|
||||
// indication either existed.
|
||||
//
|
||||
// `viewport-height` follows the content rather than being fixed: the
|
||||
// screen's height changes by hundreds of pixels as it moves between
|
||||
// signed-out, awaiting approval, and signed-in, and a constant would
|
||||
// either strand a scrollbar on the short states or clip the tall one.
|
||||
Flickable {
|
||||
viewport-height: max(self.height, column.preferred-height);
|
||||
|
||||
column := VerticalLayout {
|
||||
width: 100%;
|
||||
alignment: start;
|
||||
padding: Theme.gap-lg;
|
||||
// Centres the column when it fits and lets it start at the top
|
||||
// when it does not — the two cases the fixed `alignment: center`
|
||||
// could not both serve.
|
||||
padding-top: max(
|
||||
Theme.gap-lg,
|
||||
(root.height - card.preferred-height - 2 * Theme.gap-lg) / 2
|
||||
);
|
||||
|
||||
Rectangle {
|
||||
max-width: 460px;
|
||||
horizontal-stretch: 0;
|
||||
|
||||
VerticalLayout {
|
||||
card := VerticalLayout {
|
||||
spacing: Theme.gap-lg;
|
||||
|
||||
// --- masthead ---
|
||||
@@ -423,5 +445,6 @@ export component LaunchScreen inherits Rectangle {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user