@kids-reporter/draft-renderer 1.0.18 → 1.0.20
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/lib/block-render-maps/annotation.js +29 -1
- package/lib/block-render-maps/article-content.js +22 -6
- package/lib/block-render-maps/info-box.js +12 -2
- package/lib/block-renderers/blockquote.js +23 -41
- package/lib/block-renderers/embedded-code-block.js +16 -1
- package/lib/block-renderers/image-block.js +27 -11
- package/lib/block-renderers/image-link.js +27 -11
- package/lib/block-renderers/info-box-block.js +8 -2
- package/lib/block-renderers/slideshow-block.js +13 -9
- package/lib/entity-decorators/annotation-decorator.js +7 -1
- package/lib/entity-decorators/link-decorator.js +3 -2
- package/package.json +1 -1
|
@@ -8,11 +8,20 @@ var _draftJs = require("draft-js");
|
|
|
8
8
|
var _immutable = _interopRequireDefault(require("immutable"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _mediaQuery = require("../utils/media-query");
|
|
11
12
|
var _articleContent = require("./article-content");
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Heading)`
|
|
15
|
-
margin: 0 auto
|
|
16
|
+
margin: 0 auto 40px auto;
|
|
17
|
+
|
|
18
|
+
margin-bottom: 0px;
|
|
19
|
+
|
|
20
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
21
|
+
padding-left: 0px;
|
|
22
|
+
padding-right: 0px;
|
|
23
|
+
margin-bottom: 0px;
|
|
24
|
+
}
|
|
16
25
|
`;
|
|
17
26
|
const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
|
|
18
27
|
color: #494949;
|
|
@@ -22,6 +31,13 @@ const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
|
|
|
22
31
|
theme
|
|
23
32
|
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
|
|
24
33
|
}
|
|
34
|
+
margin-bottom: 0px;
|
|
35
|
+
|
|
36
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
37
|
+
padding-left: 0px;
|
|
38
|
+
padding-right: 0px;
|
|
39
|
+
margin-bottom: 0px;
|
|
40
|
+
}
|
|
25
41
|
`;
|
|
26
42
|
const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Paragraph)`
|
|
27
43
|
/* overwrite css */
|
|
@@ -30,6 +46,18 @@ const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Pa
|
|
|
30
46
|
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
|
|
31
47
|
font-weight: 400;
|
|
32
48
|
color: #494949;
|
|
49
|
+
|
|
50
|
+
> div[data-block='true'] {
|
|
51
|
+
margin-bottom: 0px;
|
|
52
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
53
|
+
margin-bottom: 0px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
58
|
+
padding-left: 0px;
|
|
59
|
+
padding-right: 0px;
|
|
60
|
+
}
|
|
33
61
|
`;
|
|
34
62
|
const _blockRenderMapForAnnotation = _immutable.default.Map({
|
|
35
63
|
atomic: {
|
|
@@ -25,14 +25,21 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
|
|
|
25
25
|
padding-right: 24px;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
> div[data-block='true']
|
|
29
|
-
margin-bottom:
|
|
28
|
+
> div[data-block='true'] {
|
|
29
|
+
margin-bottom: 60px;
|
|
30
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
31
|
+
margin-bottom: 40px;
|
|
32
|
+
}
|
|
30
33
|
}
|
|
31
34
|
`;
|
|
32
35
|
const Heading = exports.Heading = _styledComponents.default.div`
|
|
33
36
|
width: 100%;
|
|
34
37
|
max-width: 512px;
|
|
35
|
-
margin:
|
|
38
|
+
margin: 0 auto 40px auto;
|
|
39
|
+
|
|
40
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
41
|
+
margin-bottom: 24px;
|
|
42
|
+
}
|
|
36
43
|
|
|
37
44
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
38
45
|
max-width: 584px;
|
|
@@ -53,14 +60,23 @@ const Heading = exports.Heading = _styledComponents.default.div`
|
|
|
53
60
|
const List = exports.List = _styledComponents.default.ol`
|
|
54
61
|
width: 100%;
|
|
55
62
|
max-width: 512px;
|
|
56
|
-
margin: 0 auto
|
|
63
|
+
margin: 0 auto 60px auto;
|
|
64
|
+
list-style-position: inside;
|
|
65
|
+
|
|
66
|
+
> li > div {
|
|
67
|
+
display: inline;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
71
|
+
margin-bottom: 40px;
|
|
72
|
+
padding-left: 24px;
|
|
73
|
+
padding-right: 24px;
|
|
74
|
+
}
|
|
57
75
|
|
|
58
76
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
59
77
|
max-width: 584px;
|
|
60
78
|
}
|
|
61
79
|
|
|
62
|
-
padding-left: 2rem;
|
|
63
|
-
|
|
64
80
|
> li {
|
|
65
81
|
margin-bottom: 6px;
|
|
66
82
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMap = void 0;
|
|
6
|
+
exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMap = exports.InfoBoxAtomic = void 0;
|
|
7
7
|
var _draftJs = require("draft-js");
|
|
8
8
|
var _immutable = _interopRequireDefault(require("immutable"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -92,10 +92,20 @@ const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Parag
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
`;
|
|
95
|
+
const InfoBoxAtomic = exports.InfoBoxAtomic = (0, _styledComponents.default)(_articleContent.Atomic)`
|
|
96
|
+
& figcaption {
|
|
97
|
+
text-align: center;
|
|
98
|
+
border-bottom: none;
|
|
99
|
+
position: relative;
|
|
100
|
+
left: auto;
|
|
101
|
+
bottom: auto;
|
|
102
|
+
padding: 8px 0 0 0;
|
|
103
|
+
}
|
|
104
|
+
`;
|
|
95
105
|
const _blockRenderMapForAnnotation = _immutable.default.Map({
|
|
96
106
|
atomic: {
|
|
97
107
|
element: 'div',
|
|
98
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
108
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoBoxAtomic, {})
|
|
99
109
|
},
|
|
100
110
|
'header-four': {
|
|
101
111
|
element: 'h4',
|
|
@@ -6,31 +6,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.BlockquoteInArticleBody = BlockquoteInArticleBody;
|
|
7
7
|
exports.BorderLeftBlockquote = BorderLeftBlockquote;
|
|
8
8
|
exports.QuoteLeftBlockquote = QuoteLeftBlockquote;
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
var _index = require("../utils/index");
|
|
12
10
|
var _mediaQuery = require("../utils/media-query");
|
|
13
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
13
|
const BorderLeftContainer = _styledComponents.default.blockquote`
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
display: flex;
|
|
15
|
+
gap: 16px;
|
|
16
|
+
`;
|
|
17
|
+
const BorderLeftLine = _styledComponents.default.div`
|
|
18
|
+
width: 3px;
|
|
19
|
+
border-radius: 10px;
|
|
20
|
+
background-color: #c6c6c6;
|
|
21
|
+
align-self: stretch;
|
|
21
22
|
`;
|
|
22
23
|
function BorderLeftBlockquote({
|
|
23
24
|
text
|
|
24
25
|
}) {
|
|
25
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
26
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteText, {
|
|
26
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BorderLeftContainer, {
|
|
27
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BorderLeftLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteText, {
|
|
27
28
|
children: text
|
|
28
|
-
})
|
|
29
|
+
})]
|
|
29
30
|
});
|
|
30
31
|
}
|
|
31
32
|
const QuoteLeftContainer = _styledComponents.default.blockquote`
|
|
32
33
|
margin: 0;
|
|
33
|
-
padding:
|
|
34
|
+
padding: 24px;
|
|
34
35
|
background-color: #f4f4f4;
|
|
35
36
|
display: flex;
|
|
36
37
|
border-radius: 20px;
|
|
@@ -45,37 +46,16 @@ const QuoteText = _styledComponents.default.p`
|
|
|
45
46
|
font-size: ${({
|
|
46
47
|
theme
|
|
47
48
|
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
|
|
48
|
-
font-weight:
|
|
49
|
+
font-weight: 700;
|
|
49
50
|
letter-spacing: 0.9px;
|
|
50
51
|
line-height: 2;
|
|
51
52
|
color: #232323;
|
|
52
53
|
`;
|
|
53
54
|
const SvgBlock = _styledComponents.default.div`
|
|
54
55
|
svg {
|
|
55
|
-
fill:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
${_mediaQuery.mediaQuery.smallOnly} {
|
|
61
|
-
svg {
|
|
62
|
-
width: 20px;
|
|
63
|
-
margin-right: 12px;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
|
|
68
|
-
svg {
|
|
69
|
-
width: 25px;
|
|
70
|
-
margin-right: 15px;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
${_mediaQuery.mediaQuery.largeOnly} {
|
|
75
|
-
svg {
|
|
76
|
-
width: 30px;
|
|
77
|
-
margin-right: 18px;
|
|
78
|
-
}
|
|
56
|
+
fill: #27b3f5;
|
|
57
|
+
width: 32px;
|
|
58
|
+
margin-right: 16px;
|
|
79
59
|
}
|
|
80
60
|
`;
|
|
81
61
|
function QuoteSvg() {
|
|
@@ -100,19 +80,21 @@ function QuoteLeftBlockquote({
|
|
|
100
80
|
});
|
|
101
81
|
}
|
|
102
82
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
103
|
-
max-width:
|
|
104
|
-
margin: 0 auto
|
|
83
|
+
max-width: 512px;
|
|
84
|
+
margin: 0 auto 60px auto;
|
|
105
85
|
|
|
106
|
-
${_mediaQuery.mediaQuery.
|
|
107
|
-
|
|
86
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
87
|
+
margin-bottom: 40px;
|
|
108
88
|
}
|
|
109
89
|
|
|
110
90
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
111
|
-
max-width:
|
|
91
|
+
max-width: 584px;
|
|
112
92
|
}
|
|
113
93
|
|
|
114
94
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
115
95
|
width: 100%;
|
|
96
|
+
padding-left: 24px;
|
|
97
|
+
padding-right: 24px;
|
|
116
98
|
}
|
|
117
99
|
`;
|
|
118
100
|
var BlockquoteTypeEnum = /*#__PURE__*/function (BlockquoteTypeEnum) {
|
|
@@ -87,10 +87,25 @@ const EmbeddedCodeBlock = ({
|
|
|
87
87
|
exports.EmbeddedCodeBlock = EmbeddedCodeBlock;
|
|
88
88
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
89
89
|
max-width: ${props => props.$align === 'image-width' ? '1000' : '700'}px;
|
|
90
|
-
margin: 0 auto
|
|
90
|
+
margin: 0 auto 60px auto;
|
|
91
91
|
|
|
92
92
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
93
93
|
width: 100%;
|
|
94
|
+
margin: 0 auto;
|
|
95
|
+
max-width: min(512px, 100vw - 48px);
|
|
96
|
+
margin-bottom: 40px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
100
|
+
max-width: ${props => props.$align === 'image-width' ? '1000' : '584'}px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
104
|
+
max-width: ${props => props.$align === 'image-width' ? '1000' : '608'}px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
108
|
+
max-width: ${props => props.$align === 'image-width' ? '1000' : '680'}px;
|
|
94
109
|
}
|
|
95
110
|
`;
|
|
96
111
|
function EmbeddedCodeInArticleBody({
|
|
@@ -28,7 +28,7 @@ const Figure = _styledComponents.default.figure`
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
31
|
-
transform: translateX(
|
|
31
|
+
transform: translateX(160px);
|
|
32
32
|
}
|
|
33
33
|
`;
|
|
34
34
|
default:
|
|
@@ -67,14 +67,15 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
67
67
|
|
|
68
68
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
69
69
|
max-width: 340px;
|
|
70
|
-
margin-
|
|
70
|
+
margin-left: auto;
|
|
71
|
+
margin-right: 0px;
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
74
75
|
max-width: calc(100% - 640px);
|
|
75
76
|
position: absolute;
|
|
76
77
|
right: 0;
|
|
77
|
-
top:
|
|
78
|
+
top: 100%;
|
|
78
79
|
margin-right: 0px;
|
|
79
80
|
}
|
|
80
81
|
|
|
@@ -82,7 +83,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
82
83
|
max-width: 240px;
|
|
83
84
|
position: absolute;
|
|
84
85
|
right: 0;
|
|
85
|
-
top:
|
|
86
|
+
top: 100%;
|
|
86
87
|
margin-right: 0px;
|
|
87
88
|
}
|
|
88
89
|
`;
|
|
@@ -114,14 +115,15 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
114
115
|
|
|
115
116
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
116
117
|
max-width: 340px;
|
|
117
|
-
margin-
|
|
118
|
+
margin-left: 0px;
|
|
119
|
+
margin-right: 0px;
|
|
118
120
|
}
|
|
119
121
|
|
|
120
122
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
121
123
|
max-width: 128px;
|
|
122
124
|
position: absolute;
|
|
123
125
|
right: 0;
|
|
124
|
-
top:
|
|
126
|
+
top: 100%;
|
|
125
127
|
margin-right: 0px;
|
|
126
128
|
}
|
|
127
129
|
|
|
@@ -129,7 +131,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
129
131
|
max-width: 240px;
|
|
130
132
|
position: absolute;
|
|
131
133
|
right: 0;
|
|
132
|
-
top:
|
|
134
|
+
top: 100%;
|
|
133
135
|
margin-right: 0px;
|
|
134
136
|
}
|
|
135
137
|
`;
|
|
@@ -216,7 +218,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
216
218
|
margin: 0;
|
|
217
219
|
}
|
|
218
220
|
|
|
219
|
-
max-width: 72vw;
|
|
220
221
|
margin: 40px auto;
|
|
221
222
|
|
|
222
223
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -233,8 +234,23 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
233
234
|
|
|
234
235
|
${props => {
|
|
235
236
|
switch (props.$alignment) {
|
|
237
|
+
case 'default':
|
|
238
|
+
return `
|
|
239
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
240
|
+
max-width: 768px;
|
|
241
|
+
}
|
|
242
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
243
|
+
max-width: 1000px;
|
|
244
|
+
}
|
|
245
|
+
`;
|
|
236
246
|
case 'paragraph-width':
|
|
237
247
|
return `
|
|
248
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
249
|
+
max-width: 512px;
|
|
250
|
+
padding-left: 24px;
|
|
251
|
+
padding-right: 24px;
|
|
252
|
+
}
|
|
253
|
+
|
|
238
254
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
239
255
|
max-width: 584px;
|
|
240
256
|
}
|
|
@@ -252,19 +268,19 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
252
268
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
253
269
|
width: 361px;
|
|
254
270
|
float: right;
|
|
255
|
-
margin:
|
|
271
|
+
margin: 0px 32px 20px 24px;
|
|
256
272
|
}
|
|
257
273
|
|
|
258
274
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
259
275
|
width: 368px;
|
|
260
276
|
float: right;
|
|
261
|
-
margin:
|
|
277
|
+
margin: 0px 0px 0px 32px;
|
|
262
278
|
}
|
|
263
279
|
|
|
264
280
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
265
281
|
width: 451px;
|
|
266
282
|
float: right;
|
|
267
|
-
margin:
|
|
283
|
+
margin: 0px 0px 0px 40px;
|
|
268
284
|
}
|
|
269
285
|
`;
|
|
270
286
|
default:
|
|
@@ -30,7 +30,7 @@ const Figure = _styledComponents.default.figure`
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
33
|
-
transform: translateX(
|
|
33
|
+
transform: translateX(160px);
|
|
34
34
|
}
|
|
35
35
|
`;
|
|
36
36
|
default:
|
|
@@ -69,14 +69,15 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
69
69
|
|
|
70
70
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
71
71
|
max-width: 340px;
|
|
72
|
-
margin-
|
|
72
|
+
margin-left: auto;
|
|
73
|
+
margin-right: 0px;
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
76
77
|
max-width: calc(100% - 640px);
|
|
77
78
|
position: absolute;
|
|
78
79
|
right: 0;
|
|
79
|
-
top:
|
|
80
|
+
top: 100%;
|
|
80
81
|
margin-right: 0px;
|
|
81
82
|
}
|
|
82
83
|
|
|
@@ -84,7 +85,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
84
85
|
max-width: 240px;
|
|
85
86
|
position: absolute;
|
|
86
87
|
right: 0;
|
|
87
|
-
top:
|
|
88
|
+
top: 100%;
|
|
88
89
|
margin-right: 0px;
|
|
89
90
|
}
|
|
90
91
|
`;
|
|
@@ -116,14 +117,15 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
116
117
|
|
|
117
118
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
118
119
|
max-width: 340px;
|
|
119
|
-
margin-
|
|
120
|
+
margin-left: 0px;
|
|
121
|
+
margin-right: 0px;
|
|
120
122
|
}
|
|
121
123
|
|
|
122
124
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
123
125
|
max-width: 128px;
|
|
124
126
|
position: absolute;
|
|
125
127
|
right: 0;
|
|
126
|
-
top:
|
|
128
|
+
top: 100%;
|
|
127
129
|
margin-right: 0px;
|
|
128
130
|
}
|
|
129
131
|
|
|
@@ -131,7 +133,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
131
133
|
max-width: 240px;
|
|
132
134
|
position: absolute;
|
|
133
135
|
right: 0;
|
|
134
|
-
top:
|
|
136
|
+
top: 100%;
|
|
135
137
|
margin-right: 0px;
|
|
136
138
|
}
|
|
137
139
|
`;
|
|
@@ -212,7 +214,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
212
214
|
margin: 0;
|
|
213
215
|
}
|
|
214
216
|
|
|
215
|
-
max-width: 72vw;
|
|
216
217
|
margin: 40px auto;
|
|
217
218
|
|
|
218
219
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -229,8 +230,23 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
229
230
|
|
|
230
231
|
${props => {
|
|
231
232
|
switch (props.$alignment) {
|
|
233
|
+
case 'default':
|
|
234
|
+
return `
|
|
235
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
236
|
+
max-width: 768px;
|
|
237
|
+
}
|
|
238
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
239
|
+
max-width: 1000px;
|
|
240
|
+
}
|
|
241
|
+
`;
|
|
232
242
|
case 'paragraph-width':
|
|
233
243
|
return `
|
|
244
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
245
|
+
max-width: 512px;
|
|
246
|
+
padding-left: 24px;
|
|
247
|
+
padding-right: 24px;
|
|
248
|
+
}
|
|
249
|
+
|
|
234
250
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
235
251
|
max-width: 584px;
|
|
236
252
|
}
|
|
@@ -248,19 +264,19 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
248
264
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
249
265
|
width: 361px;
|
|
250
266
|
float: right;
|
|
251
|
-
margin:
|
|
267
|
+
margin: 0px 32px 20px 24px;
|
|
252
268
|
}
|
|
253
269
|
|
|
254
270
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
255
271
|
width: 368px;
|
|
256
272
|
float: right;
|
|
257
|
-
margin:
|
|
273
|
+
margin: 0px 0px 0px 32px;
|
|
258
274
|
}
|
|
259
275
|
|
|
260
276
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
261
277
|
width: 451px;
|
|
262
278
|
float: right;
|
|
263
|
-
margin:
|
|
279
|
+
margin: 0px 0px 0px 40px;
|
|
264
280
|
}
|
|
265
281
|
`;
|
|
266
282
|
default:
|
|
@@ -25,9 +25,11 @@ const containerStyles = (0, _styledComponents.css)`
|
|
|
25
25
|
border-radius: 30px;
|
|
26
26
|
position: relative;
|
|
27
27
|
|
|
28
|
+
margin: 0 auto 60px auto;
|
|
29
|
+
|
|
28
30
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
29
31
|
padding: 24px;
|
|
30
|
-
margin: 0 24px;
|
|
32
|
+
margin: 0 24px 40px;
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
${_mediaQuery.mediaQuery.mediumOnly} {
|
|
@@ -133,7 +135,11 @@ function BoxBorder({
|
|
|
133
135
|
}
|
|
134
136
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
135
137
|
max-width: 584px;
|
|
136
|
-
margin: 60px auto;
|
|
138
|
+
margin: 0 auto 60px auto;
|
|
139
|
+
|
|
140
|
+
&:last-child {
|
|
141
|
+
margin: 0 auto 0px auto;
|
|
142
|
+
}
|
|
137
143
|
|
|
138
144
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
139
145
|
width: 100%;
|
|
@@ -44,17 +44,17 @@ const mockup = {
|
|
|
44
44
|
},
|
|
45
45
|
desktop: {
|
|
46
46
|
container: {
|
|
47
|
-
width:
|
|
47
|
+
width: 788 // px
|
|
48
48
|
},
|
|
49
49
|
slide: {
|
|
50
|
-
width:
|
|
50
|
+
width: 696,
|
|
51
51
|
// px
|
|
52
|
-
height:
|
|
52
|
+
height: 391,
|
|
53
53
|
// px
|
|
54
54
|
paddingRight: 4 // px
|
|
55
55
|
},
|
|
56
56
|
offset: {
|
|
57
|
-
left:
|
|
57
|
+
left: 48 // px
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
hd: {
|
|
@@ -167,7 +167,7 @@ const CaptionContainer = _styledComponents.default.div`
|
|
|
167
167
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
168
168
|
position: absolute;
|
|
169
169
|
right: 0;
|
|
170
|
-
top: calc(100% -
|
|
170
|
+
top: calc(100% - 76px);
|
|
171
171
|
}
|
|
172
172
|
`;
|
|
173
173
|
const SequenceNumberContainer = _styledComponents.default.div`
|
|
@@ -183,7 +183,8 @@ const Desc = (0, _styledComponents.default)(_multimedia.default.Caption)`
|
|
|
183
183
|
margin-bottom: 0;
|
|
184
184
|
|
|
185
185
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
186
|
-
width:
|
|
186
|
+
width: auto;
|
|
187
|
+
max-width: 240px;
|
|
187
188
|
}
|
|
188
189
|
|
|
189
190
|
${_mediaQuery.mediaQuery.mediumOnly} {
|
|
@@ -293,19 +294,19 @@ const SlideshowFlexBox = _styledComponents.default.div`
|
|
|
293
294
|
|
|
294
295
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
295
296
|
width: ${mockup.desktop.container.width}px;
|
|
296
|
-
transform: translateX(
|
|
297
|
+
transform: translateX(70px);
|
|
297
298
|
}
|
|
298
299
|
|
|
299
300
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
300
301
|
width: ${mockup.hd.container.width}px;
|
|
301
|
-
transform: translateX(
|
|
302
|
+
transform: translateX(160px);
|
|
302
303
|
}
|
|
303
304
|
`;
|
|
304
305
|
const NavigationAndCaptionRow = _styledComponents.default.div`
|
|
305
306
|
display: flex;
|
|
306
307
|
align-items: flex-start;
|
|
307
308
|
gap: 40px;
|
|
308
|
-
padding:
|
|
309
|
+
padding: 20px 32px 0px;
|
|
309
310
|
width: 100%;
|
|
310
311
|
|
|
311
312
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
@@ -452,6 +453,9 @@ function SlideshowBlock({
|
|
|
452
453
|
(0, _jsxRuntime.jsx)(SlideFlexItem, {
|
|
453
454
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
454
455
|
className: "w-full h-full relative overflow-hidden",
|
|
456
|
+
style: {
|
|
457
|
+
backgroundColor: '#f8f8f8'
|
|
458
|
+
},
|
|
455
459
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
456
460
|
srcSet: imgSrcSetArr.join(','),
|
|
457
461
|
src: imgSrc,
|
|
@@ -25,9 +25,15 @@ const AnnotationBody = _styledComponents.default.div`
|
|
|
25
25
|
border-top: 2px solid #27b3f5;
|
|
26
26
|
background-color: #f8f8f8;
|
|
27
27
|
padding: 24px 24px;
|
|
28
|
+
|
|
29
|
+
& [data-contents='true'] {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
gap: 24px;
|
|
33
|
+
}
|
|
28
34
|
`;
|
|
29
35
|
const ArrowIcon = _styledComponents.default.span`
|
|
30
|
-
margin
|
|
36
|
+
margin: 0 3px;
|
|
31
37
|
display: inline-block;
|
|
32
38
|
vertical-align: middle;
|
|
33
39
|
width: 24px;
|
|
@@ -13,11 +13,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
13
13
|
const LinkWrapper = _styledComponents.default.a`
|
|
14
14
|
text-decoration: underline;
|
|
15
15
|
color: #27b3f5;
|
|
16
|
-
transition: color 0.1s ease-in;
|
|
16
|
+
transition: text-decoration-color 0.1s ease-in;
|
|
17
17
|
cursor: pointer;
|
|
18
|
+
text-decoration-color: #c6c6c6;
|
|
18
19
|
|
|
19
20
|
&:hover {
|
|
20
|
-
color: #
|
|
21
|
+
text-decoration-color: #27b3f5;
|
|
21
22
|
}
|
|
22
23
|
`;
|
|
23
24
|
const LinkInner = props => {
|