@mjhls/mjh-framework 1.0.328 → 1.0.330
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/README.md +1 -1
- package/dist/cjs/YoutubeGroup.js +31 -8
- package/dist/cjs/index.js +1 -29
- package/dist/esm/YoutubeGroup.js +31 -8
- package/dist/esm/index.js +1 -29
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/cjs/YoutubeGroup.js
CHANGED
|
@@ -31,6 +31,16 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
31
31
|
tileSize = _useState2[0],
|
|
32
32
|
setTileSize = _useState2[1];
|
|
33
33
|
|
|
34
|
+
var _useState3 = React.useState(false),
|
|
35
|
+
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
|
|
36
|
+
showScroller = _useState4[0],
|
|
37
|
+
setShowScroller = _useState4[1];
|
|
38
|
+
|
|
39
|
+
var _useState5 = React.useState(0),
|
|
40
|
+
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
|
|
41
|
+
scrollPosition = _useState6[0],
|
|
42
|
+
setScrollPosition = _useState6[1];
|
|
43
|
+
|
|
34
44
|
React.useEffect(function () {
|
|
35
45
|
//IE11 Polyfill
|
|
36
46
|
smoothscroll.smoothscroll.polyfill();
|
|
@@ -45,17 +55,29 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
45
55
|
|
|
46
56
|
var setThumbSize = function setThumbSize() {
|
|
47
57
|
var thumbSize = void 0;
|
|
58
|
+
var scrollerVisible = false;
|
|
48
59
|
if (window.innerWidth > 1399) {
|
|
49
60
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
|
|
61
|
+
if (props.dataset.length > 3) {
|
|
62
|
+
scrollerVisible = true;
|
|
63
|
+
}
|
|
50
64
|
}
|
|
51
65
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
52
66
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
|
|
67
|
+
if (props.dataset.length > 2) {
|
|
68
|
+
scrollerVisible = true;
|
|
69
|
+
}
|
|
53
70
|
}
|
|
54
71
|
if (window.innerWidth < 592) {
|
|
55
72
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
|
|
73
|
+
if (props.dataset.length > 1) {
|
|
74
|
+
scrollerVisible = true;
|
|
75
|
+
}
|
|
56
76
|
}
|
|
57
77
|
if (thumbSize !== tileSize) {
|
|
58
78
|
setTileSize(thumbSize);
|
|
79
|
+
setScrollPosition(0);
|
|
80
|
+
setShowScroller(scrollerVisible);
|
|
59
81
|
var videoRows = document.querySelectorAll('#vid-slider .row');
|
|
60
82
|
for (var i = 0; i < videoRows.length; i++) {
|
|
61
83
|
videoRows[i].scrollTo({
|
|
@@ -72,7 +94,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
72
94
|
|
|
73
95
|
function scrollSlider(e, direction) {
|
|
74
96
|
var slide = e.target.parentElement;
|
|
75
|
-
var scrollOffset =
|
|
97
|
+
var scrollOffset = scrollPosition;
|
|
76
98
|
var viewableWidth = slide.clientWidth;
|
|
77
99
|
|
|
78
100
|
//calculate viewable size / slide
|
|
@@ -106,6 +128,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
106
128
|
left: scrollDirection,
|
|
107
129
|
behavior: 'smooth'
|
|
108
130
|
});
|
|
131
|
+
setScrollPosition(scrollDirection);
|
|
109
132
|
}
|
|
110
133
|
|
|
111
134
|
function handleClick(url, vidIndex) {
|
|
@@ -122,19 +145,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
122
145
|
React__default.createElement(
|
|
123
146
|
'div',
|
|
124
147
|
{ className: 'row' },
|
|
125
|
-
React__default.createElement(
|
|
148
|
+
showScroller && showScroller && React__default.createElement(
|
|
126
149
|
'div',
|
|
127
150
|
{ onClick: function onClick(e) {
|
|
128
151
|
return scrollSlider(e, 'prev');
|
|
129
|
-
}, className: 'tile__slider-prev', style: { color:
|
|
130
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
152
|
+
}, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', paddingLeft: '19px' } },
|
|
153
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
131
154
|
),
|
|
132
|
-
React__default.createElement(
|
|
155
|
+
showScroller && showScroller && React__default.createElement(
|
|
133
156
|
'div',
|
|
134
157
|
{ onClick: function onClick(e) {
|
|
135
158
|
return scrollSlider(e, 'next');
|
|
136
|
-
}, className: 'tile__slider-next', style: { color:
|
|
137
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
159
|
+
}, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', paddingRight: '19px' } },
|
|
160
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
138
161
|
),
|
|
139
162
|
React__default.createElement(
|
|
140
163
|
'div',
|
|
@@ -245,7 +268,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
245
268
|
React__default.createElement(
|
|
246
269
|
'style',
|
|
247
270
|
{ jsx: 'true' },
|
|
248
|
-
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x:
|
|
271
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: hidden;\n width: 100%;\n -ms-overflow-style: none;\n overflow-y: hidden !important;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 25px 0 55px -.25rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n\n margin: 0 12.5px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\n\n -o-object-fit: cover;\n object-fit: cover;\n object-position: center;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\';\n background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\n margin-top: -24px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 99;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-prev {\n left: -0.5rem;\n padding: 1rem;\n }\n #vid-slider .tile__slider-next {\n right: -.5rem;\n padding: 1rem;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding-right: 0 1.2rem;\n }\n\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n @media screen and (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n max-width: 620px;\n }\n #vid-slider .tile__img {\n height: 145px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n #vid-slider .tile__img {\n height: 175px;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 118px;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px ;\n }\n }\n\n @media screen and (max-width: 590px) {\n #vid-slider .tile__img {\n height: 195px;\n }\n }\n '
|
|
249
272
|
)
|
|
250
273
|
);
|
|
251
274
|
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -16328,34 +16328,6 @@ var Article = function Article(props) {
|
|
|
16328
16328
|
return null;
|
|
16329
16329
|
};
|
|
16330
16330
|
|
|
16331
|
-
var renderRelevantTopicsDropdown = function renderRelevantTopicsDropdown() {
|
|
16332
|
-
if (content_placement && content_placement.length > 0) {
|
|
16333
|
-
return React__default.createElement(
|
|
16334
|
-
Dropdown,
|
|
16335
|
-
{ style: { marginBottom: '1rem' } },
|
|
16336
|
-
React__default.createElement(
|
|
16337
|
-
Dropdown.Toggle,
|
|
16338
|
-
{ variant: 'primary', id: 'partner-dropdown' },
|
|
16339
|
-
'Relevant Topics'
|
|
16340
|
-
),
|
|
16341
|
-
React__default.createElement(
|
|
16342
|
-
Dropdown.Menu,
|
|
16343
|
-
null,
|
|
16344
|
-
content_placement.length > 0 ? content_placement.map(function (cp, index) {
|
|
16345
|
-
var cp_url = cpModificationRequired ? get_content_placement_url(cp) : cp.path;
|
|
16346
|
-
var href = '/' + cp_url;
|
|
16347
|
-
return React__default.createElement(
|
|
16348
|
-
Dropdown.Item,
|
|
16349
|
-
{ key: index, href: href },
|
|
16350
|
-
cp.name
|
|
16351
|
-
);
|
|
16352
|
-
}) : null
|
|
16353
|
-
)
|
|
16354
|
-
);
|
|
16355
|
-
}
|
|
16356
|
-
return null;
|
|
16357
|
-
};
|
|
16358
|
-
|
|
16359
16331
|
var renderBlockContent = function renderBlockContent(payload) {
|
|
16360
16332
|
var _payload = payload,
|
|
16361
16333
|
body = _payload.body;
|
|
@@ -16553,7 +16525,7 @@ var Article = function Article(props) {
|
|
|
16553
16525
|
twitterSiteName: twitterSiteName
|
|
16554
16526
|
})
|
|
16555
16527
|
),
|
|
16556
|
-
|
|
16528
|
+
React__default.createElement(ArticleDetailDropdown, { article: props.article, exclude: ['News'], className: 'articleDetailDropdown' }),
|
|
16557
16529
|
React__default.createElement(
|
|
16558
16530
|
'p',
|
|
16559
16531
|
null,
|
package/dist/esm/YoutubeGroup.js
CHANGED
|
@@ -26,6 +26,16 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
26
26
|
tileSize = _useState2[0],
|
|
27
27
|
setTileSize = _useState2[1];
|
|
28
28
|
|
|
29
|
+
var _useState3 = useState(false),
|
|
30
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
31
|
+
showScroller = _useState4[0],
|
|
32
|
+
setShowScroller = _useState4[1];
|
|
33
|
+
|
|
34
|
+
var _useState5 = useState(0),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
scrollPosition = _useState6[0],
|
|
37
|
+
setScrollPosition = _useState6[1];
|
|
38
|
+
|
|
29
39
|
useEffect(function () {
|
|
30
40
|
//IE11 Polyfill
|
|
31
41
|
smoothscroll.polyfill();
|
|
@@ -40,17 +50,29 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
40
50
|
|
|
41
51
|
var setThumbSize = function setThumbSize() {
|
|
42
52
|
var thumbSize = void 0;
|
|
53
|
+
var scrollerVisible = false;
|
|
43
54
|
if (window.innerWidth > 1399) {
|
|
44
55
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
|
|
56
|
+
if (props.dataset.length > 3) {
|
|
57
|
+
scrollerVisible = true;
|
|
58
|
+
}
|
|
45
59
|
}
|
|
46
60
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
47
61
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
|
|
62
|
+
if (props.dataset.length > 2) {
|
|
63
|
+
scrollerVisible = true;
|
|
64
|
+
}
|
|
48
65
|
}
|
|
49
66
|
if (window.innerWidth < 592) {
|
|
50
67
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
|
|
68
|
+
if (props.dataset.length > 1) {
|
|
69
|
+
scrollerVisible = true;
|
|
70
|
+
}
|
|
51
71
|
}
|
|
52
72
|
if (thumbSize !== tileSize) {
|
|
53
73
|
setTileSize(thumbSize);
|
|
74
|
+
setScrollPosition(0);
|
|
75
|
+
setShowScroller(scrollerVisible);
|
|
54
76
|
var videoRows = document.querySelectorAll('#vid-slider .row');
|
|
55
77
|
for (var i = 0; i < videoRows.length; i++) {
|
|
56
78
|
videoRows[i].scrollTo({
|
|
@@ -67,7 +89,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
67
89
|
|
|
68
90
|
function scrollSlider(e, direction) {
|
|
69
91
|
var slide = e.target.parentElement;
|
|
70
|
-
var scrollOffset =
|
|
92
|
+
var scrollOffset = scrollPosition;
|
|
71
93
|
var viewableWidth = slide.clientWidth;
|
|
72
94
|
|
|
73
95
|
//calculate viewable size / slide
|
|
@@ -101,6 +123,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
101
123
|
left: scrollDirection,
|
|
102
124
|
behavior: 'smooth'
|
|
103
125
|
});
|
|
126
|
+
setScrollPosition(scrollDirection);
|
|
104
127
|
}
|
|
105
128
|
|
|
106
129
|
function handleClick(url, vidIndex) {
|
|
@@ -117,19 +140,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
117
140
|
React__default.createElement(
|
|
118
141
|
'div',
|
|
119
142
|
{ className: 'row' },
|
|
120
|
-
React__default.createElement(
|
|
143
|
+
showScroller && showScroller && React__default.createElement(
|
|
121
144
|
'div',
|
|
122
145
|
{ onClick: function onClick(e) {
|
|
123
146
|
return scrollSlider(e, 'prev');
|
|
124
|
-
}, className: 'tile__slider-prev', style: { color:
|
|
125
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
147
|
+
}, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', paddingLeft: '19px' } },
|
|
148
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
126
149
|
),
|
|
127
|
-
React__default.createElement(
|
|
150
|
+
showScroller && showScroller && React__default.createElement(
|
|
128
151
|
'div',
|
|
129
152
|
{ onClick: function onClick(e) {
|
|
130
153
|
return scrollSlider(e, 'next');
|
|
131
|
-
}, className: 'tile__slider-next', style: { color:
|
|
132
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
154
|
+
}, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', paddingRight: '19px' } },
|
|
155
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
133
156
|
),
|
|
134
157
|
React__default.createElement(
|
|
135
158
|
'div',
|
|
@@ -240,7 +263,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
240
263
|
React__default.createElement(
|
|
241
264
|
'style',
|
|
242
265
|
{ jsx: 'true' },
|
|
243
|
-
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x:
|
|
266
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: hidden;\n width: 100%;\n -ms-overflow-style: none;\n overflow-y: hidden !important;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 25px 0 55px -.25rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n\n margin: 0 12.5px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\n\n -o-object-fit: cover;\n object-fit: cover;\n object-position: center;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\';\n background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\n margin-top: -24px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 99;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-prev {\n left: -0.5rem;\n padding: 1rem;\n }\n #vid-slider .tile__slider-next {\n right: -.5rem;\n padding: 1rem;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding-right: 0 1.2rem;\n }\n\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n @media screen and (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n max-width: 620px;\n }\n #vid-slider .tile__img {\n height: 145px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n #vid-slider .tile__img {\n height: 175px;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 118px;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px ;\n }\n }\n\n @media screen and (max-width: 590px) {\n #vid-slider .tile__img {\n height: 195px;\n }\n }\n '
|
|
244
267
|
)
|
|
245
268
|
);
|
|
246
269
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -16325,34 +16325,6 @@ var Article = function Article(props) {
|
|
|
16325
16325
|
return null;
|
|
16326
16326
|
};
|
|
16327
16327
|
|
|
16328
|
-
var renderRelevantTopicsDropdown = function renderRelevantTopicsDropdown() {
|
|
16329
|
-
if (content_placement && content_placement.length > 0) {
|
|
16330
|
-
return React__default.createElement(
|
|
16331
|
-
Dropdown,
|
|
16332
|
-
{ style: { marginBottom: '1rem' } },
|
|
16333
|
-
React__default.createElement(
|
|
16334
|
-
Dropdown.Toggle,
|
|
16335
|
-
{ variant: 'primary', id: 'partner-dropdown' },
|
|
16336
|
-
'Relevant Topics'
|
|
16337
|
-
),
|
|
16338
|
-
React__default.createElement(
|
|
16339
|
-
Dropdown.Menu,
|
|
16340
|
-
null,
|
|
16341
|
-
content_placement.length > 0 ? content_placement.map(function (cp, index) {
|
|
16342
|
-
var cp_url = cpModificationRequired ? get_content_placement_url(cp) : cp.path;
|
|
16343
|
-
var href = '/' + cp_url;
|
|
16344
|
-
return React__default.createElement(
|
|
16345
|
-
Dropdown.Item,
|
|
16346
|
-
{ key: index, href: href },
|
|
16347
|
-
cp.name
|
|
16348
|
-
);
|
|
16349
|
-
}) : null
|
|
16350
|
-
)
|
|
16351
|
-
);
|
|
16352
|
-
}
|
|
16353
|
-
return null;
|
|
16354
|
-
};
|
|
16355
|
-
|
|
16356
16328
|
var renderBlockContent = function renderBlockContent(payload) {
|
|
16357
16329
|
var _payload = payload,
|
|
16358
16330
|
body = _payload.body;
|
|
@@ -16550,7 +16522,7 @@ var Article = function Article(props) {
|
|
|
16550
16522
|
twitterSiteName: twitterSiteName
|
|
16551
16523
|
})
|
|
16552
16524
|
),
|
|
16553
|
-
|
|
16525
|
+
React__default.createElement(ArticleDetailDropdown, { article: props.article, exclude: ['News'], className: 'articleDetailDropdown' }),
|
|
16554
16526
|
React__default.createElement(
|
|
16555
16527
|
'p',
|
|
16556
16528
|
null,
|