twreporter-react-index-page
Version:
twreporter index page version 2
374 lines (334 loc) • 13.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _templateObject = _taggedTemplateLiteral(['\n padding-left: 10%;\n padding-right: 10%;\n '], ['\n padding-left: 10%;\n padding-right: 10%;\n ']),
_templateObject2 = _taggedTemplateLiteral(['\n flex: 1 100%;\n padding: 10px 14.5%;\n '], ['\n flex: 1 100%;\n padding: 10px 14.5%;\n ']),
_templateObject3 = _taggedTemplateLiteral(['\n width: 100%;\n padding: 20px 20px;\n '], ['\n width: 100%;\n padding: 20px 20px;\n ']),
_templateObject4 = _taggedTemplateLiteral(['\n margin: 6px;\n '], ['\n margin: 6px;\n ']),
_templateObject5 = _taggedTemplateLiteral(['\n width: 60px;\n height: 60px;\n order: -1;\n margin: 5px auto;\n '], ['\n width: 60px;\n height: 60px;\n order: -1;\n margin: 5px auto;\n ']),
_templateObject6 = _taggedTemplateLiteral(['\n flex: 1 100%;\n font-size: ', ';\n line-height: 1.43;\n '], ['\n flex: 1 100%;\n font-size: ', ';\n line-height: 1.43;\n ']),
_templateObject7 = _taggedTemplateLiteral(['\n font-size: ', ';\n '], ['\n font-size: ', ';\n ']);
var _bottomLink = require('./common-utils/bottom-link');
var _bottomLink2 = _interopRequireDefault(_bottomLink);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _sectionName = require('./common-utils/section-name');
var _sectionName2 = _interopRequireDefault(_sectionName);
var _sectionStrings = require('../constants/section-strings');
var _sectionStrings2 = _interopRequireDefault(_sectionStrings);
var _config = require('../config');
var _styleUtils = require('../utils/style-utils');
var _commonVariables = require('../styles/common-variables');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/* global React*/
var AboutAuthorIcon = function AboutAuthorIcon(props) {
return React.createElement(
'svg',
_extends({
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
fillRule: 'evenodd',
clipRule: 'evenodd',
strokeLinejoin: 'round',
strokeMiterlimit: '1.414'
}, props),
React.createElement(
'g',
{
transform: 'matrix(.89364 0 0 .89364 34.055 5.826)'
},
React.createElement(
'g',
{
id: 'author.-icon'
},
React.createElement('path', {
id: 'Fill.-1',
d: 'M17.842 0L0 13.27v61.043l17.842-12.606V0z',
fill: '#e20012'
}),
React.createElement('path', {
id: 'Fill.-2',
d: 'M17.842 0v61.707l17.843 12.606V13.27L17.842 0z',
fill: '#c3000b'
}),
React.createElement('path', {
id: 'Fill.-3',
d: 'M0 74.313l17.843 24.551 17.842-24.551-17.842-12.606L0 74.313z',
fill: '#ffe9ec'
}),
React.createElement('path', {
id: 'Fill.-4',
d: 'M17.842 86.257h-9.22l9.22 12.607 9.219-12.607h-9.219z',
fill: '#c3000b'
})
)
)
);
};
var AboutDonateIcon = function AboutDonateIcon(props) {
return React.createElement(
'svg',
_extends({
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
fillRule: 'evenodd',
clipRule: 'evenodd',
strokeLinejoin: 'round',
strokeMiterlimit: '1.414'
}, props),
React.createElement(
'g',
{
transform: 'matrix(.96734 0 0 .96734 2.951 15.64)'
},
React.createElement(
'g',
{
id: 'sponsor.-icon'
},
React.createElement('path', {
id: 'Fill.-1',
d: 'M72.454.001L24.818 47.36l23.818 23.68 47.638-47.36L72.454.001z',
fill: '#c3000b'
}),
React.createElement('path', {
id: 'Fill.-2',
d: 'M24.818.001L.999 23.68l23.819 23.68 23.819-23.68L24.818.001z',
fill: '#e20012'
})
)
)
);
};
var AboutSubscribeIcon = function AboutSubscribeIcon(props) {
return React.createElement(
'svg',
_extends({
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
fillRule: 'evenodd',
clipRule: 'evenodd',
strokeLinejoin: 'round',
strokeMiterlimit: '1.414'
}, props),
React.createElement(
'g',
{
transform: 'translate(11.726 24.443) scale(1.30934)'
},
React.createElement(
'g',
{
transform: 'matrix(1.1172 0 0 1.07468 -3.426 -1.458)',
id: 'subscribe.-icon'
},
React.createElement('path', {
d: 'M0 38.594h58.463V.445H0v38.149z',
fill: '#e20012',
id: 'Fill.-1'
}),
React.createElement('path', {
d: 'M0 .445l29.231 23.556L58.463.445H0z',
fill: '#c3000b',
id: 'Fill.-2'
})
)
)
);
};
var ReporterIcon = function ReporterIcon(props) {
return React.createElement(
'svg',
_extends({
viewBox: '0 0 30 30',
xmlns: 'http://www.w3.org/2000/svg',
fillRule: 'evenodd',
clipRule: 'evenodd',
strokeLinejoin: 'round',
strokeMiterlimit: '1.414'
}, props),
React.createElement(
'g',
{
transform: 'translate(-5.117 -6.288) scale(1.06515)'
},
React.createElement(
'g',
{
id: 'reporter'
},
React.createElement('path', {
d: 'M33.7 29.3l-13.3-3.2V9.5l13.3-3.7v23.5z',
fill: '#c3000b',
fillRule: 'nonzero',
transform: 'translate(6.259 6.609) scale(.74943)'
}),
React.createElement('path', {
d: 'M0 35.7l20.8-9.6V9.5L0 0v35.7z',
fill: '#e20012',
fillRule: 'nonzero',
transform: 'translate(6.259 6.609) scale(.74943)'
})
)
)
);
};
var mobileWidth = '730px';
var Section = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__Section',
componentId: 's1qr2j4i-0'
})(['position: relative;margin: 65px 8px;color: ', ';'], _commonVariables.colors.textGrey);
var TopContainer = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__TopContainer',
componentId: 's1qr2j4i-1'
})(['max-width: 500px;padding: 25px 10px 5px 10px;padding-top: 25px;', 'font-size: ', ';', ''], _styleUtils.centerBlock, _commonVariables.fonts.size.medium, _styleUtils.media.largeMobile(_templateObject));
var ReporterIconWrapper = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__ReporterIconWrapper',
componentId: 's1qr2j4i-2'
})(['', 'margin-bottom: 30px;width: 38px;'], _styleUtils.centerBlock);
var FlexContainer = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__FlexContainer',
componentId: 's1qr2j4i-3'
})(['display: flex;flex-wrap: wrap;flex-direction: row;justify-content: space-around;padding: 0 4%;margin-top: 15px;', ''], _styleUtils.media.largeMobile(_templateObject2));
var Item = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__Item',
componentId: 's1qr2j4i-4'
})(['display: flex;flex-direction:column;text-align: center;width: 33%;margin: 10px 0;padding: 5px 3.6%;', ''], _styleUtils.media.largeMobile(_templateObject3));
var ItemTitle = _styledComponents2.default.h3.withConfig({
displayName: 'reporter-intro__ItemTitle',
componentId: 's1qr2j4i-5'
})(['font-size: ', ';font-weight: ', ';', ''], _commonVariables.fonts.size.xlarge, _commonVariables.fonts.weight.bold, _styleUtils.media.largeMobile(_templateObject4));
var ItemIconContainer = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__ItemIconContainer',
componentId: 's1qr2j4i-6'
})(['width: 82px;height: 82px;margin: 40px auto;', ''], _styleUtils.media.largeMobile(_templateObject5));
var ItemDescription = _styledComponents2.default.div.withConfig({
displayName: 'reporter-intro__ItemDescription',
componentId: 's1qr2j4i-7'
})(['line-height: 1.5;font-size: ', ';', '', ''], _commonVariables.fonts.size.medium, _styleUtils.media.largeMobile(_templateObject6, _commonVariables.fonts.size.medium), _styleUtils.media.mobile(_templateObject7, _commonVariables.fonts.size.large));
var ItemLink = _styledComponents2.default.a.withConfig({
displayName: 'reporter-intro__ItemLink',
componentId: 's1qr2j4i-8'
})(['margin: 7px;padding: 15px 5px;']);
var ReporterIntro = function (_React$Component) {
_inherits(ReporterIntro, _React$Component);
function ReporterIntro() {
_classCallCheck(this, ReporterIntro);
return _possibleConstructorReturn(this, (ReporterIntro.__proto__ || Object.getPrototypeOf(ReporterIntro)).apply(this, arguments));
}
_createClass(ReporterIntro, [{
key: 'render',
value: function render() {
return React.createElement(
Section,
null,
React.createElement(
_sectionName2.default,
{
mobileWidth: mobileWidth
},
React.createElement(
'span',
null,
_sectionStrings2.default.donation
)
),
React.createElement(
TopContainer,
null,
React.createElement(
ReporterIconWrapper,
null,
React.createElement(ReporterIcon, null)
),
React.createElement(
'span',
{ itemProp: 'description' },
_config.appConfig.intro
)
),
React.createElement(
FlexContainer,
null,
React.createElement(
Item,
null,
React.createElement(
ItemTitle,
null,
'\u4F5C\u8005\u7FA4'
),
React.createElement(
ItemIconContainer,
null,
React.createElement(AboutAuthorIcon, null)
),
React.createElement(
ItemDescription,
null,
'\u679C\u516B\u73FE\u7A0B\u4F7F\u7121\u751F\u6578\u6211\u8003\u66F8\u5929\u7136\u9AD4\u670B\u53EF\u8A71\u7684\u5225\u60F3\u8457\u5730\u9762\u6307'
),
React.createElement(
ItemLink,
null,
React.createElement(_bottomLink2.default, { text: '\u544A\u6CBB\u5171\u7D93\u8CFD\u70BA' })
)
),
React.createElement(
Item,
null,
React.createElement(
ItemTitle,
null,
'\u8A02\u95B1'
),
React.createElement(
ItemIconContainer,
null,
React.createElement(AboutSubscribeIcon, null)
),
React.createElement(
ItemDescription,
null,
'COMING SOON \u656C\u8ACB\u671F\u5F85'
)
),
React.createElement(
Item,
null,
React.createElement(
ItemTitle,
null,
'\u8D0A\u52A9\u6211\u5011'
),
React.createElement(
ItemIconContainer,
null,
React.createElement(AboutDonateIcon, null)
),
React.createElement(
ItemDescription,
null,
'\u679C\u516B\u73FE\u7A0B\u4F7F\u7121\u751F\u6578\u6211\u8003\u66F8\u5929\u7136\u9AD4\u670B\u53EF\u8A71\u7684\u5225\u60F3\u8457\u5730\u9762\u6307'
),
React.createElement(
ItemLink,
null,
React.createElement(_bottomLink2.default, { text: '\u7121\u751F\u6578\u6211\u8003\u66F8' })
)
)
)
);
}
}]);
return ReporterIntro;
}(React.Component);
exports.default = ReporterIntro;