Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Update Docs View for Mobile/Tablet (#555)
* WIP: mobile view
* Added basic styling changes for tablet and mobile viewports
* move open/close logic to <Docs />
* fix lint
authored by
Will Golledge
and committed by
GitHub
6f4b4667
49393c56
+84
-73
+5
-4
packages/site/src/html.js
+5
-4
packages/site/src/html.js
···
5
5
<Head>
6
6
<meta charSet="utf-8" />
7
7
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
-
<link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet" />
8
+
<link
9
+
href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap"
10
+
rel="stylesheet"
11
+
/>
9
12
<title>urql Documentation</title>
10
13
</Head>
11
-
<Body>
12
-
{children}
13
-
</Body>
14
+
<Body>{children}</Body>
14
15
</Html>
15
16
);
16
17
+18
-18
packages/site/src/screens/docs/article.js
+18
-18
packages/site/src/screens/docs/article.js
···
11
11
width: 100%;
12
12
position: sticky;
13
13
14
-
display: flex;
14
+
display: ${p => (p.sidebarOpen ? 'none' : 'flex')};
15
15
flex-direction: row-reverse;
16
16
`;
17
17
···
25
25
`;
26
26
27
27
const Legend = styled.aside`
28
-
position: sticky;
29
-
top: ${p => p.theme.layout.header};
30
-
max-height: 100vh;
31
-
width: ${p => p.theme.layout.legend};
32
-
margin: ${p => p.theme.spacing.sm} ${p => p.theme.spacing.md};
33
-
padding: ${p => p.theme.spacing.md} 0;
28
+
display: none;
29
+
30
+
@media ${({ theme }) => theme.media.lg} {
31
+
display: block;
32
+
position: sticky;
33
+
top: ${p => p.theme.layout.header};
34
+
max-height: 100vh;
35
+
width: ${p => p.theme.layout.legend};
36
+
max-width: ${p => p.theme.layout.legendMaxWidth};
37
+
padding: ${p => p.theme.spacing.md} 0;
38
+
margin: ${p => p.theme.spacing.sm} ${p => p.theme.spacing.md};
39
+
}
34
40
`;
35
41
36
42
const LegendTitle = styled.h3`
···
62
68
63
69
return (
64
70
<>
65
-
<LegendTitle>
66
-
In this section
67
-
</LegendTitle>
71
+
<LegendTitle>In this section</LegendTitle>
68
72
<HeadingList>
69
73
{headings.map(heading => (
70
74
<li key={heading.slug}>
71
-
<HeadingItem href={`#${heading.slug}`}>
72
-
{heading.value}
73
-
</HeadingItem>
75
+
<HeadingItem href={`#${heading.slug}`}>{heading.value}</HeadingItem>
74
76
</li>
75
77
))}
76
78
</HeadingList>
···
78
80
);
79
81
};
80
82
81
-
const Article = ({ children }) => (
82
-
<Container>
83
+
const Article = ({ children, sidebarOpen }) => (
84
+
<Container sidebarOpen={sidebarOpen}>
83
85
<Legend>
84
86
<SectionList />
85
87
</Legend>
86
88
<Content>
87
-
<MDXComponents>
88
-
{children}
89
-
</MDXComponents>
89
+
<MDXComponents>{children}</MDXComponents>
90
90
</Content>
91
91
</Container>
92
92
);
+2
-4
packages/site/src/screens/docs/header.js
+2
-4
packages/site/src/screens/docs/header.js
···
48
48
`;
49
49
50
50
const FormidableLogo = styled.img.attrs(() => ({
51
-
src: formidableLogo
51
+
src: formidableLogo,
52
52
}))`
53
53
height: 2.8rem;
54
54
position: relative;
···
62
62
<BlockLink href="https://formidable.com/">
63
63
<FormidableLogo />
64
64
</BlockLink>
65
-
<ProjectWording to="/">
66
-
urql
67
-
</ProjectWording>
65
+
<ProjectWording to="/">urql</ProjectWording>
68
66
</Wrapper>
69
67
</Fixed>
70
68
);
+24
-4
packages/site/src/screens/docs/index.js
+24
-4
packages/site/src/screens/docs/index.js
···
9
9
import Sidebar from '../../components/sidebar';
10
10
11
11
import burger from '../../assets/burger.svg';
12
+
import closeButton from '../../assets/close.svg';
12
13
import logoFormidableDark from '../../assets/logo_formidable_dark.svg';
13
14
14
15
const Container = styled.div`
···
26
27
margin-top: ${p => p.theme.layout.header};
27
28
`;
28
29
30
+
const OpenCloseSidebar = styled.img.attrs(props => ({
31
+
src: props.sidebarOpen ? closeButton : burger,
32
+
}))`
33
+
cursor: pointer;
34
+
display: block;
35
+
margin: ${p => p.theme.spacing.sm} ${p => p.theme.spacing.md};
36
+
position: absolute;
37
+
right: 0;
38
+
top: 0;
39
+
z-index: 1;
40
+
@media ${p => p.theme.media.sm} {
41
+
display: none;
42
+
}
43
+
`;
44
+
29
45
const Docs = props => {
46
+
const [sidebarOpen, setSidebarOpen] = useState(false);
47
+
30
48
return (
31
49
<>
32
50
<Header />
33
51
<Container>
34
-
<Sidebar />
35
-
<Article>
36
-
{props.children}
37
-
</Article>
52
+
<OpenCloseSidebar
53
+
sidebarOpen={sidebarOpen}
54
+
onClick={() => setSidebarOpen(prev => !prev)}
55
+
/>
56
+
<Sidebar sidebarOpen={sidebarOpen} />
57
+
<Article sidebarOpen={sidebarOpen}>{props.children}</Article>
38
58
</Container>
39
59
</>
40
60
);
+1
packages/site/src/styles/global.js
+1
packages/site/src/styles/global.js
+11
-4
packages/site/src/styles/theme.js
+11
-4
packages/site/src/styles/theme.js
···
30
30
header: '4.8rem',
31
31
stripes: '0.9rem',
32
32
sidebar: '28rem',
33
-
legend: '24rem',
33
+
legend: '100%',
34
+
legendMaxWidth: '25rem',
34
35
logo: '12rem',
35
36
};
36
37
···
65
66
input: 'rgba(0, 0, 0, 0.09) 0px 2px 10px -3px',
66
67
};
67
68
69
+
export const mediaSizes = {
70
+
sm: 700,
71
+
md: 960,
72
+
lg: 1200,
73
+
};
74
+
68
75
export const media = {
69
-
sm: '(min-width: 650px)',
70
-
md: '(min-width: 960px)',
71
-
lg: '(min-width: 1200px)',
76
+
sm: `(min-width: ${mediaSizes.sm}px)`,
77
+
md: `(min-width: ${mediaSizes.md}px)`,
78
+
lg: `(min-width: ${mediaSizes.lg}px)`,
72
79
};
73
80
74
81
export const spacing = {