feat(maestro): add paging and symbol keys to the mobile key bar
PgUp/PgDn and the `- / | ~` symbols the soft keyboard buries behind a page switch join the bar, in an 8-column grid that keeps the cursor inverted-T. Columns hold a thumb's width, so a narrow phone scrolls the bar sideways instead of shrinking the caps. Closes #7
This commit is contained in:
+16
-7
@@ -1499,20 +1499,29 @@ input.leaf-rename:focus {
|
||||
|
||||
/* ---------- mobile special-key bar (Termux-style) ---------- */
|
||||
|
||||
/* Two compact rows (Termux layout) in a 5-column grid the 10 keys flow into:
|
||||
Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T on
|
||||
the right (Home/End fill the top corners). Layout is always defined; only
|
||||
*visibility* is gated: hidden on precise-pointer devices (a physical keyboard
|
||||
already has these keys), shown on touch where the soft keyboard omits them.
|
||||
The shell tracks the visual viewport (see `#app`), so it lands above it. */
|
||||
/* Two compact rows (Termux layout) in an 8-column grid the 16 keys flow into:
|
||||
Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T in
|
||||
the middle (Home/End fill the top corners), then PgUp/PgDn and the shell
|
||||
symbols. Columns never shrink below a thumb's width — on a narrow phone the
|
||||
bar scrolls sideways instead. Layout is always defined; only *visibility* is
|
||||
gated: hidden on precise-pointer devices (a physical keyboard already has
|
||||
these keys), shown on touch where the soft keyboard omits them. The shell
|
||||
tracks the visual viewport (see `#app`), so it lands above it. */
|
||||
.attach-keybar {
|
||||
display: none;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-columns: repeat(8, minmax(2.5rem, 1fr));
|
||||
gap: var(--sp-1);
|
||||
padding: var(--sp-1) var(--sp-2);
|
||||
padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.attach-keybar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Shown on touch only while *this* terminal is focused (`keybar-active`, toggled
|
||||
|
||||
Reference in New Issue
Block a user