mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 07:22:10 -05:00
Fix page height on mobile.
Fix keyboard focus on mobile.
This commit is contained in:
parent
55633219f9
commit
f25b488863
5 changed files with 14 additions and 6 deletions
|
@ -1,7 +1,3 @@
|
|||
// import classNames from "classnames";
|
||||
// import { memo } from "preact/compat";
|
||||
// import styles from "./TextArea.module.scss";
|
||||
// import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
export interface TextAreaProps {
|
||||
|
|
|
@ -2,6 +2,7 @@ import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
|
|||
import { createGlobalStyle } from "styled-components";
|
||||
import { connectState } from "../redux/connector";
|
||||
import { Children } from "../types/Preact";
|
||||
import { useEffect } from "preact/hooks";
|
||||
import { createContext } from "preact";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
|
@ -126,6 +127,14 @@ function Theme(props: Props) {
|
|||
...props.options?.custom
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
|
||||
resize();
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
return () => window.removeEventListener('resize', resize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={theme}>
|
||||
<Helmet>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
|
||||
import { useEffect, useRef } from "preact/hooks";
|
||||
import { internalSubscribe } from "./eventEmitter";
|
||||
import { isTouchscreenDevice } from "./isTouchscreenDevice";
|
||||
import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
|
||||
|
||||
type TextAreaAutoSizeProps = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'style' | 'value'> & TextAreaProps & {
|
||||
forceFocus?: boolean
|
||||
|
@ -33,6 +34,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
|
|||
ref.current.focus();
|
||||
}
|
||||
|
||||
if (isTouchscreenDevice) return;
|
||||
if (autoFocus && !inputSelected()) {
|
||||
ref.current.focus();
|
||||
}
|
||||
|
|
|
@ -41,7 +41,7 @@ export default function App() {
|
|||
return (
|
||||
<OverlappingPanels
|
||||
width="100vw"
|
||||
height="100vh"
|
||||
height="var(--app-height)"
|
||||
leftPanel={inSpecial ? undefined : { width: 292, component: <LeftSidebar /> }}
|
||||
rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
|
||||
bottomNav={{
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
:root {
|
||||
--app-height: 100vh;
|
||||
--sidebar-active: var(--secondary-background);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue