kupos-ui-components-lib 9.11.5 → 9.11.6
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/dist/components/ServiceItem/ServiceItemDesktop.js +2 -2
- package/dist/styles.css +11 -0
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +5 -5
- package/dist/utils/CommonService.js +1 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -2
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +8 -5
- package/src/utils/CommonService.ts +1 -1
|
@@ -333,10 +333,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
333
333
|
? {
|
|
334
334
|
borderLeft: isSoldOut
|
|
335
335
|
? ""
|
|
336
|
-
: `3px solid ${colors.
|
|
336
|
+
: `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
|
|
337
337
|
borderRight: isSoldOut
|
|
338
338
|
? ""
|
|
339
|
-
: `3px solid ${colors.
|
|
339
|
+
: `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
|
|
340
340
|
borderRadius: "0 0 18px 18px",
|
|
341
341
|
boxSizing: "border-box",
|
|
342
342
|
}
|
package/dist/styles.css
CHANGED
|
@@ -678,6 +678,9 @@
|
|
|
678
678
|
.overflow-hidden {
|
|
679
679
|
overflow: hidden;
|
|
680
680
|
}
|
|
681
|
+
.overflow-x-auto {
|
|
682
|
+
overflow-x: auto;
|
|
683
|
+
}
|
|
681
684
|
.overflow-y-hidden {
|
|
682
685
|
overflow-y: hidden;
|
|
683
686
|
}
|
|
@@ -1206,10 +1209,18 @@
|
|
|
1206
1209
|
outline-style: var(--tw-outline-style);
|
|
1207
1210
|
outline-width: 1px;
|
|
1208
1211
|
}
|
|
1212
|
+
.brightness-0 {
|
|
1213
|
+
--tw-brightness: brightness(0%);
|
|
1214
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1215
|
+
}
|
|
1209
1216
|
.grayscale {
|
|
1210
1217
|
--tw-grayscale: grayscale(100%);
|
|
1211
1218
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1212
1219
|
}
|
|
1220
|
+
.invert {
|
|
1221
|
+
--tw-invert: invert(100%);
|
|
1222
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1223
|
+
}
|
|
1213
1224
|
.filter {
|
|
1214
1225
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1215
1226
|
}
|
|
@@ -253,7 +253,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
253
253
|
React.createElement("span", { className: "text-[11px]", style: {
|
|
254
254
|
lineHeight: 1.3,
|
|
255
255
|
} }, "Tu compra est\u00E1 100% asegurada.")))),
|
|
256
|
-
React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
|
|
256
|
+
React.createElement("div", { className: "min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
|
|
257
257
|
React.createElement("div", { className: "text-center" },
|
|
258
258
|
React.createElement("div", { className: "bold-text text-[13px]" },
|
|
259
259
|
servicesInActiveSlot.length > 0
|
|
@@ -261,8 +261,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
261
261
|
: operatorsCompetingCount,
|
|
262
262
|
" ",
|
|
263
263
|
"operadores compitiendo por tu compra")),
|
|
264
|
-
React.createElement("div", { className: "grid
|
|
265
|
-
gridTemplateColumns: `repeat(${Math.min(servicesInActiveSlot.length || operators.length, 3)}, 1fr)`,
|
|
264
|
+
React.createElement("div", { className: "grid items-stretch gap-[14px]", style: {
|
|
265
|
+
gridTemplateColumns: `repeat(${Math.min(servicesInActiveSlot.length || operators.length, 3)}, minmax(80px, 1fr))`,
|
|
266
266
|
} }, (servicesInActiveSlot.length > 0
|
|
267
267
|
? servicesInActiveSlot.slice(0, 3).map((s) => ({
|
|
268
268
|
logo: s.operator_logo_url,
|
|
@@ -282,8 +282,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
282
282
|
e.currentTarget.src =
|
|
283
283
|
((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
|
|
284
284
|
"/images/service-list/bus-icon.svg";
|
|
285
|
-
}, className: `h-[24px] max-w-full object-contain
|
|
286
|
-
React.createElement("span", { className: "text-[11px] truncate
|
|
285
|
+
}, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
286
|
+
React.createElement("span", { className: "text-[11px] truncate w-full text-center text-[white] overflow-hidden" }, op.name),
|
|
287
287
|
React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
|
|
288
288
|
React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
|
|
289
289
|
React.createElement("span", { className: "text-[10px] mt-[6px] text-[white]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
|
|
@@ -360,7 +360,7 @@ const commonService = {
|
|
|
360
360
|
let remaining = Math.max(0, Math.floor(countdownSeconds));
|
|
361
361
|
const formatTime = (totalSeconds) => {
|
|
362
362
|
if (totalSeconds <= 0)
|
|
363
|
-
return "
|
|
363
|
+
return "00:00";
|
|
364
364
|
const h = Math.floor(totalSeconds / 3600);
|
|
365
365
|
const m = Math.floor((totalSeconds % 3600) / 60);
|
|
366
366
|
const s = totalSeconds % 60;
|
package/package.json
CHANGED
|
@@ -695,10 +695,10 @@ function ServiceItemPB({
|
|
|
695
695
|
? {
|
|
696
696
|
borderLeft: isSoldOut
|
|
697
697
|
? ""
|
|
698
|
-
: `3px solid ${colors.
|
|
698
|
+
: `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
|
|
699
699
|
borderRight: isSoldOut
|
|
700
700
|
? ""
|
|
701
|
-
: `3px solid ${colors.
|
|
701
|
+
: `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
|
|
702
702
|
borderRadius: "0 0 18px 18px",
|
|
703
703
|
boxSizing: "border-box",
|
|
704
704
|
}
|
|
@@ -423,7 +423,7 @@ const FeatureServiceUi = ({
|
|
|
423
423
|
</div>
|
|
424
424
|
|
|
425
425
|
{/* MIDDLE: competing operators + viewers */}
|
|
426
|
-
<div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
|
|
426
|
+
<div className="min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
|
|
427
427
|
<div className="text-center">
|
|
428
428
|
<div className="bold-text text-[13px]">
|
|
429
429
|
{servicesInActiveSlot.length > 0
|
|
@@ -434,12 +434,12 @@ const FeatureServiceUi = ({
|
|
|
434
434
|
</div>
|
|
435
435
|
|
|
436
436
|
<div
|
|
437
|
-
className="grid
|
|
437
|
+
className="grid items-stretch gap-[14px]"
|
|
438
438
|
style={{
|
|
439
439
|
gridTemplateColumns: `repeat(${Math.min(
|
|
440
440
|
servicesInActiveSlot.length || operators.length,
|
|
441
441
|
3,
|
|
442
|
-
)}, 1fr)`,
|
|
442
|
+
)}, minmax(80px, 1fr))`,
|
|
443
443
|
}}
|
|
444
444
|
>
|
|
445
445
|
{(servicesInActiveSlot.length > 0
|
|
@@ -470,11 +470,14 @@ const FeatureServiceUi = ({
|
|
|
470
470
|
serviceItem?.operator_details?.[0] ||
|
|
471
471
|
"/images/service-list/bus-icon.svg";
|
|
472
472
|
}}
|
|
473
|
-
className={`h-[24px] max-w-full object-contain
|
|
473
|
+
className={`h-[24px] max-w-full object-contain ${
|
|
474
474
|
isSoldOut ? "grayscale" : ""
|
|
475
475
|
}`}
|
|
476
|
+
// className={`h-[24px] max-w-full object-contain brightness-0 invert ${
|
|
477
|
+
// isSoldOut ? "grayscale" : ""
|
|
478
|
+
// }`}
|
|
476
479
|
/>
|
|
477
|
-
<span className="text-[11px] truncate
|
|
480
|
+
<span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
|
|
478
481
|
{op.name}
|
|
479
482
|
</span>
|
|
480
483
|
<div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
|
|
@@ -413,7 +413,7 @@ const commonService = {
|
|
|
413
413
|
let remaining = Math.max(0, Math.floor(countdownSeconds));
|
|
414
414
|
|
|
415
415
|
const formatTime = (totalSeconds: number) => {
|
|
416
|
-
if (totalSeconds <= 0) return "
|
|
416
|
+
if (totalSeconds <= 0) return "00:00";
|
|
417
417
|
const h = Math.floor(totalSeconds / 3600);
|
|
418
418
|
const m = Math.floor((totalSeconds % 3600) / 60);
|
|
419
419
|
const s = totalSeconds % 60;
|