Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
+11 -20
packages/site/src/components/navigation.js
··· 1 1 import styled from 'styled-components'; 2 2 import { Link } from 'react-router-dom'; 3 3 4 - export const Navigation = styled.div` 5 - align-items: center; 6 - background: #8196ff; 7 - display: flex; 8 - flex-direction: row; 9 - height: 6rem; 10 - width: 100%; 11 - 12 - & img { 13 - margin-left: auto; 14 - @media (min-width: 768px) { 15 - margin-left: 0; 16 - } 4 + export const SidebarContainer = styled.div` 5 + display: ${p => (p.hidden ? 'none' : 'block')}; 6 + position: absolute; 7 + @media ${({ theme }) => theme.media.sm} { 8 + display: block; 9 + position: static; 10 + width: ${p => p.theme.layout.sidebar}; 17 11 } 18 - `; 19 - 20 - export const SidebarContainer = styled.div` 21 - width: ${p => p.theme.layout.sidebar}; 22 12 `; 23 13 24 14 export const SideBarStripes = styled.div` ··· 36 26 display: flex; 37 27 flex-direction: column; 38 28 z-index: 1; 39 - 40 29 overflow-y: scroll; 41 30 min-height: 100%; 42 - width: ${p => p.theme.layout.sidebar}; 43 - 31 + width: 100%; 44 32 padding: ${p => p.theme.spacing.md}; 45 33 padding-right: ${p => p.theme.spacing.sm}; 46 34 background: ${p => p.theme.colors.bg}; 47 35 line-height: ${p => p.theme.lineHeights.body}; 48 36 font-size: ${p => p.theme.fontSizes.small}; 37 + @media ${({ theme }) => theme.media.sm} { 38 + width: ${p => p.theme.layout.sidebar}; 39 + } 49 40 `; 50 41 51 42 export const SidebarNavItem = styled(Link)`
+12 -19
packages/site/src/components/sidebar.js
··· 1 - import React, { Fragment, useMemo } from 'react'; 1 + import React, { Fragment, useMemo, useState } from 'react'; 2 2 import PropTypes from 'prop-types'; 3 - import styled from 'styled-components'; 3 + import { useLocation } from 'react-router-dom'; 4 + import styled, { css } from 'styled-components'; 4 5 import * as path from 'path'; 5 6 6 7 import { useMarkdownTree, useMarkdownPage } from 'react-static-plugin-md-pages'; ··· 14 15 SideBarStripes, 15 16 } from './navigation'; 16 17 17 - import closeButton from '../assets/close.svg'; 18 + import { mediaSizes } from '../styles/theme'; 19 + 18 20 import logoSidebar from '../assets/sidebar-badge.svg'; 19 21 20 22 const HeroLogo = styled.img.attrs(() => ({ 21 23 src: logoSidebar, 22 24 alt: 'urql', 23 25 }))` 26 + display: none; 24 27 width: ${p => p.theme.layout.logo}; 25 28 margin-bottom: ${p => p.theme.spacing.sm}; 26 29 align-self: center; 30 + @media ${p => p.theme.media.sm} { 31 + display: block; 32 + } 27 33 `; 28 34 29 35 const ContentWrapper = styled.div` ··· 32 38 padding: ${p => p.theme.spacing.xs} 0; 33 39 `; 34 40 35 - const CloseButton = styled.img.attrs(() => ({ 36 - src: closeButton 37 - }))` 38 - cursor: pointer; 39 - top: 1rem; 40 - right: 7rem; 41 - position: absolute; 42 - display: none; 43 - `; 44 - 45 41 const relative = (from, to) => { 46 42 if (!from || !to) return null; 47 43 const pathname = path.relative(path.dirname(from), to); 48 44 return { pathname }; 49 45 }; 50 46 51 - const Sidebar = () => { 47 + const Sidebar = ({ sidebarOpen }) => { 52 48 const currentPage = useMarkdownPage(); 53 49 const tree = useMarkdownTree(); 54 50 ··· 82 78 }, [tree, currentPage]); 83 79 84 80 return ( 85 - <SidebarContainer> 81 + <SidebarContainer hidden={!sidebarOpen}> 86 82 <SideBarStripes /> 87 83 <SidebarWrapper> 88 - <CloseButton /> 89 84 <HeroLogo /> 90 - <ContentWrapper> 91 - {sidebarItems} 92 - </ContentWrapper> 85 + <ContentWrapper>{sidebarItems}</ContentWrapper> 93 86 </SidebarWrapper> 94 87 </SidebarContainer> 95 88 );
+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
··· 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
··· 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
··· 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
··· 18 18 export const GlobalStyle = createGlobalStyle` 19 19 * { 20 20 box-sizing: inherit; 21 + min-width: 0; 21 22 } 22 23 23 24 html {
+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 = {