Skip to content

Commit b6d4b79

Browse files
AlexeyMzAlexeyMz
committed
Fix vertical resize on mobile when keyboard opens in the examples
1 parent e7d5ec8 commit b6d4b79

7 files changed

Lines changed: 131 additions & 106 deletions

File tree

‎src/components/InlineReactodia/index.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import clsx from 'clsx';
22
import * as React from 'react';
33
import BrowserOnly from '@docusaurus/BrowserOnly';
4+
import Head from '@docusaurus/Head';
45

56
import styles from './styles.module.css';
67

7-
export interface InlineReactodiaProps {
8+
export function InlineReactodiaHead() {
9+
return (
10+
<Head>
11+
<meta name="viewport" content="initial-scale=1, interactive-widget=resizes-content" />
12+
</Head>
13+
);
14+
}
15+
16+
export function InlineReactodia(props: {
817
fullSize?: boolean;
918
height?: string;
1019
children: React.ReactNode;
11-
}
12-
13-
export function InlineReactodia(props: InlineReactodiaProps) {
20+
}) {
1421
const {fullSize, height, children} = props;
1522
const css = {
1623
['--inline-reactodia-height']: fullSize ? 'auto' : height,

‎src/pages/playground/basic.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: Basic'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundBasic} = require('@site/src/examples/PlaygroundBasic') as
13-
typeof import('@site/src/examples/PlaygroundBasic');
14-
return (
15-
<InlineReactodia fullSize>
16-
<PlaygroundBasic />
17-
</InlineReactodia>
18-
);
19-
}}
20-
</BrowserOnly>
21-
<ViewSource target='/docs/examples/basic' />
22-
</Layout>
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: Basic'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundBasic} = require('@site/src/examples/PlaygroundBasic') as
15+
typeof import('@site/src/examples/PlaygroundBasic');
16+
return (
17+
<InlineReactodia fullSize>
18+
<PlaygroundBasic />
19+
</InlineReactodia>
20+
);
21+
}}
22+
</BrowserOnly>
23+
<ViewSource target='/docs/examples/basic' />
24+
</Layout>
25+
</>
2326
);
2427
}

‎src/pages/playground/classic-workspace.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: Classic Workspace'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundClassicWorkspace} = require('@site/src/examples/PlaygroundClassicWorkspace') as
13-
typeof import('@site/src/examples/PlaygroundClassicWorkspace');
14-
return (
15-
<InlineReactodia fullSize>
16-
<PlaygroundClassicWorkspace />
17-
</InlineReactodia>
18-
);
19-
}}
20-
</BrowserOnly>
21-
<ViewSource target='/docs/examples/classic-workspace' />
22-
</Layout>
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: Classic Workspace'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundClassicWorkspace} = require('@site/src/examples/PlaygroundClassicWorkspace') as
15+
typeof import('@site/src/examples/PlaygroundClassicWorkspace');
16+
return (
17+
<InlineReactodia fullSize>
18+
<PlaygroundClassicWorkspace />
19+
</InlineReactodia>
20+
);
21+
}}
22+
</BrowserOnly>
23+
<ViewSource target='/docs/examples/classic-workspace' />
24+
</Layout>
25+
</>
2326
);
2427
}

‎src/pages/playground/rdf.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: RDF'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundRdf} = require('@site/src/examples/PlaygroundRdf') as
13-
typeof import('@site/src/examples/PlaygroundRdf');
14-
return (
15-
<InlineReactodia fullSize>
16-
<PlaygroundRdf />
17-
</InlineReactodia>
18-
);
19-
}}
20-
</BrowserOnly>
21-
<ViewSource target='/docs/examples/rdf' />
22-
</Layout>
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: RDF'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundRdf} = require('@site/src/examples/PlaygroundRdf') as
15+
typeof import('@site/src/examples/PlaygroundRdf');
16+
return (
17+
<InlineReactodia fullSize>
18+
<PlaygroundRdf />
19+
</InlineReactodia>
20+
);
21+
}}
22+
</BrowserOnly>
23+
<ViewSource target='/docs/examples/rdf' />
24+
</Layout>
25+
</>
2326
);
2427
}

‎src/pages/playground/sparql.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: SPARQL'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundSparql} = require('@site/src/examples/PlaygroundSparql')
13-
typeof import('@site/src/examples/PlaygroundSparql');
14-
return (
15-
<InlineReactodia fullSize>
16-
<PlaygroundSparql />
17-
</InlineReactodia>
18-
);
19-
}}
20-
</BrowserOnly>
21-
<ViewSource target='/docs/examples/sparql' />
22-
</Layout>
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: SPARQL'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundSparql} = require('@site/src/examples/PlaygroundSparql')
15+
typeof import('@site/src/examples/PlaygroundSparql');
16+
return (
17+
<InlineReactodia fullSize>
18+
<PlaygroundSparql />
19+
</InlineReactodia>
20+
);
21+
}}
22+
</BrowserOnly>
23+
<ViewSource target='/docs/examples/sparql' />
24+
</Layout>
25+
</>
2326
);
2427
}

‎src/pages/playground/stress-test.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: Stress Test'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundStressTest} = require('@site/src/examples/PlaygroundStressTest') as
13-
typeof import('@site/src/examples/PlaygroundStressTest');
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: Stress Test'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundStressTest} = require('@site/src/examples/PlaygroundStressTest') as
15+
typeof import('@site/src/examples/PlaygroundStressTest');
1416

15-
const params = new URLSearchParams(document.location.search);
16-
const nodeCount = params.has('node-count') ? Number(params.get('node-count')) : NaN;
17-
const edgedPerNode = params.has('edges-per-node') ? Number(params.get('edges-per-node')) : NaN;
17+
const params = new URLSearchParams(document.location.search);
18+
const nodeCount = params.has('node-count') ? Number(params.get('node-count')) : NaN;
19+
const edgedPerNode = params.has('edges-per-node') ? Number(params.get('edges-per-node')) : NaN;
1820

19-
return (
20-
<InlineReactodia fullSize>
21-
<PlaygroundStressTest
22-
nodeCount={Number.isFinite(nodeCount) ? nodeCount : undefined}
23-
edgesPerNode={Number.isFinite(edgedPerNode) ? edgedPerNode : undefined}
24-
/>
25-
</InlineReactodia>
26-
);
27-
}}
28-
</BrowserOnly>
29-
<ViewSource target='/docs/examples/stress-test' />
30-
</Layout>
21+
return (
22+
<InlineReactodia fullSize>
23+
<PlaygroundStressTest
24+
nodeCount={Number.isFinite(nodeCount) ? nodeCount : undefined}
25+
edgesPerNode={Number.isFinite(edgedPerNode) ? edgedPerNode : undefined}
26+
/>
27+
</InlineReactodia>
28+
);
29+
}}
30+
</BrowserOnly>
31+
<ViewSource target='/docs/examples/stress-test' />
32+
</Layout>
33+
</>
3134
);
3235
}

‎src/pages/playground/wikidata.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import Layout from '@theme/Layout';
3-
import { InlineReactodia } from '@site/src/components/InlineReactodia';
3+
import { InlineReactodia, InlineReactodiaHead } from '@site/src/components/InlineReactodia';
44
import { ViewSource } from '@site/src/components/ViewSource';
55

66
export default function Example(): JSX.Element {
77
return (
8-
<Layout title='Playground: Wikidata'
9-
noFooter>
10-
<BrowserOnly>
11-
{() => {
12-
const {PlaygroundWikidata} = require('@site/src/examples/PlaygroundWikidata') as
13-
typeof import('@site/src/examples/PlaygroundWikidata');
14-
return (
15-
<InlineReactodia fullSize>
16-
<PlaygroundWikidata />
17-
</InlineReactodia>
18-
);
19-
}}
20-
</BrowserOnly>
21-
<ViewSource target='/docs/examples/wikidata' />
22-
</Layout>
8+
<>
9+
<InlineReactodiaHead />
10+
<Layout title='Playground: Wikidata'
11+
noFooter>
12+
<BrowserOnly>
13+
{() => {
14+
const {PlaygroundWikidata} = require('@site/src/examples/PlaygroundWikidata') as
15+
typeof import('@site/src/examples/PlaygroundWikidata');
16+
return (
17+
<InlineReactodia fullSize>
18+
<PlaygroundWikidata />
19+
</InlineReactodia>
20+
);
21+
}}
22+
</BrowserOnly>
23+
<ViewSource target='/docs/examples/wikidata' />
24+
</Layout>
25+
</>
2326
);
2427
}

0 commit comments

Comments
 (0)