From f25b488863ca1dfc2863d863079d2ec7abdd0068 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 3 Jul 2021 15:23:29 +0100
Subject: [PATCH] Fix page height on mobile. Fix keyboard focus on mobile.
---
src/components/ui/TextArea.tsx | 4 ----
src/context/Theme.tsx | 9 +++++++++
src/lib/TextAreaAutoSize.tsx | 4 +++-
src/pages/RevoltApp.tsx | 2 +-
src/styles/_variables.scss | 1 +
5 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx
index f91b428..d61e43c 100644
--- a/src/components/ui/TextArea.tsx
+++ b/src/components/ui/TextArea.tsx
@@ -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 {
diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index a348dd0..f0e6db4 100644
--- a/src/context/Theme.tsx
+++ b/src/context/Theme.tsx
@@ -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>
diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx
index 46c4e9f..bfc515b 100644
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/src/lib/TextAreaAutoSize.tsx
@@ -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();
}
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index f59844d..9b8cbcd 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -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={{
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3335848..14024c1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,3 +1,4 @@
:root {
+ --app-height: 100vh;
--sidebar-active: var(--secondary-background);
}
--
GitLab