BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-09 16:59:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(iPad): accessory bar styling, positioning, and paste dialog

Browse Source 
Move keyboard accessory bar and paste dialog CSS from mobile.css
(gated behind max-width: 1023px) to styles.css (always loaded).
iPad landscape (≥1024px) was getting unstyled white buttons.

- Add position:fixed via .touch-device class for accessory bar
- Fix dismiss button: gray-blue → blue, matching phone styling
- JS: position accessory bar above keyboard on iPad via direct bottom
- JS: position CJK above accessory bar (bottom: keyboardHeight + 44)
- Clear accessory bar bottom in resetLayout()
This commit is contained in:
Teigen
2026-06-17 23:40:04 +08:00
parent cd7d8c7329
commit 566c65c3c9
3 changed files with 202 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/mobile-handlers.js
+12 -12
View File
@@ -301,13 +301,12 @@ const KeyboardHandler = {
if (this.keyboardVisible) {
const keyboardHeight = this.initialViewportHeight - (window.visualViewport.height || window.innerHeight);
const accessoryBar = document.querySelector('.keyboard-accessory-bar');
// Toolbar and accessory bar: only transform on phones/small tablets where
// they are position:fixed. On iPad (≥768px) they're in normal flow inside
// the shrunk .app container and already sit above the keyboard.
if (isSmallMedium) {
// Phones/small tablets: toolbar and accessory bar are position:fixed
// via CSS. Use translateY to lift them above the keyboard.
const toolbar = document.querySelector('.toolbar');
const accessoryBar = document.querySelector('.keyboard-accessory-bar');
const main = document.querySelector('.main');
const layoutHeight = window.innerHeight;
@@ -324,25 +323,25 @@ const KeyboardHandler = {
const cjkInputHeight = cjkInput?.classList.contains('cjk-input-visible') ? 44 : 0;
main.style.paddingBottom = `${84 + cjkInputHeight}px`;
}
} else if (keyboardHeight > 0) {
// iPad: use direct bottom positioning (translateY unreliable —
// iOS auto-scrolls the visual viewport, making keyboardOffset ≈ 0).
if (accessoryBar) {
accessoryBar.style.bottom = `${keyboardHeight}px`;
}
}
// CJK textarea positioning (always position:fixed on touch devices).
if (cjkInput?.classList.contains('cjk-input-visible') && keyboardHeight > 0) {
if (isSmallMedium) {
// Phones: use translateY like toolbar/accessory bar. The CSS bottom
// (84px) is relative to the layout viewport; translateY lifts it
// above the keyboard. This works on phones where iOS doesn't
// auto-scroll the visual viewport for the CJK textarea.
// Phones: use translateY like toolbar/accessory bar.
const layoutHeight = window.innerHeight;
const visualBottom = window.visualViewport.offsetTop + window.visualViewport.height;
const keyboardOffset = Math.max(0, layoutHeight - visualBottom);
cjkInput.style.transform = keyboardOffset > 0 ? `translateY(${-keyboardOffset}px)` : '';
cjkInput.style.bottom = '';
} else {
// iPad: use direct bottom positioning from keyboard height.
// translateY breaks on iPad because iOS auto-scrolls the visual
// viewport when the CJK textarea receives focus, making
// keyboardOffset unreliable (approaches 0).
// iPad: direct bottom = keyboard + accessory bar height.
cjkInput.style.bottom = `${keyboardHeight + 44}px`;
cjkInput.style.transform = '';
}
@@ -364,6 +363,7 @@ const KeyboardHandler = {
}
if (accessoryBar) {
accessoryBar.style.transform = '';
accessoryBar.style.bottom = '';
}
if (cjkInput) {
cjkInput.style.transform = '';