@kids-reporter/draft-renderer 1.0.19 → 1.0.21
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 +35 -7
- package/lib/block-renderers/blockquote.js +23 -41
- package/lib/block-renderers/divider.js +1 -1
- package/lib/block-renderers/embedded-code-block.js +16 -1
- package/lib/block-renderers/image-block.js +41 -11
- package/lib/block-renderers/image-link.js +29 -12
- package/lib/block-renderers/info-box-block.js +8 -2
- package/lib/block-renderers/slideshow-block.js +17 -12
- package/lib/entity-decorators/annotation-decorator.js +7 -1
- package/lib/entity-decorators/link-decorator.js +4 -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,18 @@ 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: 38px;
|
|
30
30
|
}
|
|
31
31
|
`;
|
|
32
32
|
const Heading = exports.Heading = _styledComponents.default.div`
|
|
33
33
|
width: 100%;
|
|
34
34
|
max-width: 512px;
|
|
35
|
-
margin:
|
|
35
|
+
margin: 0 auto 40px auto;
|
|
36
|
+
|
|
37
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
38
|
+
margin-bottom: 24px;
|
|
39
|
+
}
|
|
36
40
|
|
|
37
41
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
38
42
|
max-width: 584px;
|
|
@@ -53,14 +57,23 @@ const Heading = exports.Heading = _styledComponents.default.div`
|
|
|
53
57
|
const List = exports.List = _styledComponents.default.ol`
|
|
54
58
|
width: 100%;
|
|
55
59
|
max-width: 512px;
|
|
56
|
-
margin: 0 auto
|
|
60
|
+
margin: 0 auto 38px auto;
|
|
61
|
+
list-style-position: inside;
|
|
62
|
+
|
|
63
|
+
> li > div {
|
|
64
|
+
display: inline;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
68
|
+
margin-bottom: 38px;
|
|
69
|
+
padding-left: 24px;
|
|
70
|
+
padding-right: 24px;
|
|
71
|
+
}
|
|
57
72
|
|
|
58
73
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
59
74
|
max-width: 584px;
|
|
60
75
|
}
|
|
61
76
|
|
|
62
|
-
padding-left: 2rem;
|
|
63
|
-
|
|
64
77
|
> li {
|
|
65
78
|
margin-bottom: 6px;
|
|
66
79
|
}
|
|
@@ -70,10 +83,25 @@ const Atomic = exports.Atomic = _styledComponents.default.div`
|
|
|
70
83
|
> figure {
|
|
71
84
|
margin: 0;
|
|
72
85
|
}
|
|
86
|
+
|
|
87
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
88
|
+
div:has(+ div [data-image-block-caption-alignment='default'])
|
|
89
|
+
[data-image-block-caption-alignment='default'],
|
|
90
|
+
[data-image-slideshow-caption-alignment='default'] {
|
|
91
|
+
position: relative !important;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
95
|
+
div:has(+ div [data-image-block-caption-alignment='default'])
|
|
96
|
+
[data-image-block-caption-alignment='default'],
|
|
97
|
+
[data-image-slideshow-caption-alignment='default'] {
|
|
98
|
+
position: relative !important;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
73
101
|
`;
|
|
74
102
|
const _blockRenderMap = _immutable.default.Map({
|
|
75
103
|
atomic: {
|
|
76
|
-
element: '
|
|
104
|
+
element: 'div',
|
|
77
105
|
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Atomic, {})
|
|
78
106
|
},
|
|
79
107
|
'header-two': {
|
|
@@ -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: 4px;
|
|
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 38px auto;
|
|
105
85
|
|
|
106
|
-
${_mediaQuery.mediaQuery.
|
|
107
|
-
|
|
86
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
87
|
+
margin-bottom: 38px;
|
|
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) {
|
|
@@ -16,7 +16,7 @@ const Hr = _styledComponents.default.hr`
|
|
|
16
16
|
}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
|
|
17
17
|
width: 385px;
|
|
18
18
|
height: 3px;
|
|
19
|
-
margin:
|
|
19
|
+
margin: 38px auto 38px auto;
|
|
20
20
|
|
|
21
21
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
22
22
|
width: 55%;
|
|
@@ -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,6 +67,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
67
67
|
|
|
68
68
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
69
69
|
max-width: 340px;
|
|
70
|
+
margin-left: auto;
|
|
70
71
|
margin-right: 32px;
|
|
71
72
|
}
|
|
72
73
|
|
|
@@ -74,7 +75,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
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,12 +83,20 @@ 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
|
`;
|
|
89
90
|
case 'paragraph-width':
|
|
90
91
|
return `
|
|
92
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
93
|
+
width: 100%;
|
|
94
|
+
text-align: left;
|
|
95
|
+
}
|
|
96
|
+
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
97
|
+
width: 100%;
|
|
98
|
+
text-align: left;
|
|
99
|
+
}
|
|
91
100
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
92
101
|
position: absolute;
|
|
93
102
|
left: calc(100% + 32px);
|
|
@@ -114,14 +123,15 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
114
123
|
|
|
115
124
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
116
125
|
max-width: 340px;
|
|
117
|
-
margin-
|
|
126
|
+
margin-left: 0px;
|
|
127
|
+
margin-right: 0px;
|
|
118
128
|
}
|
|
119
129
|
|
|
120
130
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
121
131
|
max-width: 128px;
|
|
122
132
|
position: absolute;
|
|
123
133
|
right: 0;
|
|
124
|
-
top:
|
|
134
|
+
top: 100%;
|
|
125
135
|
margin-right: 0px;
|
|
126
136
|
}
|
|
127
137
|
|
|
@@ -129,7 +139,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
129
139
|
max-width: 240px;
|
|
130
140
|
position: absolute;
|
|
131
141
|
right: 0;
|
|
132
|
-
top:
|
|
142
|
+
top: 100%;
|
|
133
143
|
margin-right: 0px;
|
|
134
144
|
}
|
|
135
145
|
`;
|
|
@@ -140,7 +150,9 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
140
150
|
`;
|
|
141
151
|
const Img = _styledComponents.default.img`
|
|
142
152
|
width: 100%;
|
|
143
|
-
|
|
153
|
+
height: 100%;
|
|
154
|
+
display: block;
|
|
155
|
+
object-fit: cover;
|
|
144
156
|
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
145
157
|
`;
|
|
146
158
|
function ImageBlockInner({
|
|
@@ -192,6 +204,8 @@ function ImageBlockInner({
|
|
|
192
204
|
return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
|
|
193
205
|
}
|
|
194
206
|
}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)(FigureCaption, {
|
|
207
|
+
"data-image-block-caption": "true",
|
|
208
|
+
"data-image-block-caption-alignment": data.alignment,
|
|
195
209
|
$alignment: data.alignment,
|
|
196
210
|
children: desc
|
|
197
211
|
})]
|
|
@@ -216,7 +230,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
216
230
|
margin: 0;
|
|
217
231
|
}
|
|
218
232
|
|
|
219
|
-
max-width: 72vw;
|
|
220
233
|
margin: 40px auto;
|
|
221
234
|
|
|
222
235
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -233,8 +246,24 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
233
246
|
|
|
234
247
|
${props => {
|
|
235
248
|
switch (props.$alignment) {
|
|
249
|
+
case 'default':
|
|
250
|
+
return `
|
|
251
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
252
|
+
max-width: 768px;
|
|
253
|
+
}
|
|
254
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
255
|
+
max-width: 1000px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
`;
|
|
236
259
|
case 'paragraph-width':
|
|
237
260
|
return `
|
|
261
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
262
|
+
max-width: 512px;
|
|
263
|
+
padding-left: 24px;
|
|
264
|
+
padding-right: 24px;
|
|
265
|
+
}
|
|
266
|
+
|
|
238
267
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
239
268
|
max-width: 584px;
|
|
240
269
|
}
|
|
@@ -252,19 +281,19 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
252
281
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
253
282
|
width: 361px;
|
|
254
283
|
float: right;
|
|
255
|
-
margin:
|
|
284
|
+
margin: 0px 32px 20px 24px;
|
|
256
285
|
}
|
|
257
286
|
|
|
258
287
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
259
288
|
width: 368px;
|
|
260
289
|
float: right;
|
|
261
|
-
margin:
|
|
290
|
+
margin: 0px 0px 0px 32px;
|
|
262
291
|
}
|
|
263
292
|
|
|
264
293
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
265
294
|
width: 451px;
|
|
266
295
|
float: right;
|
|
267
|
-
margin:
|
|
296
|
+
margin: 0px 0px 0px 40px;
|
|
268
297
|
}
|
|
269
298
|
`;
|
|
270
299
|
default:
|
|
@@ -277,6 +306,7 @@ function ImageInArticleBody({
|
|
|
277
306
|
data
|
|
278
307
|
}) {
|
|
279
308
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
|
|
309
|
+
"data-image-block-container": "true",
|
|
280
310
|
$alignment: data.alignment,
|
|
281
311
|
className: className,
|
|
282
312
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageBlock, {
|
|
@@ -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
|
`;
|
|
@@ -141,8 +143,9 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
141
143
|
}}
|
|
142
144
|
`;
|
|
143
145
|
const Img = _styledComponents.default.img`
|
|
146
|
+
display: block;
|
|
144
147
|
width: 100%;
|
|
145
|
-
object-fit:
|
|
148
|
+
object-fit: cover;
|
|
146
149
|
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
147
150
|
`;
|
|
148
151
|
function ImageLinkBlockInner({
|
|
@@ -212,7 +215,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
212
215
|
margin: 0;
|
|
213
216
|
}
|
|
214
217
|
|
|
215
|
-
max-width: 72vw;
|
|
216
218
|
margin: 40px auto;
|
|
217
219
|
|
|
218
220
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -229,8 +231,23 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
229
231
|
|
|
230
232
|
${props => {
|
|
231
233
|
switch (props.$alignment) {
|
|
234
|
+
case 'default':
|
|
235
|
+
return `
|
|
236
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
237
|
+
max-width: 768px;
|
|
238
|
+
}
|
|
239
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
240
|
+
max-width: 1000px;
|
|
241
|
+
}
|
|
242
|
+
`;
|
|
232
243
|
case 'paragraph-width':
|
|
233
244
|
return `
|
|
245
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
246
|
+
max-width: 512px;
|
|
247
|
+
padding-left: 24px;
|
|
248
|
+
padding-right: 24px;
|
|
249
|
+
}
|
|
250
|
+
|
|
234
251
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
235
252
|
max-width: 584px;
|
|
236
253
|
}
|
|
@@ -248,19 +265,19 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
248
265
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
249
266
|
width: 361px;
|
|
250
267
|
float: right;
|
|
251
|
-
margin:
|
|
268
|
+
margin: 0px 32px 20px 24px;
|
|
252
269
|
}
|
|
253
270
|
|
|
254
271
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
255
272
|
width: 368px;
|
|
256
273
|
float: right;
|
|
257
|
-
margin:
|
|
274
|
+
margin: 0px 0px 0px 32px;
|
|
258
275
|
}
|
|
259
276
|
|
|
260
277
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
261
278
|
width: 451px;
|
|
262
279
|
float: right;
|
|
263
|
-
margin:
|
|
280
|
+
margin: 0px 0px 0px 40px;
|
|
264
281
|
}
|
|
265
282
|
`;
|
|
266
283
|
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,27 +44,27 @@ const mockup = {
|
|
|
44
44
|
},
|
|
45
45
|
desktop: {
|
|
46
46
|
container: {
|
|
47
|
-
width:
|
|
47
|
+
width: 768 // px
|
|
48
48
|
},
|
|
49
49
|
slide: {
|
|
50
|
-
width:
|
|
50
|
+
width: 676,
|
|
51
51
|
// px
|
|
52
|
-
height:
|
|
52
|
+
height: 370,
|
|
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: {
|
|
61
61
|
container: {
|
|
62
|
-
width:
|
|
62
|
+
width: 1000 // px
|
|
63
63
|
},
|
|
64
64
|
slide: {
|
|
65
|
-
width:
|
|
65
|
+
width: 910,
|
|
66
66
|
// px
|
|
67
|
-
height:
|
|
67
|
+
height: 500,
|
|
68
68
|
// px
|
|
69
69
|
paddingRight: 4 // px
|
|
70
70
|
},
|
|
@@ -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(80px);
|
|
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,
|
|
@@ -517,6 +521,7 @@ function SlideshowBlock({
|
|
|
517
521
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NextArrowSvg, {})
|
|
518
522
|
})]
|
|
519
523
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionContainer, {
|
|
524
|
+
"data-image-slideshow-caption-alignment": "default",
|
|
520
525
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(SequenceNumberContainer, {
|
|
521
526
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageSequenceNumber, {
|
|
522
527
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageNumber, {
|
|
@@ -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,13 @@ 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;
|
|
19
|
+
text-underline-offset: 3px;
|
|
18
20
|
|
|
19
21
|
&:hover {
|
|
20
|
-
color: #
|
|
22
|
+
text-decoration-color: #27b3f5;
|
|
21
23
|
}
|
|
22
24
|
`;
|
|
23
25
|
const LinkInner = props => {
|