[docs] Don't load the ad on mobile

mui · Aug 13, 2018 · 7260eeb · 7260eeb
1 parent 75b988d
commit 7260eeb
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 111 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -106,7 +106,7 @@ module.exports = {
 
     'prettier/prettier': 'error',
 
-    'jsx-a11y/label-has-associated-control': 'error',
+    'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
   },

diff --git a/docs/src/modules/components/CodeFund.js b/docs/src/modules/components/CodeFund.js
@@ -2,51 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import withWidth from '@material-ui/core/withWidth';
 import Tooltip from '@material-ui/core/Tooltip';
 
-const styles = theme => ({
-  '@global': {
-    '#cf_ad': {
-      padding: theme.spacing.unit,
-      backgroundColor: theme.palette.background.paper,
-      borderRadius: theme.shape.borderRadius,
-      '&& .cf-wrapper': {
-        padding: 0,
-        backgroundColor: 'transparent',
-      },
-      '&& .cf-img-wrapper': {
-        float: 'none',
-        display: 'block',
-      },
-      '&& .cf-text': {
-        ...theme.typography.body1,
-        display: 'block',
-        margin: `${theme.spacing.unit}px 0`,
-        '& strong': {
-          fontWeight: theme.typography.fontWeightMedium,
-        },
-      },
-      '&& .cf-powered-by': {
-        ...theme.typography.caption,
-        marginTop: 0,
-      },
-    },
-  },
-  root: {
-    position: 'relative',
-    minHeight: 180,
-  },
-  info: {
-    ...theme.typography.caption,
-    position: 'absolute',
-    padding: theme.spacing.unit,
-    cursor: 'default',
-    bottom: 0,
-    right: 0,
-  },
-});
-
-class CodeFund extends React.Component {
+class Ad extends React.Component {
   timerAdblock = null;
 
   state = {
@@ -58,6 +17,10 @@ class CodeFund extends React.Component {
       return;
     }
 
+    if (this.props.width === 'xs') {
+      return;
+    }
+
     const script = document.createElement('script');
     script.setAttribute('async', '');
     script.src = 'https://codefund.io/scripts/71fdcb01-40be-4590-af75-cd1bd4773c2a/embed.js';
@@ -101,44 +64,99 @@ class CodeFund extends React.Component {
 
     if (adblock) {
       return (
-        <div className={classes.root}>
-          <div id="cf_ad">
-            <Typography gutterBottom>Like Material-UI?</Typography>
-            <Typography gutterBottom>
-              {`If you don't mind tech-related ads, and want to support Open Source,
-              please whitelist Material-UI in your ad blocker.`}
-            </Typography>
-            <Typography>
-              Thank you!{' '}
-              <span role="img" aria-label="Love">
-                ❤️
-              </span>
-            </Typography>
-          </div>
+        <div id="cf_ad">
+          <Typography gutterBottom>Like Material-UI?</Typography>
+          <Typography gutterBottom>
+            {`If you don't mind tech-related ads, and want to support Open Source,
+            please whitelist Material-UI in your ad blocker.`}
+          </Typography>
+          <Typography>
+            Thank you!{' '}
+            <span role="img" aria-label="Love">
+              ❤️
+            </span>
+          </Typography>
         </div>
       );
     }
 
     return (
       <React.Fragment>
         <div id="code-fund-script-slot" />
-        <div className={classes.root}>
-          <div id="codefund_ad" />
-          {adblock === false && (
-            <Tooltip
-              id="ad-info"
-              title="This ad is designed to support Open Source."
-              placement="left"
-            >
-              <span className={classes.info}>i</span>
-            </Tooltip>
-          )}
-        </div>
+        <div id="codefund_ad" />
+        {adblock === false && (
+          <Tooltip
+            id="ad-info"
+            title="This ad is designed to support Open Source."
+            placement="left"
+          >
+            <span className={classes.info}>i</span>
+          </Tooltip>
+        )}
       </React.Fragment>
     );
   }
 }
 
+Ad.propTypes = {
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.string.isRequired,
+};
+
+const AdWrapped = withWidth()(Ad);
+
+const styles = theme => ({
+  '@global': {
+    '#cf_ad': {
+      padding: theme.spacing.unit,
+      backgroundColor: theme.palette.background.paper,
+      borderRadius: theme.shape.borderRadius,
+      '&& .cf-wrapper': {
+        padding: 0,
+        backgroundColor: 'transparent',
+      },
+      '&& .cf-img-wrapper': {
+        float: 'none',
+        display: 'block',
+      },
+      '&& .cf-text': {
+        ...theme.typography.body1,
+        display: 'block',
+        margin: `${theme.spacing.unit}px 0`,
+        '& strong': {
+          fontWeight: theme.typography.fontWeightMedium,
+        },
+      },
+      '&& .cf-powered-by': {
+        ...theme.typography.caption,
+        marginTop: 0,
+      },
+    },
+  },
+  root: {
+    position: 'relative',
+    minHeight: 180,
+  },
+  info: {
+    ...theme.typography.caption,
+    position: 'absolute',
+    padding: theme.spacing.unit,
+    cursor: 'default',
+    bottom: 0,
+    right: 0,
+  },
+});
+
+function CodeFund(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <AdWrapped classes={classes} />
+    </div>
+  );
+}
+
 CodeFund.propTypes = {
   classes: PropTypes.object.isRequired,
 };