mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-29 18:46:20 -05:00
extract faq from published page
after review from @thisandagain – thanks!
This commit is contained in:
parent
85d6636c28
commit
e4611088ff
3 changed files with 28 additions and 38 deletions
|
@ -38,6 +38,7 @@
|
||||||
"babel-loader": "6.2.4",
|
"babel-loader": "6.2.4",
|
||||||
"babel-preset-es2015": "6.9.0",
|
"babel-preset-es2015": "6.9.0",
|
||||||
"babel-preset-react": "6.11.1",
|
"babel-preset-react": "6.11.1",
|
||||||
|
"cheerio": "1.0.0-rc.2",
|
||||||
"classnames": "2.1.3",
|
"classnames": "2.1.3",
|
||||||
"cookie": "0.2.2",
|
"cookie": "0.2.2",
|
||||||
"copy-webpack-plugin": "0.2.0",
|
"copy-webpack-plugin": "0.2.0",
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
|
var cheerio = require('cheerio');
|
||||||
var injectIntl = require('react-intl').injectIntl;
|
var injectIntl = require('react-intl').injectIntl;
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
|
var xhr = require('xhr');
|
||||||
|
|
||||||
var Box = require('../../components/box/box.jsx');
|
|
||||||
var InformationPage = require('../../components/informationpage/informationpage.jsx');
|
var InformationPage = require('../../components/informationpage/informationpage.jsx');
|
||||||
var Page = require('../../components/page/www/page.jsx');
|
var Page = require('../../components/page/www/page.jsx');
|
||||||
var render = require('../../lib/render.jsx');
|
var render = require('../../lib/render.jsx');
|
||||||
|
@ -10,18 +11,28 @@ require('./preview-faq.scss');
|
||||||
|
|
||||||
var PreviewFaq = injectIntl(React.createClass({
|
var PreviewFaq = injectIntl(React.createClass({
|
||||||
type: 'PreviewFaq',
|
type: 'PreviewFaq',
|
||||||
|
getInitialState: function () {
|
||||||
|
return {
|
||||||
|
faqDoc: {__html: ''}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
componentDidMount: function () {
|
||||||
|
xhr({
|
||||||
|
method: 'GET',
|
||||||
|
uri: 'https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true'
|
||||||
|
}, function (error, response, body) {
|
||||||
|
var $ = cheerio.load(body);
|
||||||
|
this.setState({faqDoc: {__html: $('html').html()}});
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
render: function () {
|
render: function () {
|
||||||
return (
|
return (
|
||||||
<InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
|
<InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<Box
|
<div
|
||||||
title={''}
|
className="preview-faq"
|
||||||
>
|
dangerouslySetInnerHTML={this.state.faqDoc}
|
||||||
<iframe
|
/>
|
||||||
className="preview-faq-iframe"
|
|
||||||
src="https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true"
|
|
||||||
></iframe>
|
|
||||||
</Box>
|
|
||||||
</div>
|
</div>
|
||||||
</InformationPage>
|
</InformationPage>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,36 +1,14 @@
|
||||||
@import "../../frameless";
|
|
||||||
|
|
||||||
#view {
|
#view {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box > .box-content {
|
.preview-faq {
|
||||||
padding: 0;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-faq-iframe {
|
h1 {
|
||||||
border: none;
|
line-height: 1.7em !important;
|
||||||
width: $cols12; // for the box padding
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
|
||||||
height: 450px;
|
font-size: 2.5rem !important;
|
||||||
}
|
font-weight: 900 !important;
|
||||||
|
|
||||||
//4 columns
|
|
||||||
@media only screen and (max-width: $mobile - 1) {
|
|
||||||
.preview-faq-iframe {
|
|
||||||
width: $cols4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//6 columns
|
|
||||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
|
||||||
.preview-faq-iframe {
|
|
||||||
width: $cols6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//8 columns
|
|
||||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
|
||||||
.preview-faq-iframe {
|
|
||||||
width: $cols8;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue