@sensiblestats/widget-react 0.29.0 → 0.29.2
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/CHANGELOG.md +14 -0
- package/dist/index.cjs +29 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +29 -25
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -20
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1690,11 +1690,15 @@ import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
|
1690
1690
|
function PostMatchStatsCard({ card, onTap }) {
|
|
1691
1691
|
return /* @__PURE__ */ jsxs23("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-postmatch-stats", onClick: () => onTap(card), children: [
|
|
1692
1692
|
card.title ? /* @__PURE__ */ jsx27("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
|
|
1693
|
-
/* @__PURE__ */ jsx27("div", { className: "ss-w-fandash-postmatch-stat-rows", children: card.data.rows.map((r, i) =>
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
|
|
1693
|
+
/* @__PURE__ */ jsx27("div", { className: "ss-w-fandash-postmatch-stat-rows", children: card.data.rows.map((r, i) => {
|
|
1694
|
+
const leftValue = card.data.clubIsHome ? r.clubValue : r.oppValue;
|
|
1695
|
+
const rightValue = card.data.clubIsHome ? r.oppValue : r.clubValue;
|
|
1696
|
+
return /* @__PURE__ */ jsxs23("div", { className: "ss-w-fandash-postmatch-stat-row", children: [
|
|
1697
|
+
/* @__PURE__ */ jsx27("span", { className: "ss-w-fandash-postmatch-stat-value", children: leftValue }),
|
|
1698
|
+
/* @__PURE__ */ jsx27("span", { className: "ss-w-fandash-postmatch-stat-label", children: r.label }),
|
|
1699
|
+
/* @__PURE__ */ jsx27("span", { className: "ss-w-fandash-postmatch-stat-value", children: rightValue })
|
|
1700
|
+
] }, `${r.label}-${i}`);
|
|
1701
|
+
}) }),
|
|
1698
1702
|
/* @__PURE__ */ jsx27("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
|
|
1699
1703
|
] });
|
|
1700
1704
|
}
|
|
@@ -2787,24 +2791,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2787
2791
|
tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
|
|
2788
2792
|
cards reuse them. */
|
|
2789
2793
|
.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }
|
|
2790
|
-
.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size:
|
|
2794
|
+
.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }
|
|
2791
2795
|
.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }
|
|
2792
2796
|
@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
|
|
2793
2797
|
@media (prefers-reduced-motion: reduce) {
|
|
2794
2798
|
.ss-w-fandash-live-dot { animation: none; }
|
|
2795
2799
|
}
|
|
2796
|
-
.ss-w-fandash-live-minute { flex: none; font-size:
|
|
2800
|
+
.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2797
2801
|
.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2798
|
-
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap:
|
|
2799
|
-
.ss-w-fandash-live-side { display: flex; align-items: center; gap:
|
|
2802
|
+
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
|
|
2803
|
+
.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
2800
2804
|
.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
|
|
2801
|
-
.ss-w-fandash-live-crest { width:
|
|
2805
|
+
.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
|
|
2802
2806
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
|
|
2803
2807
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }
|
|
2804
|
-
.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:
|
|
2805
|
-
.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size:
|
|
2806
|
-
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0
|
|
2807
|
-
.ss-w-fandash-live-scorers { margin-top:
|
|
2808
|
+
.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }
|
|
2809
|
+
.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
|
|
2810
|
+
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
|
|
2811
|
+
.ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
|
|
2808
2812
|
.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
|
|
2809
2813
|
|
|
2810
2814
|
/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
|
|
@@ -2813,18 +2817,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2813
2817
|
.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
|
|
2814
2818
|
.ss-w-fandash-live-tl::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }
|
|
2815
2819
|
.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }
|
|
2816
|
-
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap:
|
|
2820
|
+
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
|
|
2817
2821
|
.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
|
|
2818
2822
|
.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }
|
|
2819
2823
|
.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2820
2824
|
.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
|
|
2821
2825
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }
|
|
2822
|
-
.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width:
|
|
2826
|
+
.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }
|
|
2823
2827
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }
|
|
2824
|
-
.ss-w-fandash-live-tl-ico { width:
|
|
2828
|
+
.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
|
|
2825
2829
|
.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }
|
|
2826
|
-
.ss-w-fandash-live-tl-ball { width:
|
|
2827
|
-
.ss-w-fandash-live-tl-card { width:
|
|
2830
|
+
.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
|
|
2831
|
+
.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
|
|
2828
2832
|
.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
|
|
2829
2833
|
.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
|
|
2830
2834
|
.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }
|
|
@@ -2836,21 +2840,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2836
2840
|
bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
|
|
2837
2841
|
No side signal reaches this card, so the club is always the home token and the opponent is
|
|
2838
2842
|
always the away token -- see LiveStatsCard.tsx. */
|
|
2839
|
-
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap:
|
|
2840
|
-
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap:
|
|
2843
|
+
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
|
|
2844
|
+
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
|
|
2841
2845
|
.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
|
|
2842
|
-
.ss-w-fandash-live-stat-value { font-size:
|
|
2846
|
+
.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2843
2847
|
.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
|
|
2844
2848
|
.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }
|
|
2845
|
-
.ss-w-fandash-live-stat-label { font-size:
|
|
2846
|
-
.ss-w-fandash-live-bar { position: relative; height:
|
|
2849
|
+
.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
|
|
2850
|
+
.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
|
|
2847
2851
|
.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
|
|
2848
2852
|
.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
|
|
2849
2853
|
|
|
2850
2854
|
.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
|
|
2851
2855
|
.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
|
|
2852
2856
|
.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
|
|
2853
|
-
.ss-w-fandash-live-mom-svg { width: 100%; height:
|
|
2857
|
+
.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
|
|
2854
2858
|
.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
|
|
2855
2859
|
.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
|
|
2856
2860
|
.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
|