@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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @sensiblestats/widget-react
|
|
2
2
|
|
|
3
|
+
## 0.29.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 4eed68b: Fix the post-match "Match stats" card rendering each team's stats under the opposite team. The row values are club-first, but the card was always drawing the club value on the left while the result card above renders home-left/away-right — so when the club played away (e.g. Liverpool at Ipswich) the club's stats appeared under the home team. The card now orients by venue via a new `clubIsHome` field, matching the result card.
|
|
8
|
+
- Updated dependencies [4eed68b]
|
|
9
|
+
- @sensiblestats/widget-sdk@0.25.1
|
|
10
|
+
|
|
11
|
+
## 0.29.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 33dacf8: Restore the live club dashboard cards to the approved mockup's sizing and detail: a larger 36px scoreline, 38px crests with a soft drop shadow, 15px team names and stat values, the timeline's football-style goal mark (was a plain dot), and the momentum wave's full 56px height (was vertically squashed at 50px). Also adds a `club-fandash-live` devserver scenario so the live phase can be previewed without a live match.
|
|
16
|
+
|
|
3
17
|
## 0.29.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
package/dist/index.cjs
CHANGED
|
@@ -1727,11 +1727,15 @@ var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
|
1727
1727
|
function PostMatchStatsCard({ card, onTap }) {
|
|
1728
1728
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-postmatch-stats", onClick: () => onTap(card), children: [
|
|
1729
1729
|
card.title ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
|
|
1730
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ss-w-fandash-postmatch-stat-rows", children: card.data.rows.map((r, i) =>
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.
|
|
1734
|
-
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ss-w-fandash-postmatch-stat-rows", children: card.data.rows.map((r, i) => {
|
|
1731
|
+
const leftValue = card.data.clubIsHome ? r.clubValue : r.oppValue;
|
|
1732
|
+
const rightValue = card.data.clubIsHome ? r.oppValue : r.clubValue;
|
|
1733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-stat-row", children: [
|
|
1734
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value", children: leftValue }),
|
|
1735
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-label", children: r.label }),
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value", children: rightValue })
|
|
1737
|
+
] }, `${r.label}-${i}`);
|
|
1738
|
+
}) }),
|
|
1735
1739
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
|
|
1736
1740
|
] });
|
|
1737
1741
|
}
|
|
@@ -2824,24 +2828,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2824
2828
|
tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
|
|
2825
2829
|
cards reuse them. */
|
|
2826
2830
|
.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }
|
|
2827
|
-
.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size:
|
|
2831
|
+
.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; }
|
|
2828
2832
|
.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; }
|
|
2829
2833
|
@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
|
|
2830
2834
|
@media (prefers-reduced-motion: reduce) {
|
|
2831
2835
|
.ss-w-fandash-live-dot { animation: none; }
|
|
2832
2836
|
}
|
|
2833
|
-
.ss-w-fandash-live-minute { flex: none; font-size:
|
|
2837
|
+
.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2834
2838
|
.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; }
|
|
2835
|
-
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap:
|
|
2836
|
-
.ss-w-fandash-live-side { display: flex; align-items: center; gap:
|
|
2839
|
+
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
|
|
2840
|
+
.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
2837
2841
|
.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
|
|
2838
|
-
.ss-w-fandash-live-crest { width:
|
|
2842
|
+
.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); }
|
|
2839
2843
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
|
|
2840
2844
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }
|
|
2841
|
-
.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:
|
|
2842
|
-
.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size:
|
|
2843
|
-
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0
|
|
2844
|
-
.ss-w-fandash-live-scorers { margin-top:
|
|
2845
|
+
.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); }
|
|
2846
|
+
.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); }
|
|
2847
|
+
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
|
|
2848
|
+
.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; }
|
|
2845
2849
|
.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
|
|
2846
2850
|
|
|
2847
2851
|
/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
|
|
@@ -2850,18 +2854,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2850
2854
|
.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
|
|
2851
2855
|
.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); }
|
|
2852
2856
|
.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }
|
|
2853
|
-
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap:
|
|
2857
|
+
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
|
|
2854
2858
|
.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
|
|
2855
2859
|
.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }
|
|
2856
2860
|
.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2857
2861
|
.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
|
|
2858
2862
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }
|
|
2859
|
-
.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width:
|
|
2863
|
+
.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; }
|
|
2860
2864
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }
|
|
2861
|
-
.ss-w-fandash-live-tl-ico { width:
|
|
2865
|
+
.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
|
|
2862
2866
|
.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }
|
|
2863
|
-
.ss-w-fandash-live-tl-ball { width:
|
|
2864
|
-
.ss-w-fandash-live-tl-card { width:
|
|
2867
|
+
.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); }
|
|
2868
|
+
.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
|
|
2865
2869
|
.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
|
|
2866
2870
|
.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
|
|
2867
2871
|
.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }
|
|
@@ -2873,21 +2877,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2873
2877
|
bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
|
|
2874
2878
|
No side signal reaches this card, so the club is always the home token and the opponent is
|
|
2875
2879
|
always the away token -- see LiveStatsCard.tsx. */
|
|
2876
|
-
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap:
|
|
2877
|
-
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap:
|
|
2880
|
+
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
|
|
2881
|
+
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
|
|
2878
2882
|
.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
|
|
2879
|
-
.ss-w-fandash-live-stat-value { font-size:
|
|
2883
|
+
.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2880
2884
|
.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
|
|
2881
2885
|
.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }
|
|
2882
|
-
.ss-w-fandash-live-stat-label { font-size:
|
|
2883
|
-
.ss-w-fandash-live-bar { position: relative; height:
|
|
2886
|
+
.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; }
|
|
2887
|
+
.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
|
|
2884
2888
|
.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
|
|
2885
2889
|
.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
|
|
2886
2890
|
|
|
2887
2891
|
.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
|
|
2888
2892
|
.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
|
|
2889
2893
|
.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
|
|
2890
|
-
.ss-w-fandash-live-mom-svg { width: 100%; height:
|
|
2894
|
+
.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
|
|
2891
2895
|
.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
|
|
2892
2896
|
.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
|
|
2893
2897
|
.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
|