@capillarytech/creatives-library 9.0.40 → 9.0.41-alpha.1
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/package.json +1 -1
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +126 -0
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +106 -15
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +139 -1
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +133 -0
- package/v2Components/CommonTestAndPreview/index.js +240 -26
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +364 -0
- package/v2Components/CommonTestAndPreview/tests/utils.test.js +49 -0
- package/v2Components/CommonTestAndPreview/utils.js +20 -0
- package/v2Containers/Templates/_templates.scss +179 -1
- package/v2Containers/Templates/index.js +97 -10
- package/v2Containers/Viber/constants.js +21 -0
- package/v2Containers/Viber/index.js +719 -49
- package/v2Containers/Viber/index.scss +175 -0
- package/v2Containers/Viber/messages.js +121 -0
- package/v2Containers/Viber/tests/index.test.js +80 -0
package/package.json
CHANGED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import CapRow from '@capillarytech/cap-ui-library/CapRow';
|
|
4
|
+
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
|
|
5
|
+
import CapImage from '@capillarytech/cap-ui-library/CapImage';
|
|
6
|
+
import {
|
|
7
|
+
getTrimmedText,
|
|
8
|
+
hasTrimmedText,
|
|
9
|
+
getCarouselButtonsWithTitles,
|
|
10
|
+
getCarouselButtonSlotCount,
|
|
11
|
+
} from '../utils';
|
|
12
|
+
|
|
13
|
+
const ViberCarouselPreviewCards = ({ cards = [] }) => {
|
|
14
|
+
const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
|
|
15
|
+
const carouselButtonSlotCount = useMemo(
|
|
16
|
+
() => getCarouselButtonSlotCount(previewCards),
|
|
17
|
+
[previewCards],
|
|
18
|
+
);
|
|
19
|
+
const carouselTitleRefs = useRef([]);
|
|
20
|
+
const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
|
|
21
|
+
|
|
22
|
+
carouselTitleRefs.current = previewCards.map(() => null);
|
|
23
|
+
|
|
24
|
+
useLayoutEffect(() => {
|
|
25
|
+
let maxLines = 1;
|
|
26
|
+
carouselTitleRefs.current?.forEach((node) => {
|
|
27
|
+
if (!node) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const { lineHeight } = window.getComputedStyle(node);
|
|
31
|
+
const parsedLineHeight = parseFloat(lineHeight) || 18;
|
|
32
|
+
const lines = Math.min(2, Math.max(1, Math.round(node?.scrollHeight / parsedLineHeight)));
|
|
33
|
+
if (lines > maxLines) {
|
|
34
|
+
maxLines = lines;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
|
|
38
|
+
}, [previewCards]);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<CapRow type="flex" noWrap className="scroll">
|
|
42
|
+
{previewCards?.map((card, index) => {
|
|
43
|
+
const cardButtons = getCarouselButtonsWithTitles(card);
|
|
44
|
+
const titleLineClass = `text-wrap--${carouselTitleLineCount}-line`;
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<CapRow type="flex-column" className="card" key={`viber-carousel-card-${index}`}>
|
|
48
|
+
{hasTrimmedText(card?.mediaUrl) ? (
|
|
49
|
+
<CapImage
|
|
50
|
+
src={card?.mediaUrl}
|
|
51
|
+
className="image"
|
|
52
|
+
alt="Viber carousel card"
|
|
53
|
+
/>
|
|
54
|
+
) : (
|
|
55
|
+
<CapRow className="image-placeholder" />
|
|
56
|
+
)}
|
|
57
|
+
<CapRow className="card-body">
|
|
58
|
+
<CapRow className={`text-wrap ${titleLineClass}`}>
|
|
59
|
+
{hasTrimmedText(card?.text) ? (
|
|
60
|
+
<CapRow
|
|
61
|
+
className="text-inner"
|
|
62
|
+
ref={(node) => {
|
|
63
|
+
carouselTitleRefs.current[index] = node;
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<CapLabel type="label15" className="text">
|
|
67
|
+
{card?.text}
|
|
68
|
+
</CapLabel>
|
|
69
|
+
</CapRow>
|
|
70
|
+
) : (
|
|
71
|
+
<CapLabel type="label15" className="text-placeholder" />
|
|
72
|
+
)}
|
|
73
|
+
</CapRow>
|
|
74
|
+
{carouselButtonSlotCount > 0 && (
|
|
75
|
+
<CapRow className="buttons">
|
|
76
|
+
{Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
|
|
77
|
+
const cardButton = cardButtons[btnIndex];
|
|
78
|
+
const trimmedCardButtonTitle = cardButton
|
|
79
|
+
? getTrimmedText(cardButton?.title)
|
|
80
|
+
: '';
|
|
81
|
+
|
|
82
|
+
if (!trimmedCardButtonTitle) {
|
|
83
|
+
return (
|
|
84
|
+
<CapRow
|
|
85
|
+
className="button button-placeholder"
|
|
86
|
+
key={`viber-carousel-btn-placeholder-${index}-${btnIndex}`}
|
|
87
|
+
aria-hidden="true"
|
|
88
|
+
/>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<CapLabel
|
|
94
|
+
className={`button ${btnIndex === 1 ? 'button-secondary' : ''}`}
|
|
95
|
+
key={`viber-carousel-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
|
|
96
|
+
>
|
|
97
|
+
{trimmedCardButtonTitle}
|
|
98
|
+
</CapLabel>
|
|
99
|
+
);
|
|
100
|
+
})}
|
|
101
|
+
</CapRow>
|
|
102
|
+
)}
|
|
103
|
+
</CapRow>
|
|
104
|
+
</CapRow>
|
|
105
|
+
);
|
|
106
|
+
})}
|
|
107
|
+
</CapRow>
|
|
108
|
+
);
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
ViberCarouselPreviewCards.propTypes = {
|
|
112
|
+
cards: PropTypes.arrayOf(PropTypes.shape({
|
|
113
|
+
text: PropTypes.string,
|
|
114
|
+
mediaUrl: PropTypes.string,
|
|
115
|
+
buttons: PropTypes.arrayOf(PropTypes.shape({
|
|
116
|
+
title: PropTypes.string,
|
|
117
|
+
action: PropTypes.string,
|
|
118
|
+
})),
|
|
119
|
+
})),
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
ViberCarouselPreviewCards.defaultProps = {
|
|
123
|
+
cards: [],
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export default ViberCarouselPreviewCards;
|
|
@@ -14,9 +14,18 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
|
|
|
14
14
|
import CapImage from '@capillarytech/cap-ui-library/CapImage';
|
|
15
15
|
import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
|
|
16
16
|
import CapRow from '@capillarytech/cap-ui-library/CapRow';
|
|
17
|
-
import {
|
|
17
|
+
import {
|
|
18
|
+
ANDROID,
|
|
19
|
+
IOS,
|
|
20
|
+
ANDROID_DEVICE_NAME,
|
|
21
|
+
IOS_DEVICE_NAME,
|
|
22
|
+
VIBER_ACCOUNT_NAME,
|
|
23
|
+
MEDIA_TYPE_CAROUSEL,
|
|
24
|
+
} from '../constants';
|
|
18
25
|
import messages from '../messages';
|
|
19
26
|
import videoPlay from '../../../assets/videoPlay.svg';
|
|
27
|
+
import { getTrimmedText, hasTrimmedText } from '../utils';
|
|
28
|
+
import ViberCarouselPreviewCards from './ViberCarouselPreviewCards';
|
|
20
29
|
|
|
21
30
|
// Import device mockup images (same as SMS)
|
|
22
31
|
const smsMobileAndroid = require('../../../assets/Android.png');
|
|
@@ -43,7 +52,35 @@ const ViberPreviewContent = ({
|
|
|
43
52
|
imageURL = '',
|
|
44
53
|
videoParams = {},
|
|
45
54
|
buttonText = '',
|
|
55
|
+
type = '',
|
|
56
|
+
cards = [],
|
|
57
|
+
showCarouselEditorPreview = false,
|
|
46
58
|
} = viberContent;
|
|
59
|
+
const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
|
|
60
|
+
|
|
61
|
+
const cardHasMeaningfulContent = (card) => {
|
|
62
|
+
if (!card || typeof card !== 'object') return false;
|
|
63
|
+
return (
|
|
64
|
+
hasTrimmedText(card?.text) ||
|
|
65
|
+
hasTrimmedText(card?.mediaUrl) ||
|
|
66
|
+
(card.buttons ?? []).some(button => hasTrimmedText(button?.title))
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const hasMeaningfulCarousel =
|
|
71
|
+
hasCarouselContent &&
|
|
72
|
+
Array.isArray(cards) &&
|
|
73
|
+
cards.length > 0 &&
|
|
74
|
+
cards.some(cardHasMeaningfulContent);
|
|
75
|
+
|
|
76
|
+
const showCarouselInPreview =
|
|
77
|
+
hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
|
|
78
|
+
|
|
79
|
+
const previewCarouselCards =
|
|
80
|
+
hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
|
|
81
|
+
|
|
82
|
+
const trimmedMessageContent = getTrimmedText(messageContent);
|
|
83
|
+
const trimmedButtonText = getTrimmedText(buttonText);
|
|
47
84
|
|
|
48
85
|
// Get account name (first letter for icon)
|
|
49
86
|
const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
|
|
@@ -99,8 +136,15 @@ const ViberPreviewContent = ({
|
|
|
99
136
|
);
|
|
100
137
|
}
|
|
101
138
|
|
|
102
|
-
// Check if there's any content to display
|
|
103
|
-
const hasContent =
|
|
139
|
+
// Check if there's any content to display (whitespace-only strings do not count)
|
|
140
|
+
const hasContent = Boolean(
|
|
141
|
+
trimmedMessageContent
|
|
142
|
+
|| hasTrimmedText(imageURL)
|
|
143
|
+
|| videoParams?.viberVideoSrc
|
|
144
|
+
|| trimmedButtonText
|
|
145
|
+
|| hasMeaningfulCarousel
|
|
146
|
+
|| (hasCarouselContent && showCarouselEditorPreview)
|
|
147
|
+
);
|
|
104
148
|
|
|
105
149
|
// Render normal Viber preview
|
|
106
150
|
return (
|
|
@@ -125,23 +169,34 @@ const ViberPreviewContent = ({
|
|
|
125
169
|
|
|
126
170
|
{/* Viber Message Container */}
|
|
127
171
|
{hasContent && (
|
|
128
|
-
<CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
|
|
172
|
+
<CapRow className={`viber-message-container ${showCarouselInPreview ? 'viber-message-container-carousel' : ''} ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
|
|
129
173
|
{/* Brand Name Display (from TemplatePreview line 1136) */}
|
|
130
|
-
<CapRow
|
|
174
|
+
<CapRow
|
|
175
|
+
type="flex"
|
|
176
|
+
align="middle"
|
|
177
|
+
fullWidth={showCarouselInPreview}
|
|
178
|
+
className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}
|
|
179
|
+
>
|
|
131
180
|
{/* Account Icon (from TemplatePreview line 1146-1160) */}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
181
|
+
{!hasCarouselContent && (
|
|
182
|
+
<CapRow type="flex" className="viber-account-icon">
|
|
183
|
+
{accountIcon}
|
|
184
|
+
</CapRow>
|
|
185
|
+
)}
|
|
135
186
|
|
|
136
187
|
{/* Message Bubble (from TemplatePreview line 1161-1223) */}
|
|
137
|
-
<CapRow
|
|
188
|
+
<CapRow
|
|
189
|
+
useLegacy
|
|
190
|
+
fullWidth={showCarouselInPreview}
|
|
191
|
+
className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}
|
|
192
|
+
>
|
|
138
193
|
{/* Text Viber preview */}
|
|
139
|
-
{
|
|
194
|
+
{trimmedMessageContent && !hasCarouselContent && (
|
|
140
195
|
<CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
|
|
141
196
|
)}
|
|
142
197
|
|
|
143
198
|
{/* Image Viber preview */}
|
|
144
|
-
{imageURL && (
|
|
199
|
+
{hasTrimmedText(imageURL) && (
|
|
145
200
|
<CapImage
|
|
146
201
|
src={imageURL}
|
|
147
202
|
className="viber-image-preview"
|
|
@@ -171,16 +226,42 @@ const ViberPreviewContent = ({
|
|
|
171
226
|
)}
|
|
172
227
|
|
|
173
228
|
{/* Button Viber preview */}
|
|
174
|
-
{
|
|
229
|
+
{trimmedButtonText && (
|
|
175
230
|
<CapLabel className="viber-button-base">
|
|
176
231
|
<p className="viber-button-card-text">
|
|
177
232
|
{buttonText}
|
|
178
233
|
</p>
|
|
179
234
|
</CapLabel>
|
|
180
235
|
)}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
236
|
+
{/* Carousel Viber preview */}
|
|
237
|
+
{showCarouselInPreview && (
|
|
238
|
+
<CapRow type="flex-column" fullWidth className="viber-carousel-preview">
|
|
239
|
+
<CapRow type="flex-column" className="viber-carousel-message-pop">
|
|
240
|
+
{trimmedMessageContent ? (
|
|
241
|
+
<CapLabel
|
|
242
|
+
type="label15"
|
|
243
|
+
className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
|
|
244
|
+
>
|
|
245
|
+
{messageContent}
|
|
246
|
+
</CapLabel>
|
|
247
|
+
) : (
|
|
248
|
+
<CapRow className="viber-carousel-message-box-placeholder" />
|
|
249
|
+
)}
|
|
250
|
+
<CapLabel type="label1" className="viber-carousel-message-timestamp">
|
|
251
|
+
{timestamp}
|
|
252
|
+
</CapLabel>
|
|
253
|
+
</CapRow>
|
|
254
|
+
|
|
255
|
+
<CapRow type="flex-column" fullWidth className="viber-carousel-cards-pop">
|
|
256
|
+
<ViberCarouselPreviewCards cards={previewCarouselCards} />
|
|
257
|
+
</CapRow>
|
|
258
|
+
</CapRow>
|
|
259
|
+
)}
|
|
260
|
+
{!showCarouselInPreview && (
|
|
261
|
+
<CapLabel type="label1" className="viber-timestamp">
|
|
262
|
+
{timestamp}
|
|
263
|
+
</CapLabel>
|
|
264
|
+
)}
|
|
184
265
|
<CapRow useLegacy className="empty-placeholder" />
|
|
185
266
|
</CapRow>
|
|
186
267
|
|
|
@@ -214,6 +295,16 @@ ViberPreviewContent.propTypes = {
|
|
|
214
295
|
viberVideoPreviewImg: PropTypes.string,
|
|
215
296
|
}),
|
|
216
297
|
buttonText: PropTypes.string,
|
|
298
|
+
type: PropTypes.string,
|
|
299
|
+
cards: PropTypes.arrayOf(PropTypes.shape({
|
|
300
|
+
text: PropTypes.string,
|
|
301
|
+
mediaUrl: PropTypes.string,
|
|
302
|
+
buttons: PropTypes.arrayOf(PropTypes.shape({
|
|
303
|
+
title: PropTypes.string,
|
|
304
|
+
action: PropTypes.string,
|
|
305
|
+
})),
|
|
306
|
+
})),
|
|
307
|
+
showCarouselEditorPreview: PropTypes.bool,
|
|
217
308
|
}),
|
|
218
309
|
}),
|
|
219
310
|
device: PropTypes.oneOf([ANDROID, IOS]),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import '~@capillarytech/cap-ui-library/styles/_variables';
|
|
2
|
+
@import './_viberCarouselPreviewCards.scss';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* UnifiedPreview Styles
|
|
@@ -782,9 +783,13 @@
|
|
|
782
783
|
|
|
783
784
|
.viber-content-overlay {
|
|
784
785
|
top: 3.2rem;
|
|
785
|
-
|
|
786
|
+
overflow: hidden;
|
|
787
|
+
|
|
788
|
+
.sms-navigation-bar.viber-navigation-bar {
|
|
789
|
+
width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
|
|
786
790
|
margin-left: $CAP_SPACE_06;
|
|
787
791
|
margin-right: $CAP_SPACE_08;
|
|
792
|
+
box-sizing: border-box;
|
|
788
793
|
}
|
|
789
794
|
}
|
|
790
795
|
|
|
@@ -2407,12 +2412,21 @@
|
|
|
2407
2412
|
// Body content follows TemplatePreview Viber structure
|
|
2408
2413
|
.sms-content-overlay {
|
|
2409
2414
|
&.viber-preview {
|
|
2415
|
+
overflow: hidden;
|
|
2416
|
+
|
|
2410
2417
|
// Viber message container
|
|
2411
2418
|
.viber-message-container {
|
|
2412
2419
|
position: relative;
|
|
2413
2420
|
flex: 1;
|
|
2414
2421
|
display: flex;
|
|
2415
2422
|
flex-direction: column;
|
|
2423
|
+
overflow-x: hidden;
|
|
2424
|
+
overflow-y: auto;
|
|
2425
|
+
-webkit-overflow-scrolling: touch;
|
|
2426
|
+
min-width: 0;
|
|
2427
|
+
max-width: 100%;
|
|
2428
|
+
box-sizing: border-box;
|
|
2429
|
+
width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
|
|
2416
2430
|
padding: 0 $CAP_SPACE_16;
|
|
2417
2431
|
background-color: #ffffff;
|
|
2418
2432
|
margin-left: $CAP_SPACE_06;
|
|
@@ -2420,6 +2434,20 @@
|
|
|
2420
2434
|
border-bottom-left-radius: 2.6rem;
|
|
2421
2435
|
border-bottom-right-radius: 2.6rem;
|
|
2422
2436
|
|
|
2437
|
+
&.viber-message-container-carousel {
|
|
2438
|
+
padding-left: $CAP_SPACE_08;
|
|
2439
|
+
padding-right: $CAP_SPACE_08;
|
|
2440
|
+
width: calc(100% - #{$CAP_SPACE_04} - #{$CAP_SPACE_04});
|
|
2441
|
+
margin-left: $CAP_SPACE_04;
|
|
2442
|
+
margin-right: $CAP_SPACE_04;
|
|
2443
|
+
|
|
2444
|
+
> .ant-row,
|
|
2445
|
+
.ant-row.msg-container.viber-preview-carousel {
|
|
2446
|
+
margin-left: 0;
|
|
2447
|
+
margin-right: 0;
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2423
2451
|
// Brand name display (from TemplatePreview line 1136)
|
|
2424
2452
|
.viber-brand-name {
|
|
2425
2453
|
position: absolute;
|
|
@@ -2441,6 +2469,16 @@
|
|
|
2441
2469
|
flex-direction: row;
|
|
2442
2470
|
align-items: start;
|
|
2443
2471
|
|
|
2472
|
+
&.viber-preview-carousel {
|
|
2473
|
+
width: 100%;
|
|
2474
|
+
max-width: 100%;
|
|
2475
|
+
margin-left: 0;
|
|
2476
|
+
margin-right: 0;
|
|
2477
|
+
max-height: 100%;
|
|
2478
|
+
min-width: 0;
|
|
2479
|
+
box-sizing: border-box;
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2444
2482
|
// Account icon (from TemplatePreview line 1146-1160)
|
|
2445
2483
|
.viber-account-icon {
|
|
2446
2484
|
width: $CAP_SPACE_20;
|
|
@@ -2465,6 +2503,22 @@
|
|
|
2465
2503
|
border-radius: $CAP_SPACE_04;
|
|
2466
2504
|
padding: $CAP_SPACE_04;
|
|
2467
2505
|
|
|
2506
|
+
&.viber-message-pop-carousel {
|
|
2507
|
+
width: 100%;
|
|
2508
|
+
max-width: 100%;
|
|
2509
|
+
min-width: 0;
|
|
2510
|
+
left: 0;
|
|
2511
|
+
margin-top: 0;
|
|
2512
|
+
padding: 0;
|
|
2513
|
+
background: transparent;
|
|
2514
|
+
display: flex;
|
|
2515
|
+
flex-direction: column;
|
|
2516
|
+
align-items: flex-start;
|
|
2517
|
+
gap: $CAP_SPACE_06;
|
|
2518
|
+
overflow: hidden;
|
|
2519
|
+
box-sizing: border-box;
|
|
2520
|
+
}
|
|
2521
|
+
|
|
2468
2522
|
// Text Viber preview (from TemplatePreview line 1166-1174)
|
|
2469
2523
|
.viber-message-text {
|
|
2470
2524
|
margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
|
|
@@ -2536,6 +2590,85 @@
|
|
|
2536
2590
|
}
|
|
2537
2591
|
}
|
|
2538
2592
|
|
|
2593
|
+
.viber-carousel-preview {
|
|
2594
|
+
width: 100%;
|
|
2595
|
+
max-width: 100%;
|
|
2596
|
+
min-width: 0;
|
|
2597
|
+
display: flex;
|
|
2598
|
+
flex-direction: column;
|
|
2599
|
+
align-items: flex-start;
|
|
2600
|
+
gap: $CAP_SPACE_06;
|
|
2601
|
+
overflow: hidden;
|
|
2602
|
+
box-sizing: border-box;
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
.viber-carousel-message-pop,
|
|
2606
|
+
.viber-carousel-cards-pop {
|
|
2607
|
+
width: 100%;
|
|
2608
|
+
max-width: 100%;
|
|
2609
|
+
min-width: 0;
|
|
2610
|
+
background: $CAP_G08;
|
|
2611
|
+
border-radius: $CAP_SPACE_06;
|
|
2612
|
+
padding: $CAP_SPACE_08;
|
|
2613
|
+
box-sizing: border-box;
|
|
2614
|
+
}
|
|
2615
|
+
|
|
2616
|
+
.viber-carousel-message-pop {
|
|
2617
|
+
margin-top: 0;
|
|
2618
|
+
width: 85%;
|
|
2619
|
+
border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
|
|
2620
|
+
display: flex;
|
|
2621
|
+
flex-direction: column;
|
|
2622
|
+
overflow: hidden;
|
|
2623
|
+
}
|
|
2624
|
+
|
|
2625
|
+
.viber-carousel-cards-pop {
|
|
2626
|
+
margin-top: 0;
|
|
2627
|
+
width: 100%;
|
|
2628
|
+
background: transparent;
|
|
2629
|
+
border: none;
|
|
2630
|
+
border-radius: 0;
|
|
2631
|
+
padding: 0;
|
|
2632
|
+
overflow: hidden;
|
|
2633
|
+
}
|
|
2634
|
+
|
|
2635
|
+
.viber-carousel-message-box {
|
|
2636
|
+
width: 100%;
|
|
2637
|
+
min-height: 2.25rem;
|
|
2638
|
+
height: auto;
|
|
2639
|
+
border-radius: $CAP_SPACE_04;
|
|
2640
|
+
background: transparent;
|
|
2641
|
+
padding: 0 $CAP_SPACE_08;
|
|
2642
|
+
display: flex;
|
|
2643
|
+
align-items: center;
|
|
2644
|
+
}
|
|
2645
|
+
|
|
2646
|
+
.viber-carousel-message-box-text {
|
|
2647
|
+
color: $CAP_G01;
|
|
2648
|
+
margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
|
|
2649
|
+
white-space: normal;
|
|
2650
|
+
word-break: break-word;
|
|
2651
|
+
overflow-wrap: break-word;
|
|
2652
|
+
overflow: hidden;
|
|
2653
|
+
max-width: 100%;
|
|
2654
|
+
box-sizing: border-box;
|
|
2655
|
+
}
|
|
2656
|
+
|
|
2657
|
+
.viber-carousel-message-box-placeholder {
|
|
2658
|
+
width: 100%;
|
|
2659
|
+
height: 0.875rem;
|
|
2660
|
+
border-radius: $CAP_SPACE_04;
|
|
2661
|
+
background: $CAP_G07;
|
|
2662
|
+
}
|
|
2663
|
+
|
|
2664
|
+
.viber-carousel-message-timestamp,
|
|
2665
|
+
.viber-carousel-cards-timestamp {
|
|
2666
|
+
display: block;
|
|
2667
|
+
text-align: right;
|
|
2668
|
+
margin-top: $CAP_SPACE_06;
|
|
2669
|
+
color: $CAP_G04;
|
|
2670
|
+
}
|
|
2671
|
+
|
|
2539
2672
|
.empty-placeholder {
|
|
2540
2673
|
height: $CAP_SPACE_08;
|
|
2541
2674
|
}
|
|
@@ -2549,6 +2682,11 @@
|
|
|
2549
2682
|
.viber-message-container-ios {
|
|
2550
2683
|
margin-left: 1rem;
|
|
2551
2684
|
margin-right: 1rem;
|
|
2685
|
+
|
|
2686
|
+
&.viber-message-container-carousel {
|
|
2687
|
+
margin-left: $CAP_SPACE_04;
|
|
2688
|
+
margin-right: $CAP_SPACE_04;
|
|
2689
|
+
}
|
|
2552
2690
|
}
|
|
2553
2691
|
}
|
|
2554
2692
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
// Shared Viber carousel card row (Test & Preview device preview)
|
|
2
|
+
.viber-carousel-preview {
|
|
3
|
+
.scroll {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: row;
|
|
6
|
+
flex-wrap: nowrap;
|
|
7
|
+
align-items: stretch;
|
|
8
|
+
width: 100%;
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
min-width: 0;
|
|
11
|
+
overflow-x: auto;
|
|
12
|
+
overflow-y: hidden;
|
|
13
|
+
padding-right: $CAP_SPACE_12;
|
|
14
|
+
scrollbar-width: none;
|
|
15
|
+
-webkit-overflow-scrolling: touch;
|
|
16
|
+
|
|
17
|
+
&::-webkit-scrollbar {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.card {
|
|
22
|
+
flex: 0 0 68%;
|
|
23
|
+
min-width: 80%;
|
|
24
|
+
margin-right: $CAP_SPACE_08;
|
|
25
|
+
background: $CAP_G09;
|
|
26
|
+
border: 1px solid $CAP_G07;
|
|
27
|
+
border-radius: $CAP_SPACE_12;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
align-self: stretch;
|
|
32
|
+
|
|
33
|
+
&:last-child {
|
|
34
|
+
margin-right: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.image {
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 10rem;
|
|
40
|
+
object-fit: cover;
|
|
41
|
+
border-radius: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.image-placeholder {
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 10rem;
|
|
47
|
+
border-radius: 0;
|
|
48
|
+
background: $CAP_G07;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.card-body {
|
|
52
|
+
flex: 1;
|
|
53
|
+
padding: $CAP_SPACE_08;
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
min-height: 0;
|
|
57
|
+
|
|
58
|
+
.text-wrap {
|
|
59
|
+
flex-shrink: 0;
|
|
60
|
+
width: 100%;
|
|
61
|
+
|
|
62
|
+
&--1-line {
|
|
63
|
+
min-height: 1.3em;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&--2-line {
|
|
67
|
+
min-height: 2.6em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.text-inner {
|
|
71
|
+
width: 100%;
|
|
72
|
+
|
|
73
|
+
.text {
|
|
74
|
+
color: $CAP_G01;
|
|
75
|
+
line-height: 1.3;
|
|
76
|
+
white-space: normal;
|
|
77
|
+
word-break: break-word;
|
|
78
|
+
display: block;
|
|
79
|
+
width: 100%;
|
|
80
|
+
margin: 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.text-placeholder {
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 0.875rem;
|
|
87
|
+
border-radius: $CAP_SPACE_04;
|
|
88
|
+
background: $CAP_G07;
|
|
89
|
+
min-height: 0.875rem;
|
|
90
|
+
display: block;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.buttons {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
gap: $CAP_SPACE_06;
|
|
98
|
+
width: 100%;
|
|
99
|
+
flex-shrink: 0;
|
|
100
|
+
|
|
101
|
+
.button {
|
|
102
|
+
color: $CAP_WHITE;
|
|
103
|
+
background: $CAP_PURPLE01;
|
|
104
|
+
border-radius: $CAP_SPACE_12;
|
|
105
|
+
text-align: center;
|
|
106
|
+
width: 100%;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
min-height: 1.5rem;
|
|
111
|
+
padding: $CAP_SPACE_06 $CAP_SPACE_08;
|
|
112
|
+
white-space: normal;
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.button-placeholder {
|
|
117
|
+
visibility: hidden;
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
padding: 0;
|
|
120
|
+
background: transparent;
|
|
121
|
+
border: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.button-secondary {
|
|
125
|
+
color: $CAP_PURPLE01;
|
|
126
|
+
background: transparent;
|
|
127
|
+
border: none;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|