@twreporter/index-page 1.3.2 → 1.3.3-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/lib/components/category-section.js +9 -15
- package/lib/components/common-utils/mobile-list.js +7 -3
- package/lib/components/common-utils/section-content-wrapper.js +3 -1
- package/lib/components/common-utils/section-name.js +3 -3
- package/lib/components/common-utils/section.js +2 -2
- package/lib/components/donation-box-section.js +6 -6
- package/lib/components/editor-picks.js +24 -22
- package/lib/components/infographic-section.js +13 -21
- package/lib/components/junior-box-section.js +6 -6
- package/lib/components/latest-section.js +9 -8
- package/lib/components/latest-topic.js +13 -20
- package/lib/components/mobile-flex-swipeable.js +13 -16
- package/lib/components/news-letter-section.js +8 -8
- package/lib/components/photography-section.js +10 -11
- package/lib/components/podcast-box-section.js +6 -6
- package/lib/components/reviews.js +11 -17
- package/lib/components/topics-section.js +6 -7
- package/lib/utils/style-utils.js +2 -32
- package/package.json +4 -4
|
@@ -31,9 +31,11 @@ var _color = _interopRequireDefault(require("../constants/color"));
|
|
|
31
31
|
|
|
32
32
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
33
33
|
|
|
34
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
35
|
+
|
|
34
36
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
35
37
|
|
|
36
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
38
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
37
39
|
|
|
38
40
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
39
41
|
|
|
@@ -64,7 +66,6 @@ var _ = {
|
|
|
64
66
|
};
|
|
65
67
|
var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
|
|
66
68
|
var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
|
|
67
|
-
var mobileMaxWidth = _styleUtils.breakPoints.mobileMaxWidth;
|
|
68
69
|
var mobileMidWidth = '578px';
|
|
69
70
|
var mobileSemiMidWidth = '414px';
|
|
70
71
|
var mobileMinWidth = '320px';
|
|
@@ -86,29 +87,29 @@ var headerPadding = {
|
|
|
86
87
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
87
88
|
displayName: "latest-section__Container",
|
|
88
89
|
componentId: "hzxpx3-0"
|
|
89
|
-
})(["background-color:", ";position:relative;", ""], _color["default"].lightGray,
|
|
90
|
+
})(["background-color:", ";position:relative;", ""], _color["default"].lightGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0;\n "]))));
|
|
90
91
|
|
|
91
92
|
var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
|
|
92
93
|
displayName: "latest-section__ContentContainer",
|
|
93
94
|
componentId: "hzxpx3-1"
|
|
94
|
-
})(["display:flex;padding:30px ", ";overflow-x:hidden;justify-content:center;", " ", ""], headerPadding.desktop,
|
|
95
|
+
})(["display:flex;padding:30px ", ";overflow-x:hidden;justify-content:center;", " ", ""], headerPadding.desktop, _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 30px ", ";\n "])), headerPadding.tablet), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 30px ", ";\n "])), headerPadding.mobile));
|
|
95
96
|
|
|
96
97
|
var ItemFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
97
98
|
displayName: "latest-section__ItemFrame",
|
|
98
99
|
componentId: "hzxpx3-2"
|
|
99
|
-
})(["width:199px;padding:0;margin-left:30px;&:first-child{margin:0;}", " ", " ", " @media (max-width:", "){&:nth-child(4){display:none;}}@media (max-width:", "){&:nth-child(3){display:none;}}@media (max-width:", "){width:136px;margin-left:16px;}"],
|
|
100
|
+
})(["width:199px;padding:0;margin-left:30px;&:first-child{margin:0;}", " ", " ", " @media (max-width:", "){&:nth-child(4){display:none;}}@media (max-width:", "){&:nth-child(3){display:none;}}@media (max-width:", "){width:136px;margin-left:16px;}"], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 130px;\n "]))), _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:nth-child(6) {\n display: none;\n }\n &:nth-child(5) {\n display: none;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 160px;\n margin-left: 20px;\n "]))), mobileMidWidth, mobileSemiMidWidth, mobileMinWidth);
|
|
100
101
|
|
|
101
102
|
var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
102
103
|
displayName: "latest-section__ImageFrame",
|
|
103
104
|
componentId: "hzxpx3-3"
|
|
104
|
-
})(["width:100%;height:128px;background:", ";background-size:cover;background-position:center;display:block;", " ", "
|
|
105
|
+
})(["width:100%;height:128px;background:", ";background-size:cover;background-position:center;display:block;", " ", " ", " @media (max-width:", "){height:93px;}@media (max-width:", "){height:88px;}"], function (props) {
|
|
105
106
|
return props.background ? "url(".concat(props.background, ")") : 'backgroun-image';
|
|
106
|
-
},
|
|
107
|
+
}, _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 90px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 110px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 100px;\n "]))), mobileSemiMidWidth, mobileMinWidth);
|
|
107
108
|
|
|
108
109
|
var ContentFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
109
110
|
displayName: "latest-section__ContentFrame",
|
|
110
111
|
componentId: "hzxpx3-4"
|
|
111
|
-
})(["
|
|
112
|
+
})(["margin:0 auto;"]);
|
|
112
113
|
|
|
113
114
|
var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
|
|
114
115
|
displayName: "latest-section__Category",
|
|
@@ -45,11 +45,13 @@ var _color = _interopRequireDefault(require("../constants/color"));
|
|
|
45
45
|
|
|
46
46
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
47
47
|
|
|
48
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
49
|
+
|
|
48
50
|
var _forEach = _interopRequireDefault(require("lodash/forEach"));
|
|
49
51
|
|
|
50
52
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
51
53
|
|
|
52
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
54
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
53
55
|
|
|
54
56
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
55
57
|
|
|
@@ -91,7 +93,6 @@ var mockup = {
|
|
|
91
93
|
}
|
|
92
94
|
};
|
|
93
95
|
var categoryPrefix = _strings["default"].topic + _strings["default"].fullShapeDot;
|
|
94
|
-
var mobileWidth = _styleUtils.breakPoints.mobileMaxWidth;
|
|
95
96
|
|
|
96
97
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
97
98
|
displayName: "latest-topic__Container",
|
|
@@ -106,29 +107,29 @@ var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_section["
|
|
|
106
107
|
var TopicFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
107
108
|
displayName: "latest-topic__TopicFrame",
|
|
108
109
|
componentId: "q3zdc1-2"
|
|
109
|
-
})(["width:447px;margin:0 auto;", ""],
|
|
110
|
+
})(["width:447px;margin:0 auto;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n "]))));
|
|
110
111
|
|
|
111
112
|
var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
112
113
|
displayName: "latest-topic__Title",
|
|
113
114
|
componentId: "q3zdc1-3"
|
|
114
|
-
})(["width:374px;font-size:32px;font-weight:", ";font-family:", ";line-height:1.25;color:", ";text-align:center;margin:2px auto 0 auto;", ""], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray,
|
|
115
|
+
})(["width:374px;font-size:32px;font-weight:", ";font-family:", ";line-height:1.25;color:", ";text-align:center;margin:2px auto 0 auto;", ""], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 24px;\n width: ", "%;\n "])), _mobileMockupSpecification.itemWidthPct));
|
|
115
116
|
|
|
116
117
|
var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
117
118
|
displayName: "latest-topic__Description",
|
|
118
119
|
componentId: "q3zdc1-4"
|
|
119
|
-
})(["margin-top:12px;width:447px;font-size:16px;line-height:1.5;text-align:justify;color:", ";", ""], _color["default"].darkGray,
|
|
120
|
+
})(["margin-top:12px;width:447px;font-size:16px;line-height:1.5;text-align:justify;color:", ";", ""], _color["default"].darkGray, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", "%;\n margin: 6px auto 0 auto;\n font-size: 18px;\n "])), _mobileMockupSpecification.itemWidthPct)); // container for relateds FlexItem
|
|
120
121
|
|
|
121
122
|
|
|
122
123
|
var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
123
124
|
displayName: "latest-topic__FlexBox",
|
|
124
125
|
componentId: "q3zdc1-5"
|
|
125
|
-
})(["margin-top:48px;min-height:335px;padding:0 48px;display:flex;justify-content:center;", " ", " ", ""],
|
|
126
|
+
})(["margin-top:48px;min-height:335px;padding:0 48px;display:flex;justify-content:center;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 0 49px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 0 34px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: none;\n "])))); // container for each related articles
|
|
126
127
|
|
|
127
128
|
|
|
128
129
|
var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
129
130
|
displayName: "latest-topic__FlexItem",
|
|
130
131
|
componentId: "q3zdc1-6"
|
|
131
|
-
})(["min-height:335px;width:426px;&:nth-child(2){margin:0 33px;}", " ", " ", ""],
|
|
132
|
+
})(["min-height:335px;width:426px;&:nth-child(2){margin:0 33px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 290px;\n &:nth-child(2) {\n margin: 0 28px;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 220px;\n &:nth-child(2) {\n margin: 0 20px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n "]))));
|
|
132
133
|
|
|
133
134
|
var MobileList = /*#__PURE__*/(0, _styledComponents["default"])(_mobileList["default"]).withConfig({
|
|
134
135
|
displayName: "latest-topic__MobileList",
|
|
@@ -153,17 +154,17 @@ var RelatedTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
153
154
|
var RelatedDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
154
155
|
displayName: "latest-topic__RelatedDescription",
|
|
155
156
|
componentId: "q3zdc1-11"
|
|
156
|
-
})(["margin-top:8px;height:auto;font-size:16px;line-height:20px;color:", ";", ";", ""], _color["default"].darkGray, (0, _styleUtils.truncate)('relative', 1.43, 4, _color["default"].lightGray),
|
|
157
|
+
})(["margin-top:8px;height:auto;font-size:16px;line-height:20px;color:", ";", ";", ""], _color["default"].darkGray, (0, _styleUtils.truncate)('relative', 1.43, 4, _color["default"].lightGray), _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-size: 18px;\n "]))));
|
|
157
158
|
|
|
158
159
|
var MoreFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
159
160
|
displayName: "latest-topic__MoreFrame",
|
|
160
161
|
componentId: "q3zdc1-12"
|
|
161
|
-
})(["margin:60px auto 0 auto
|
|
162
|
+
})(["margin:60px auto 0 auto;", ""], _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin: 40px auto 0 auto;\n "]))));
|
|
162
163
|
|
|
163
164
|
var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
164
165
|
displayName: "latest-topic__ImgFrame",
|
|
165
166
|
componentId: "q3zdc1-13"
|
|
166
|
-
})(["height:274px;", " ", " ", ""],
|
|
167
|
+
})(["height:274px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n height: 186px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n height: 140px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
|
|
167
168
|
|
|
168
169
|
var LatestTopic = /*#__PURE__*/function (_React$PureComponent) {
|
|
169
170
|
_inherits(LatestTopic, _React$PureComponent);
|
|
@@ -200,8 +201,7 @@ var LatestTopic = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
200
201
|
var imgObj = _.get(post, 'hero_image') || _.get(post, 'og_image');
|
|
201
202
|
|
|
202
203
|
relatedsJsx.push( /*#__PURE__*/_react["default"].createElement(FlexItem, {
|
|
203
|
-
key: _.get(post, 'id')
|
|
204
|
-
mobileWidth: mobileWidth
|
|
204
|
+
key: _.get(post, 'id')
|
|
205
205
|
}, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
|
|
206
206
|
href: href,
|
|
207
207
|
redirect: isExternal
|
|
@@ -213,15 +213,8 @@ var LatestTopic = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
213
213
|
})), /*#__PURE__*/_react["default"].createElement(RelatedsContentFrame, null, /*#__PURE__*/_react["default"].createElement(RelatedCategory, null, "".concat(categoryPrefix).concat(_.get(data, 'short_title', ''))), /*#__PURE__*/_react["default"].createElement(RelatedTitle, null, _.get(post, 'title', '')), /*#__PURE__*/_react["default"].createElement(RelatedDescription, null, _.get(post, 'og_description', ''))))));
|
|
214
214
|
});
|
|
215
215
|
|
|
216
|
-
return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, {
|
|
217
|
-
mobileWidth: mobileWidth
|
|
218
|
-
}, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], {
|
|
219
|
-
mobileWidth: mobileWidth
|
|
220
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].latestTopic)), /*#__PURE__*/_react["default"].createElement(TopicFrame, null, /*#__PURE__*/_react["default"].createElement(_categoryName["default"], null, "".concat(categoryPrefix).concat(_.get(data, 'short_title', ''))), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(data, 'title', '')), /*#__PURE__*/_react["default"].createElement(Description, null, _.get(data, 'og_description', ''))), /*#__PURE__*/_react["default"].createElement(FlexBox, null, relatedsJsx), /*#__PURE__*/_react["default"].createElement(MobileList, {
|
|
221
|
-
maxWidth: mobileWidth
|
|
222
|
-
}, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
216
|
+
return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].latestTopic)), /*#__PURE__*/_react["default"].createElement(TopicFrame, null, /*#__PURE__*/_react["default"].createElement(_categoryName["default"], null, "".concat(categoryPrefix).concat(_.get(data, 'short_title', ''))), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(data, 'title', '')), /*#__PURE__*/_react["default"].createElement(Description, null, _.get(data, 'og_description', ''))), /*#__PURE__*/_react["default"].createElement(FlexBox, null, relatedsJsx), /*#__PURE__*/_react["default"].createElement(MobileList, null, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
223
217
|
alignItems: 'flex-start',
|
|
224
|
-
mobileWidth: mobileWidth,
|
|
225
218
|
maxSwipableItems: maxSwipableItems
|
|
226
219
|
}, relatedsJsx)), /*#__PURE__*/_react["default"].createElement(MoreFrame, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
|
|
227
220
|
text: "\u66F4\u591A".concat(_.get(data, 'short_title', ''), "\u6587\u7AE0"),
|
|
@@ -19,6 +19,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
19
19
|
|
|
20
20
|
var _mobileMockupSpecification = require("../constants/mobile-mockup-specification");
|
|
21
21
|
|
|
22
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
23
|
+
|
|
24
|
+
var _templateObject, _templateObject2;
|
|
25
|
+
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
27
|
|
|
24
28
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -41,25 +45,23 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
41
45
|
|
|
42
46
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
43
47
|
|
|
48
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
49
|
+
|
|
44
50
|
var FlexList = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
|
45
51
|
displayName: "mobile-flex-swipeable__FlexList",
|
|
46
52
|
componentId: "mnkglu-0"
|
|
47
|
-
})(["list-style-type:none;padding:0px;margin:0
|
|
48
|
-
return props.mobileWidth;
|
|
49
|
-
}, function (props) {
|
|
53
|
+
})(["list-style-type:none;padding:0px;margin:0;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: nowrap;\n justify-content: ", ";\n align-items: ", ";\n transition: 150ms transform linear;\n transform: ", ";\n "])), function (props) {
|
|
50
54
|
return props.justifyContent || 'flex-start';
|
|
51
55
|
}, function (props) {
|
|
52
56
|
return props.alignItems || 'stretch';
|
|
53
57
|
}, function (props) {
|
|
54
58
|
return props.selected !== 0 ? "translateX(".concat(props.selected * -_mobileMockupSpecification.itemPlusPaddingWidthPct, "%)") : 'translateX(0)';
|
|
55
|
-
});
|
|
59
|
+
}));
|
|
56
60
|
|
|
57
61
|
var FlexItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
|
58
62
|
displayName: "mobile-flex-swipeable__FlexItem",
|
|
59
63
|
componentId: "mnkglu-1"
|
|
60
|
-
})(["
|
|
61
|
-
return props.mobileWidth;
|
|
62
|
-
}, _mobileMockupSpecification.itemPlusPaddingWidthPct, _mobileMockupSpecification.itemPaddingRightPct, _mobileMockupSpecification.firstItemMarginLeftPct);
|
|
64
|
+
})(["", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: ", "%;\n padding-right: ", "%;\n &:first-child {\n margin: 0 0 0 ", "%;\n }\n "])), _mobileMockupSpecification.itemPlusPaddingWidthPct, _mobileMockupSpecification.itemPaddingRightPct, _mobileMockupSpecification.firstItemMarginLeftPct));
|
|
63
65
|
|
|
64
66
|
var SwipableFlexItems = /*#__PURE__*/function (_SwipeableMixin) {
|
|
65
67
|
_inherits(SwipableFlexItems, _SwipeableMixin);
|
|
@@ -79,8 +81,7 @@ var SwipableFlexItems = /*#__PURE__*/function (_SwipeableMixin) {
|
|
|
79
81
|
var _this$props = this.props,
|
|
80
82
|
alignItems = _this$props.alignItems,
|
|
81
83
|
children = _this$props.children,
|
|
82
|
-
justifyContent = _this$props.justifyContent
|
|
83
|
-
mobileWidth = _this$props.mobileWidth;
|
|
84
|
+
justifyContent = _this$props.justifyContent;
|
|
84
85
|
|
|
85
86
|
var onSwiping = function onSwiping(e, deltaX, deltaY, absX, absY) {
|
|
86
87
|
// In order to avoid slightly vibrating while swiping left and right,
|
|
@@ -99,8 +100,7 @@ var SwipableFlexItems = /*#__PURE__*/function (_SwipeableMixin) {
|
|
|
99
100
|
|
|
100
101
|
items = items.map(function (child) {
|
|
101
102
|
return /*#__PURE__*/_react["default"].createElement(FlexItem, {
|
|
102
|
-
key: child.key
|
|
103
|
-
mobileWidth: mobileWidth
|
|
103
|
+
key: child.key
|
|
104
104
|
}, child);
|
|
105
105
|
});
|
|
106
106
|
return /*#__PURE__*/_react["default"].createElement(_reactSwipeable["default"], {
|
|
@@ -109,7 +109,6 @@ var SwipableFlexItems = /*#__PURE__*/function (_SwipeableMixin) {
|
|
|
109
109
|
onSwiping: onSwiping
|
|
110
110
|
}, /*#__PURE__*/_react["default"].createElement(FlexList, {
|
|
111
111
|
selected: selected,
|
|
112
|
-
mobileWidth: mobileWidth,
|
|
113
112
|
justifyContent: justifyContent,
|
|
114
113
|
alignItems: alignItems
|
|
115
114
|
}, items));
|
|
@@ -122,14 +121,12 @@ var SwipableFlexItems = /*#__PURE__*/function (_SwipeableMixin) {
|
|
|
122
121
|
SwipableFlexItems.defaultProps = {
|
|
123
122
|
alignItems: 'flex-end',
|
|
124
123
|
justifyContent: 'flext-start',
|
|
125
|
-
maxSwipableItems: 0
|
|
126
|
-
mobileWidth: '600px'
|
|
124
|
+
maxSwipableItems: 0
|
|
127
125
|
};
|
|
128
126
|
SwipableFlexItems.propTypes = {
|
|
129
127
|
alignItems: _propTypes["default"].string,
|
|
130
128
|
justifyContent: _propTypes["default"].string,
|
|
131
|
-
maxSwipableItems: _propTypes["default"].number
|
|
132
|
-
mobileWidth: _propTypes["default"].string
|
|
129
|
+
maxSwipableItems: _propTypes["default"].number
|
|
133
130
|
};
|
|
134
131
|
var _default = {
|
|
135
132
|
FlexList: FlexList,
|
|
@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
-
var _styleUtils = require("../utils/style-utils");
|
|
11
|
-
|
|
12
10
|
var _react = _interopRequireDefault(require("react"));
|
|
13
11
|
|
|
14
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
13
|
|
|
16
14
|
var _color = _interopRequireDefault(require("../constants/color"));
|
|
17
15
|
|
|
16
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
17
|
+
|
|
18
18
|
var _delay = _interopRequireDefault(require("lodash/delay"));
|
|
19
19
|
|
|
20
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
@@ -77,32 +77,32 @@ var mobileInputWidthPct = mockup.inputWidth / mockup.contentWidth * 100;
|
|
|
77
77
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
78
78
|
displayName: "news-letter-section__Container",
|
|
79
79
|
componentId: "i33fcn-0"
|
|
80
|
-
})(["background-color:", ";padding-top:70px;padding-bottom:70px;", ""], _color["default"].lightGray,
|
|
80
|
+
})(["background-color:", ";padding-top:70px;padding-bottom:70px;", ""], _color["default"].lightGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-top: 30px;\n padding-bottom: 60px;\n "]))));
|
|
81
81
|
|
|
82
82
|
var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
83
83
|
displayName: "news-letter-section__ContentContainer",
|
|
84
84
|
componentId: "i33fcn-1"
|
|
85
|
-
})(["max-width:610px;margin:0 auto;display:flex;align-items:flex-start;", ""],
|
|
85
|
+
})(["max-width:610px;margin:0 auto;display:flex;align-items:flex-start;", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-width: ", "%;\n display: block;\n "])), mobileContentWidthPct));
|
|
86
86
|
|
|
87
87
|
var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
88
88
|
displayName: "news-letter-section__Icon",
|
|
89
89
|
componentId: "i33fcn-2"
|
|
90
|
-
})(["> svg{width:60px;height:40px;}margin-right:20px;", ""],
|
|
90
|
+
})(["> svg{width:60px;height:40px;}margin-right:20px;", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 46px;\n height: 30px;\n margin: 0 auto;\n > svg {\n width: 46px;\n height: 30px;\n }\n "]))));
|
|
91
91
|
|
|
92
92
|
var SignupForm = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
93
93
|
displayName: "news-letter-section__SignupForm",
|
|
94
94
|
componentId: "i33fcn-3"
|
|
95
|
-
})(["width:100%;background-color:", ";height:40px;input{border:0;}display:flex;justify-content:space-between;align-items:center;", ""], _color["default"].white,
|
|
95
|
+
})(["width:100%;background-color:", ";height:40px;input{border:0;}display:flex;justify-content:space-between;align-items:center;", ""], _color["default"].white, _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-top: 20px;\n "]))));
|
|
96
96
|
|
|
97
97
|
var EmailInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
|
98
98
|
displayName: "news-letter-section__EmailInput",
|
|
99
99
|
componentId: "i33fcn-4"
|
|
100
|
-
})(["display:block;flex-basis:100%;width:100%;padding-left:16px;font-size:16px;outline:none;box-shadow:none;&:-webkit-autofill{-webkit-box-shadow:0 0 0 30px white inset;}", ""],
|
|
100
|
+
})(["display:block;flex-basis:100%;width:100%;padding-left:16px;font-size:16px;outline:none;box-shadow:none;&:-webkit-autofill{-webkit-box-shadow:0 0 0 30px white inset;}", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 14px;\n display: inline;\n padding-left: 34px;\n text-align: center;\n width: ", "%\n "])), mobileInputWidthPct));
|
|
101
101
|
|
|
102
102
|
var SubscribeInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
|
103
103
|
displayName: "news-letter-section__SubscribeInput",
|
|
104
104
|
componentId: "i33fcn-5"
|
|
105
|
-
})(["display:block;background-color:", ";padding-right:10px;color:", ";font-size:16px;outline:none;box-shadow:none;", ""], _color["default"].white, _color["default"].red,
|
|
105
|
+
})(["display:block;background-color:", ";padding-right:10px;color:", ";font-size:16px;outline:none;box-shadow:none;", ""], _color["default"].white, _color["default"].red, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n "]))));
|
|
106
106
|
|
|
107
107
|
var Form = /*#__PURE__*/_styledComponents["default"].form.withConfig({
|
|
108
108
|
displayName: "news-letter-section__Form",
|
|
@@ -41,9 +41,11 @@ var _color = _interopRequireDefault(require("../constants/color"));
|
|
|
41
41
|
|
|
42
42
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
43
43
|
|
|
44
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
45
|
+
|
|
44
46
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
45
47
|
|
|
46
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
48
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
47
49
|
|
|
48
50
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
49
51
|
|
|
@@ -83,7 +85,6 @@ var mockup = {
|
|
|
83
85
|
}; // If window is less than oneColumnWidth,
|
|
84
86
|
// there will be only one column. Default is two columns.
|
|
85
87
|
|
|
86
|
-
var oneColumnWidth = _styleUtils.breakPoints.mobileMaxWidth;
|
|
87
88
|
var oneColumnWidthInt = 768;
|
|
88
89
|
|
|
89
90
|
var Section = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
@@ -93,17 +94,17 @@ var Section = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
93
94
|
return props.isAutoHover ? _color["default"].white : _color["default"].darkBlue;
|
|
94
95
|
}, function (props) {
|
|
95
96
|
return props.isAutoHover ? '40px' : '80px';
|
|
96
|
-
},
|
|
97
|
+
}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-top: 0px;\n "]))));
|
|
97
98
|
|
|
98
99
|
var Listing = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
|
99
100
|
displayName: "photography-section__Listing",
|
|
100
101
|
componentId: "sc-42isjh-1"
|
|
101
|
-
})(["padding-left:0px;max-width:1344px;margin:0 auto;position:relative;padding-bottom:60px;", " ", " ", ""],
|
|
102
|
+
})(["padding-left:0px;max-width:1344px;margin:0 auto;position:relative;padding-bottom:60px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-width: 928px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n max-width: 700px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-top: 0px;\n padding-bottom: 40px;\n max-width: 100%;\n "]))));
|
|
102
103
|
|
|
103
104
|
var Item = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
|
104
105
|
displayName: "photography-section__Item",
|
|
105
106
|
componentId: "sc-42isjh-2"
|
|
106
|
-
})(["max-width:672px;display:inline-block;vertical-align:bottom;", " ", " ", ""],
|
|
107
|
+
})(["max-width:672px;display:inline-block;vertical-align:bottom;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n max-width: 464px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n max-width: 349px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n max-width: 100%;\n width: 100%;\n height: 100%;\n display: block;\n "]))));
|
|
107
108
|
|
|
108
109
|
var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
109
110
|
displayName: "photography-section__Title",
|
|
@@ -113,14 +114,14 @@ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
113
114
|
var Img = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
114
115
|
displayName: "photography-section__Img",
|
|
115
116
|
componentId: "sc-42isjh-4"
|
|
116
|
-
})(["position:relative;width:672px;height:450px;", " ", " ", ""],
|
|
117
|
+
})(["position:relative;width:672px;height:450px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 464px;\n height: 310px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: 0 auto;\n width: 350px;\n height: 234px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n "]))));
|
|
117
118
|
|
|
118
119
|
var Overlay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
119
120
|
displayName: "photography-section__Overlay",
|
|
120
121
|
componentId: "sc-42isjh-5"
|
|
121
|
-
})(["position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:", ";transition:0.5s ease;background-color:", "
|
|
122
|
+
})(["position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:", ";transition:0.5s ease;background-color:", ";", ""], function (props) {
|
|
122
123
|
return props.isHover ? 1 : 0;
|
|
123
|
-
}, _color["default"].ashBlue,
|
|
124
|
+
}, _color["default"].ashBlue, _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n &:hover {\n opacity: 1;\n }\n "]))));
|
|
124
125
|
|
|
125
126
|
var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
126
127
|
displayName: "photography-section__More",
|
|
@@ -303,9 +304,7 @@ var PhotographySection = /*#__PURE__*/function (_React$PureComponent2) {
|
|
|
303
304
|
onLeave: this.onLeave
|
|
304
305
|
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Section, {
|
|
305
306
|
isAutoHover: isAutoHover
|
|
306
|
-
}, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], {
|
|
307
|
-
mobileWidth: "".concat(oneColumnWidth)
|
|
308
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].photography)), /*#__PURE__*/_react["default"].createElement(Listing, null, postComps), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
|
|
307
|
+
}, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].photography)), /*#__PURE__*/_react["default"].createElement(Listing, null, postComps), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
|
|
309
308
|
text: "\u66F4\u591A\u5F71\u50CF\u65B0\u805E",
|
|
310
309
|
isDarkBg: true,
|
|
311
310
|
path: moreURI
|
|
@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
13
|
|
|
14
|
-
var _styleUtils = require("../utils/style-utils");
|
|
15
|
-
|
|
16
14
|
var _app = _interopRequireDefault(require("../constants/app"));
|
|
17
15
|
|
|
18
16
|
var _color = _interopRequireDefault(require("../constants/color"));
|
|
@@ -21,6 +19,8 @@ var _podcastLink = _interopRequireDefault(require("@twreporter/react-components/
|
|
|
21
19
|
|
|
22
20
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
23
21
|
|
|
22
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
23
|
+
|
|
24
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -85,22 +85,22 @@ var mobileContentWidthPct = mockup.contentWidth / mockup.defaultWidth * 100;
|
|
|
85
85
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
86
86
|
displayName: "podcast-box-section__Container",
|
|
87
87
|
componentId: "sc-16lji0u-0"
|
|
88
|
-
})(["background-image:url(", "/PodcastBox_Desktop.jpg);background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], _app["default"].assetsPath,
|
|
88
|
+
})(["background-image:url(", "/PodcastBox_Desktop.jpg);background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], _app["default"].assetsPath, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-image: url(", "/PodcastBox_Mobile.jpg);\n padding-top: 40px;\n padding-bottom: 60px;\n "])), _app["default"].assetsPath), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-image: url(", "/PodcastBox_Tablet.jpg);\n "])), _app["default"].assetsPath), _mediaQuery["default"].hdOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-image: url(", "/PodcastBox_DesktopHD.jpg);\n "])), _app["default"].assetsPath));
|
|
89
89
|
|
|
90
90
|
var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
91
91
|
displayName: "podcast-box-section__ContentContainer",
|
|
92
92
|
componentId: "sc-16lji0u-1"
|
|
93
|
-
})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";font-family:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].black, _font.fontFamily["default"], _font.fontWeight.bold, _font.fontFamily.title,
|
|
93
|
+
})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";font-family:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].black, _font.fontFamily["default"], _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n max-width: 1440px;\n padding: 0 219px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n padding: 0 110px;\n p{\n margin-top: 17px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n max-width: ", "%;\n display: block;\n text-align: center;\n padding: 0;\n h3{\n font-size: 24px;\n line-height: 2.17;\n }\n p{\n margin-top: 0;\n }\n "])), mobileContentWidthPct));
|
|
94
94
|
|
|
95
95
|
var ListenButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
96
96
|
displayName: "podcast-box-section__ListenButton",
|
|
97
97
|
componentId: "sc-16lji0u-2"
|
|
98
|
-
})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].brown, _color["default"].white,
|
|
98
|
+
})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].brown, _color["default"].white, _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: absolute;\n right: 110px;\n top: 9px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin: 40px auto 0 auto;\n "]))), _font.fontWeight.bold);
|
|
99
99
|
|
|
100
100
|
var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
101
101
|
displayName: "podcast-box-section__TextColumn",
|
|
102
102
|
componentId: "sc-16lji0u-3"
|
|
103
|
-
})(["", ""],
|
|
103
|
+
})(["", ""], _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n max-width: 608px;\n "]))));
|
|
104
104
|
|
|
105
105
|
var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
106
106
|
displayName: "podcast-box-section__Icon",
|
|
@@ -43,9 +43,11 @@ var _color = _interopRequireDefault(require("../constants/color"));
|
|
|
43
43
|
|
|
44
44
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
45
45
|
|
|
46
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
47
|
+
|
|
46
48
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
47
49
|
|
|
48
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
50
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
49
51
|
|
|
50
52
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
51
53
|
|
|
@@ -86,28 +88,27 @@ var mockup = {
|
|
|
86
88
|
var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
|
|
87
89
|
var tabletMaxWidth = _styleUtils.breakPoints.tabletMaxWidth;
|
|
88
90
|
var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
|
|
89
|
-
var mobileWidth = _styleUtils.breakPoints.mobileMaxWidth;
|
|
90
91
|
var maxSwipableItems = 3;
|
|
91
92
|
var moreText = '更多評論文章';
|
|
92
93
|
var Container = /*#__PURE__*/(0, _styledComponents["default"])(_section["default"]).withConfig({
|
|
93
94
|
displayName: "reviews__Container",
|
|
94
95
|
componentId: "wgotxd-0"
|
|
95
|
-
})(["background-color:white
|
|
96
|
+
})(["background-color:white;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-top: 36px;\n "]))));
|
|
96
97
|
|
|
97
98
|
var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
98
99
|
displayName: "reviews__FlexBox",
|
|
99
100
|
componentId: "wgotxd-1"
|
|
100
|
-
})(["display:flex;padding:0 47px;justify-content:center;@media (max-width:", "){padding:0 35px;}
|
|
101
|
+
})(["display:flex;padding:0 47px;justify-content:center;@media (max-width:", "){padding:0 35px;}", ""], tabletMaxWidth, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
101
102
|
|
|
102
103
|
var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
103
104
|
displayName: "reviews__FlexItem",
|
|
104
105
|
componentId: "wgotxd-2"
|
|
105
|
-
})(["width:312px;&:nth-child(3){margin-left:32.6px;}&:nth-child(even){margin-left:32.6px;}", " ", " ", ""],
|
|
106
|
+
})(["width:312px;&:nth-child(3){margin-left:32.6px;}&:nth-child(even){margin-left:32.6px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 210px;\n &:nth-child(3) {\n margin-left: 30px;\n }\n &:nth-child(even) {\n margin-left: 30px;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 160px;\n &:nth-child(3) {\n margin-left: 20px;\n }\n &:nth-child(even) {\n margin-left: 20px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-top: 10px;\n width: 100%;\n "]))));
|
|
106
107
|
|
|
107
108
|
var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
108
109
|
displayName: "reviews__ImgFrame",
|
|
109
110
|
componentId: "wgotxd-3"
|
|
110
|
-
})(["width:100%;height:202px;", " ", " ", ""],
|
|
111
|
+
})(["width:100%;height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 102px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
|
|
111
112
|
|
|
112
113
|
var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
113
114
|
displayName: "reviews__TextFrame",
|
|
@@ -117,17 +118,17 @@ var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
117
118
|
var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
|
|
118
119
|
displayName: "reviews__Category",
|
|
119
120
|
componentId: "wgotxd-5"
|
|
120
|
-
})(["line-height:1.33
|
|
121
|
+
})(["line-height:1.33;", ""], _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-top: 9px;\n "]))));
|
|
121
122
|
|
|
122
123
|
var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
123
124
|
displayName: "reviews__Title",
|
|
124
125
|
componentId: "wgotxd-6"
|
|
125
|
-
})(["margin-top:2px;font-size:20px;font-weight:", ";font-family:", ";line-height:1.5;", " color:", ";"], _font.fontWeight.bold, _font.fontFamily.title,
|
|
126
|
+
})(["margin-top:2px;font-size:20px;font-weight:", ";font-family:", ";line-height:1.5;", " color:", ";"], _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _color["default"].darkGray);
|
|
126
127
|
|
|
127
128
|
var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
128
129
|
displayName: "reviews__Description",
|
|
129
130
|
componentId: "wgotxd-7"
|
|
130
|
-
})(["margin-top:8px;font-size:16px;color:", ";", " ", " ", ""], _color["default"].darkGray,
|
|
131
|
+
})(["margin-top:8px;font-size:16px;color:", ";", " ", " ", ""], _color["default"].darkGray, _mediaQuery["default"].tabletOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n font-size: 18px;\n "]))), (0, _styleUtils.truncate)('relative', 1.5, 5, 'white'));
|
|
131
132
|
|
|
132
133
|
var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
133
134
|
displayName: "reviews__More",
|
|
@@ -171,15 +172,8 @@ var Reviews = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
171
172
|
sizes: "(min-width: ".concat(desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
|
|
172
173
|
})), /*#__PURE__*/_react["default"].createElement(TextFrame, null, /*#__PURE__*/_react["default"].createElement(Category, null, _.get(post, 'subtitle', '')), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(post, 'title', '')), /*#__PURE__*/_react["default"].createElement(Description, null, _.get(post, 'og_description', '')))));
|
|
173
174
|
});
|
|
174
|
-
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
175
|
-
mobileWidth: mobileWidth
|
|
176
|
-
}, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], {
|
|
177
|
-
mobileWidth: mobileWidth
|
|
178
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].review)), /*#__PURE__*/_react["default"].createElement(FlexBox, null, ReviewsItem), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], {
|
|
179
|
-
maxWidth: mobileWidth
|
|
180
|
-
}, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
175
|
+
return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].review)), /*#__PURE__*/_react["default"].createElement(FlexBox, null, ReviewsItem), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], null, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
181
176
|
alignItems: 'flex-start',
|
|
182
|
-
mobileWidth: mobileWidth,
|
|
183
177
|
maxSwipableItems: maxSwipableItems
|
|
184
178
|
}, ReviewsItem)), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
|
|
185
179
|
text: moreText,
|
|
@@ -43,6 +43,8 @@ var _color = _interopRequireDefault(require("../constants/color"));
|
|
|
43
43
|
|
|
44
44
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
45
45
|
|
|
46
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
47
|
+
|
|
46
48
|
var _forEach = _interopRequireDefault(require("lodash/forEach"));
|
|
47
49
|
|
|
48
50
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
@@ -111,7 +113,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
111
113
|
var Rows = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
112
114
|
displayName: "topics-section__Rows",
|
|
113
115
|
componentId: "sc-17suvlo-1"
|
|
114
|
-
})(["margin-bottom:70px;", ""],
|
|
116
|
+
})(["margin-bottom:70px;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
115
117
|
|
|
116
118
|
var Row = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
117
119
|
displayName: "topics-section__Row",
|
|
@@ -140,7 +142,7 @@ var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
140
142
|
componentId: "sc-17suvlo-7"
|
|
141
143
|
})(["flex:0 0 ", "px;margin-bottom:12px;cursor:pointer;&:first-child{margin-right:30px;}opacity:", ";transition:0.2s opacity linear;", " ", ""], mockup.hd.width["default"], function (props) {
|
|
142
144
|
return props.ifHover ? 0.7 : 1;
|
|
143
|
-
},
|
|
145
|
+
}, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 0 0 ", "px;\n "])), mockup.desktop.width["default"]), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 0 0 ", "px;\n &:first-child {\n margin-right: 20px;\n }\n "])), mockup.tablet.width["default"]));
|
|
144
146
|
|
|
145
147
|
var TopicNameColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
|
|
146
148
|
displayName: "topics-section__TopicNameColumn",
|
|
@@ -159,7 +161,7 @@ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
159
161
|
var ImgColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
|
|
160
162
|
displayName: "topics-section__ImgColumn",
|
|
161
163
|
componentId: "sc-17suvlo-11"
|
|
162
|
-
})(["height:364px;flex:0 0 ", "px;", " ", ""], mockup.hd.width["default"],
|
|
164
|
+
})(["height:364px;flex:0 0 ", "px;", " ", ""], mockup.hd.width["default"], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 247px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
|
|
163
165
|
var DescColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
|
|
164
166
|
displayName: "topics-section__DescColumn",
|
|
165
167
|
componentId: "sc-17suvlo-12"
|
|
@@ -422,10 +424,7 @@ var TopicsSection = /*#__PURE__*/function (_React$PureComponent3) {
|
|
|
422
424
|
}), /*#__PURE__*/_react["default"].createElement(TopicsInARow, {
|
|
423
425
|
data: data.slice(2, totalTopics),
|
|
424
426
|
useTinyImg: useTinyImg
|
|
425
|
-
}), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], {
|
|
426
|
-
maxWidth: _styleUtils.breakPoints.mobileMaxWidth
|
|
427
|
-
}, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
428
|
-
mobileWidth: _styleUtils.breakPoints.mobileMaxWidth,
|
|
427
|
+
}), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], null, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
|
|
429
428
|
maxSwipableItems: totalTopics - 1
|
|
430
429
|
}, mobileTopicComps)), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
|
|
431
430
|
text: "\u66F4\u591A\u5831\u5C0E\u8005\u5C08\u984C",
|