Mobile-friendly Documentation (#805)

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>
aws-amplify · Nov 19, 2021 · b62e07a · b62e07a
1 parent 11e3ccb
commit b62e07a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git a/docs/src/components/Layout/Header.tsx b/docs/src/components/Layout/Header.tsx
@@ -14,6 +14,8 @@ import {
   IconMenu,
   Divider,
   useTheme,
+  Menu,
+  MenuItem,
 } from '@aws-amplify/ui-react';
 import { useRouter } from 'next/router';
 import { Logo } from '@/components/Logo';
@@ -72,9 +74,26 @@ export const Header = ({ platform, colorMode, setColorMode }) => {
           alignItems="center"
           padding={`${tokens.space.small} ${tokens.space.xl}`}
         >
-          <Button className="docs-header-menu-button" size="small">
-            <IconMenu />
-          </Button>
+          <Menu className="docs-header-menu-button" size="small">
+            <MenuItem>
+              <NavLink href="/getting-started/installation">
+                Getting started
+              </NavLink>
+            </MenuItem>
+            <MenuItem>
+              <NavLink href="/components">Components</NavLink>
+            </MenuItem>
+            <MenuItem>
+              <NavLink href="/theming">Theming</NavLink>
+            </MenuItem>
+            <Divider />
+            <MenuItem>
+              <NavLink isExternal href="https://docs.amplify.aws">
+                Amplify docs <IconOpenInNew />
+              </NavLink>
+            </MenuItem>
+          </Menu>
+
           <NavLink href="/">
             <a className="docs-logo-link">
               <VisuallyHidden>Amplify UI Home</VisuallyHidden>

diff --git a/docs/src/pages/_app.page.tsx b/docs/src/pages/_app.page.tsx
@@ -27,6 +27,7 @@ function MyApp({ Component, pageProps }) {
     <div className={themeOverride}>
       <Head>
         <title>Amplify UI</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/svg+xml" href={favicon} />
         {/* Adding custom variable fonts from google */}
         {/* Including multiple to show theming capabilities */}

diff --git a/docs/src/pages/index.page.tsx b/docs/src/pages/index.page.tsx
@@ -134,7 +134,10 @@ const HomePage = ({ colorMode, setThemeOverride, themeOverride }) => {
             (more coming soon).
           </Text>
 
-          <Flex direction="row" padding={`${tokens.space.medium} 0 0 0`}>
+          <Flex
+            direction={{ base: 'column-reverse', medium: 'row' }}
+            padding={`${tokens.space.medium} 0 0 0`}
+          >
             <Button
               size="large"
               variation="primary"
@@ -150,7 +153,7 @@ const HomePage = ({ colorMode, setThemeOverride, themeOverride }) => {
               isReadOnly={true}
               className="install-code"
               size="large"
-              innerEndComponent={
+              outerEndComponent={
                 <Copy
                   variation="link"
                   text={`npm i aws-amplify @aws-amplify/ui-${framework}`}
@@ -289,7 +292,9 @@ const HomePage = ({ colorMode, setThemeOverride, themeOverride }) => {
             large: 'row',
           }}
         >
-          <HomePrimitivePreview />
+          <View maxWidth="100%" overflow="hidden">
+            <HomePrimitivePreview />
+          </View>
           <Flex flex="1" direction="column" alignItems="flex-start">
             <Heading level={2}>Primitive Components</Heading>
             <Text className="docs-home-description">

diff --git a/docs/src/styles/docs/home.scss b/docs/src/styles/docs/home.scss
@@ -29,7 +29,6 @@
   height: 10rem;
 }
 
-
 .docs-home-section {
   position: relative;
   padding: var(--amplify-space-xxl);
@@ -40,9 +39,10 @@
 }
 
 .docs-home-section-bg > .amplify-card {
-  width: 50%;
-  margin: calc(var(--amplify-space-xl) * -1) 0 var(--amplify-space-xl)
-    var(--amplify-space-xl);
+  position: relative;
+  max-width: 70ch;
+  margin: calc(var(--amplify-space-xl) * -1) var(--amplify-space-xl)
+    var(--amplify-space-xl) var(--amplify-space-xl);
 }
 
 .install-code {
@@ -53,11 +53,11 @@
 .docs-home-amp-product-card {
   transition: transform var(--amplify-time-medium) ease;
   display: block;
-  
+
   &:hover {
     transform: scale(1.05);
   }
-  
+
   & > .amplify-card {
     width: 100%;
   }