@mjhls/mjh-framework 1.0.328 → 1.0.329
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/esm/YoutubeGroup.js +31 -8
- 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/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
|
};
|