@sensiblestats/widget-react 0.29.0 → 0.29.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/CHANGELOG.md +6 -0
- package/dist/index.cjs +20 -20
- 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 +20 -20
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -20
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @sensiblestats/widget-react
|
|
2
2
|
|
|
3
|
+
## 0.29.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 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.
|
|
8
|
+
|
|
3
9
|
## 0.29.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/dist/index.cjs
CHANGED
|
@@ -2824,24 +2824,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2824
2824
|
tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
|
|
2825
2825
|
cards reuse them. */
|
|
2826
2826
|
.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:
|
|
2827
|
+
.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
2828
|
.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
2829
|
@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
|
|
2830
2830
|
@media (prefers-reduced-motion: reduce) {
|
|
2831
2831
|
.ss-w-fandash-live-dot { animation: none; }
|
|
2832
2832
|
}
|
|
2833
|
-
.ss-w-fandash-live-minute { flex: none; font-size:
|
|
2833
|
+
.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
2834
|
.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:
|
|
2835
|
+
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
|
|
2836
|
+
.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
2837
2837
|
.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
|
|
2838
|
-
.ss-w-fandash-live-crest { width:
|
|
2838
|
+
.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
2839
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
|
|
2840
2840
|
.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:
|
|
2841
|
+
.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); }
|
|
2842
|
+
.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); }
|
|
2843
|
+
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
|
|
2844
|
+
.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
2845
|
.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
|
|
2846
2846
|
|
|
2847
2847
|
/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
|
|
@@ -2850,18 +2850,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2850
2850
|
.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
|
|
2851
2851
|
.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
2852
|
.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:
|
|
2853
|
+
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
|
|
2854
2854
|
.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
|
|
2855
2855
|
.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
2856
|
.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2857
2857
|
.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
|
|
2858
2858
|
.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:
|
|
2859
|
+
.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
2860
|
.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:
|
|
2861
|
+
.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
|
|
2862
2862
|
.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:
|
|
2863
|
+
.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); }
|
|
2864
|
+
.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
|
|
2865
2865
|
.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
|
|
2866
2866
|
.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
|
|
2867
2867
|
.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 +2873,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2873
2873
|
bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
|
|
2874
2874
|
No side signal reaches this card, so the club is always the home token and the opponent is
|
|
2875
2875
|
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:
|
|
2876
|
+
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
|
|
2877
|
+
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
|
|
2878
2878
|
.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:
|
|
2879
|
+
.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2880
2880
|
.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
|
|
2881
2881
|
.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:
|
|
2882
|
+
.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; }
|
|
2883
|
+
.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
|
|
2884
2884
|
.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
|
|
2885
2885
|
.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
|
|
2886
2886
|
|
|
2887
2887
|
.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
|
|
2888
2888
|
.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
|
|
2889
2889
|
.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:
|
|
2890
|
+
.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
|
|
2891
2891
|
.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
|
|
2892
2892
|
.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
|
|
2893
2893
|
.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
|