From 7260eeb5deae11ab00a845fa6428c359be414435 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 13 Aug 2018 23:52:55 +0200 Subject: [PATCH] [docs] Don't load the ad on mobile --- .eslintrc.js | 2 +- docs/src/modules/components/CodeFund.js | 156 +++++++++++++----------- yarn.lock | 83 ++++++------- 3 files changed, 130 insertions(+), 111 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a92a05ca4e01c3..6f824dee965e71 100644 --- 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 index 023c880e03e42b..553b6a3dd79189 100644 --- 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,20 +64,18 @@ class CodeFund extends React.Component { if (adblock) { return ( -
-
- Like Material-UI? - - {`If you don't mind tech-related ads, and want to support Open Source, - please whitelist Material-UI in your ad blocker.`} - - - Thank you!{' '} - - ❤️ - - -
+
+ Like Material-UI? + + {`If you don't mind tech-related ads, and want to support Open Source, + please whitelist Material-UI in your ad blocker.`} + + + Thank you!{' '} + + ❤️ + +
); } @@ -122,23 +83,80 @@ class CodeFund extends React.Component { return (
-
-
- {adblock === false && ( - - i - - )} -
+
+ {adblock === false && ( + + i + + )} ); } } +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 ( +
+ +
+ ); +} + CodeFund.propTypes = { classes: PropTypes.object.isRequired, }; diff --git a/yarn.lock b/yarn.lock index 4974cd66963a62..3f948f47fd5455 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1671,11 +1671,11 @@ atob@^2.1.1: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a" autoprefixer@^9.0.0: - version "9.1.0" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.0.tgz#566a70d1148046b96b31efa08090f1999ffb6d8c" + version "9.1.1" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.1.tgz#e4ffa96c71270b8a1967d1542abc5f8453920a77" dependencies: - browserslist "^4.0.1" - caniuse-lite "^1.0.30000872" + browserslist "^4.0.2" + caniuse-lite "^1.0.30000876" normalize-range "^0.1.2" num2fraction "^1.2.2" postcss "^7.0.2" @@ -2674,13 +2674,13 @@ browserslist@^3.0.0: caniuse-lite "^1.0.30000844" electron-to-chromium "^1.3.47" -browserslist@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.0.1.tgz#61c05ce2a5843c7d96166408bc23d58b5416e818" +browserslist@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.0.2.tgz#294388f5844bb3ab15ef7394ca17f49bf7a4e6f1" dependencies: - caniuse-lite "^1.0.30000865" - electron-to-chromium "^1.3.52" - node-releases "^1.0.0-alpha.10" + caniuse-lite "^1.0.30000876" + electron-to-chromium "^1.3.57" + node-releases "^1.0.0-alpha.11" browserstack@1.5.0: version "1.5.0" @@ -2829,9 +2829,9 @@ caniuse-lite@^1.0.30000844: version "1.0.30000865" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz#70026616e8afe6e1442f8bb4e1092987d81a2f25" -caniuse-lite@^1.0.30000865, caniuse-lite@^1.0.30000872: - version "1.0.30000874" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000874.tgz#a641b1f1c420d58d9b132920ef6ba87bbdcd2223" +caniuse-lite@^1.0.30000876: + version "1.0.30000876" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000876.tgz#69fc1b696a35fd91089061aa916f677ee7057ada" capture-stack-trace@^1.0.0: version "1.0.0" @@ -3317,7 +3317,7 @@ cosmiconfig@^4.0.0: parse-json "^4.0.0" require-from-string "^2.0.1" -cosmiconfig@^5.0.5: +cosmiconfig@^5.0.6: version "5.0.6" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.6.tgz#dca6cf680a0bd03589aff684700858c81abeeb39" dependencies: @@ -3957,9 +3957,9 @@ electron-to-chromium@^1.3.47: version "1.3.52" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz#d2d9f1270ba4a3b967b831c40ef71fb4d9ab5ce0" -electron-to-chromium@^1.3.52: - version "1.3.55" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.55.tgz#f150e10b20b77d9d41afcca312efe0c3b1a7fdce" +electron-to-chromium@^1.3.57: + version "1.3.58" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.58.tgz#8267a4000014e93986d9d18c65a8b4022ca75188" elliptic@^6.0.0: version "6.4.1" @@ -4252,19 +4252,19 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-config-airbnb-base@^13.0.0: - version "13.0.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.0.0.tgz#2ee6279c4891128e49d6445b24aa13c2d1a21450" +eslint-config-airbnb-base@^13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.1.0.tgz#b5a1b480b80dfad16433d6c4ad84e6605052c05c" dependencies: eslint-restricted-globals "^0.1.1" object.assign "^4.1.0" object.entries "^1.0.4" eslint-config-airbnb@^17.0.0: - version "17.0.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.0.0.tgz#1bb8c4255483320bb68c3b614f71ae6058b0b2db" + version "17.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.1.0.tgz#3964ed4bc198240315ff52030bf8636f42bc4732" dependencies: - eslint-config-airbnb-base "^13.0.0" + eslint-config-airbnb-base "^13.1.0" object.assign "^4.1.0" object.entries "^1.0.4" @@ -4310,8 +4310,8 @@ eslint-plugin-flowtype@^2.40.1: lodash "^4.17.10" eslint-plugin-import@^2.8.0: - version "2.13.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.13.0.tgz#df24f241175e312d91662dc91ca84064caec14ed" + version "2.14.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.14.0.tgz#6b17626d2e3e6ad52cfce8807a845d15e22111a8" dependencies: contains-path "^0.1.0" debug "^2.6.8" @@ -4341,8 +4341,8 @@ eslint-plugin-jsx-a11y@^6.0.3: version "1.0.0-beta.35" eslint-plugin-mocha@^5.0.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-5.1.0.tgz#3637cdde93155e650591d7ab14e7a66485f0f7c1" + version "5.2.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-5.2.0.tgz#d8786d9fff8cb8b5f6e4b61e40395d6568a5c4e2" dependencies: ramda "^0.25.0" @@ -4354,9 +4354,10 @@ eslint-plugin-prettier@^2.3.1: jest-docblock "^21.0.0" eslint-plugin-react@^7.4.0: - version "7.10.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.10.0.tgz#af5c1fef31c4704db02098f9be18202993828b50" + version "7.11.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.0.tgz#b3124af974c4da978e62a57ea49a7bc26f11e76d" dependencies: + array-includes "^3.0.3" doctrine "^2.1.0" has "^1.0.3" jsx-ast-utils "^2.0.1" @@ -7094,8 +7095,8 @@ negotiator@0.6.1: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" neo-async@^2.5.0: - version "2.5.1" - resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.1.tgz#acb909e327b1e87ec9ef15f41b8a269512ad41ee" + version "2.5.2" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.2.tgz#489105ce7bc54e709d736b195f82135048c50fcc" next-tick@1: version "1.0.0" @@ -7241,9 +7242,9 @@ node-pre-gyp@^0.10.0: semver "^5.3.0" tar "^4" -node-releases@^1.0.0-alpha.10: - version "1.0.0-alpha.10" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.10.tgz#61c8d5f9b5b2e05d84eba941d05b6f5202f68a2a" +node-releases@^1.0.0-alpha.11: + version "1.0.0-alpha.11" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.11.tgz#73c810acc2e5b741a17ddfbb39dfca9ab9359d8a" dependencies: semver "^5.3.0" @@ -7489,8 +7490,8 @@ onetime@^2.0.0: mimic-fn "^1.0.0" opener@^1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8" + version "1.5.0" + resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.0.tgz#24222fb4ad423ba21f5bf38855cebe44220f6531" optimist@^0.6.1: version "0.6.1" @@ -9204,14 +9205,14 @@ sinon@^6.0.0: type-detect "^4.0.8" size-limit@^0.19.0: - version "0.19.1" - resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.19.1.tgz#96e42f58a70cd86d76a5ca31a87ce1970feffb6c" + version "0.19.2" + resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.19.2.tgz#3a232d7b6b30e8182af2a54ea8b13d4352def593" dependencies: bytes "^3.0.0" chalk "^2.4.1" ci-job-number "^0.3.0" compression-webpack-plugin "^1.1.11" - cosmiconfig "^5.0.5" + cosmiconfig "^5.0.6" css-loader "^1.0.0" escape-string-regexp "^1.0.5" file-loader "^1.1.11" @@ -9219,7 +9220,7 @@ size-limit@^0.19.0: gzip-size "^5.0.0" memory-fs "^0.4.1" read-pkg-up "^4.0.0" - style-loader "^0.22.0" + style-loader "^0.22.1" webpack "^4.16.5" webpack-bundle-analyzer "^2.13.1" yargs "^12.0.1" @@ -9585,7 +9586,7 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -style-loader@^0.22.0: +style-loader@^0.22.1: version "0.22.1" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.22.1.tgz#901ea28aac78fcc00c5075585ac07d7ef3f87a52" dependencies: