Merge pull request #460 from rvsia/fixCssOnPhones

Fix styling issues on documentation

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/common/connected-links.js

@@ -1,42 +1,30 @@
 import React, { useContext } from 'react';
-import clsx from 'clsx';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import makeStyles from '@material-ui/styles/makeStyles';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 
 import MenuContext from '../navigation/menu-context';
 
 const useStyles = makeStyles(() => ({
   linksContainer: {
     paddingLeft: 32,
-    paddingRight: 64,
-    marginTop: 16,
+    paddingRight: 32,
+    marginTop: 64,
     marginBottom: 16
   },
-  withSideNav: {
-    width: 'calc(100% - 240px)'
-  },
   link: {
     textDecoration: 'none'
   }
 }));
 
 const ConnectedLinks = () => {
   const { prev, next } = useContext(MenuContext);
-  const { pathname } = useRouter();
   const classNames = useStyles();
   return (
-    <Grid
-      container
-      justify="space-between"
-      className={clsx(classNames.linksContainer, {
-        [classNames.withSideNav]: pathname.includes('/renderer/')
-      })}
-    >
+    <Grid container justify="space-between" className={classNames.linksContainer}>
       <Grid item>
         {prev && prev.link && (
           <Link href={`/${prev.link}`}>

packages/react-renderer-demo/src/app/src/components/footer.js

@@ -13,6 +13,8 @@ import Paper from '@material-ui/core/Paper';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';
 
+import grey from '@material-ui/core/colors/grey';
+
 import GhIcon from './common/gh-svg-icon';
 import NpmSvgIcon from './common/npm-svg-icon';
 import TwitterIcon from './common/twitter-svg-icon';
@@ -42,7 +44,8 @@ const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
   footer: {
-    marginTop: 64,
+    //marginTop: 64,
+    backgroundColor: grey[200],
     display: 'flex',
     justifyContent: 'space-between',
     flexWrap: 'wrap',
@@ -66,6 +69,9 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: 2,
     display: 'flex'
   },
+  foooterRight: {
+    float: 'right'
+  },
   listHeader: {
     display: 'flex',
     alignItems: 'center',
@@ -94,8 +100,8 @@ const Footer = ({ open }) => {
               </div>
             </Paper>
           </Grid>
-          <Grid xs={12} md={4} item>
-            <Paper elevation={0} className={classes.foooterCard}>
+          <Grid xs={12} md={8} item>
+            <Paper elevation={0} className={clsx(classes.foooterCard, classes.foooterRight)}>
               <List
                 subheader={
                   <ListSubheader className={classes.listHeader}>

packages/react-renderer-demo/src/app/src/components/layout.js

@@ -31,22 +31,22 @@ export const drawerWidth = 240;
 const useStyles = makeStyles((theme) => ({
   mainGradient: {
     backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)',
-    backgroundSize: '100vw 100vh',
+    backgroundSize: '100% 100vh',
     backgroundRepeat: 'no-repeat',
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen
     })
   },
   mainGradientShift: {
-    width: `calc(100vw - ${drawerWidth}px)`,
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
     })
   },
   root: {
-    display: 'flex'
+    display: 'flex',
+    minHeight: 'calc(100vh - 16px)'
   },
   appBar: {
     position: 'fixed',
@@ -56,8 +56,11 @@ const useStyles = makeStyles((theme) => ({
     })
   },
   contentWrapper: {
-    paddingTop: 86,
-    paddingBottom: 32
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    minHeight: '100%',
+    paddingTop: 86
   },
   menuButton: {
     marginRight: theme.spacing(2)
@@ -101,7 +104,7 @@ const useStyles = makeStyles((theme) => ({
     right: 0,
     width: '100%',
     backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)',
-    backgroundSize: '100vw 100vh',
+    backgroundSize: '100% 100vh',
     backgroundRepeat: 'no-repeat',
     zIndex: 900
   },
@@ -219,8 +222,10 @@ const Layout = ({ children }) => {
             >
               {children}
             </div>
-            <ConnectedLinks />
-            <Footer />
+            <div>
+              <ConnectedLinks />
+              <Footer />
+            </div>
           </div>
         </main>
       </div>