Skip to content

Commit b5883bd

Browse files
rickstaaJ00MZ
authored andcommitted
fix: fixes card overflow problem anuraghazra#2452 (anuraghazra#2460)
This commit makes sure that the card width is formatted correctly.
1 parent 5fdf0a3 commit b5883bd

File tree

2 files changed

+37
-19
lines changed

2 files changed

+37
-19
lines changed

src/cards/stats-card.js

+25-11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ import {
1212
import { getStyles } from "../getStyles.js";
1313
import { statCardLocales } from "../translations.js";
1414

15+
const CARD_MIN_WIDTH = 287;
16+
const CARD_DEFAULT_WIDTH = 287;
17+
const RANK_CARD_MIN_WIDTH = 420;
18+
const RANK_CARD_DEFAULT_WIDTH = 450;
19+
1520
/**
1621
* Create a stats card text item.
1722
*
@@ -218,11 +223,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
218223
When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
219224
Numbers are picked by looking at existing dimensions on production.
220225
*/
221-
const iconWidth = show_icons ? 16 : 0;
222-
const minCardWidth = hide_rank
223-
? clampValue(50 /* padding */ + calculateTextWidth() * 2, 270, Infinity)
224-
: 340 + iconWidth;
225-
const defaultCardWidth = hide_rank ? 270 : 495;
226+
const iconWidth = show_icons ? 16 + /* padding */ 1 : 0;
227+
const minCardWidth =
228+
(hide_rank
229+
? clampValue(
230+
50 /* padding */ + calculateTextWidth() * 2,
231+
CARD_MIN_WIDTH,
232+
Infinity,
233+
)
234+
: RANK_CARD_MIN_WIDTH) + iconWidth;
235+
const defaultCardWidth =
236+
(hide_rank ? CARD_DEFAULT_WIDTH : RANK_CARD_DEFAULT_WIDTH) + iconWidth;
226237
let width = isNaN(card_width) ? defaultCardWidth : card_width;
227238
if (width < minCardWidth) {
228239
width = minCardWidth;
@@ -251,18 +262,21 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
251262

252263
/**
253264
* Calculates the right rank circle translation values such that the rank circle
254-
* keeps respecting the padding.
265+
* keeps respecting the following padding:
255266
*
256-
* width > 450: The default left padding of 50 px will be used.
257-
* width < 450: The left and right padding will shrink equally.
267+
* width > RANK_CARD_DEFAULT_WIDTH: The default right padding of 70 px will be used.
268+
* width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
269+
* equally from a certain minimum at RANK_CARD_MIN_WIDTH.
258270
*
259271
* @returns {number} - Rank circle translation value.
260272
*/
261273
const calculateRankXTranslation = () => {
262-
if (width < 450) {
263-
return width - 95 + (45 * (450 - 340)) / 110;
274+
const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
275+
if (width > RANK_CARD_DEFAULT_WIDTH) {
276+
const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
277+
return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
264278
} else {
265-
return width - 95;
279+
return minXTranslation + (width - minCardWidth) / 2;
266280
}
267281
};
268282

tests/renderStatsCard.test.js

+12-8
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,17 @@ describe("Test renderStatsCard", () => {
7878

7979
it("should render with custom width set", () => {
8080
document.body.innerHTML = renderStatsCard(stats);
81-
expect(document.querySelector("svg")).toHaveAttribute("width", "495");
81+
expect(document.querySelector("svg")).toHaveAttribute("width", "450");
8282

83-
document.body.innerHTML = renderStatsCard(stats, { card_width: 400 });
84-
expect(document.querySelector("svg")).toHaveAttribute("width", "400");
83+
document.body.innerHTML = renderStatsCard(stats, { card_width: 500 });
84+
expect(document.querySelector("svg")).toHaveAttribute("width", "500");
8585
});
8686

8787
it("should render with custom width set and limit minimum width", () => {
8888
document.body.innerHTML = renderStatsCard(stats, { card_width: 1 });
89-
expect(document.querySelector("svg")).toHaveAttribute("width", "340");
89+
expect(document.querySelector("svg")).toHaveAttribute("width", "420");
9090

91+
// Test default minimum card width without rank circle.
9192
document.body.innerHTML = renderStatsCard(stats, {
9293
card_width: 1,
9394
hide_rank: true,
@@ -97,29 +98,32 @@ describe("Test renderStatsCard", () => {
9798
"305.81250000000006",
9899
);
99100

101+
// Test minimum card width with rank and icons.
100102
document.body.innerHTML = renderStatsCard(stats, {
101103
card_width: 1,
102104
hide_rank: true,
103105
show_icons: true,
104106
});
105107
expect(document.querySelector("svg")).toHaveAttribute(
106108
"width",
107-
"305.81250000000006",
109+
"322.81250000000006",
108110
);
109111

112+
// Test minimum card width with icons but without rank.
110113
document.body.innerHTML = renderStatsCard(stats, {
111114
card_width: 1,
112115
hide_rank: false,
113116
show_icons: true,
114117
});
115-
expect(document.querySelector("svg")).toHaveAttribute("width", "356");
118+
expect(document.querySelector("svg")).toHaveAttribute("width", "437");
116119

120+
// Test minimum card width without icons or rank.
117121
document.body.innerHTML = renderStatsCard(stats, {
118122
card_width: 1,
119123
hide_rank: false,
120124
show_icons: false,
121125
});
122-
expect(document.querySelector("svg")).toHaveAttribute("width", "340");
126+
expect(document.querySelector("svg")).toHaveAttribute("width", "420");
123127
});
124128

125129
it("should render default colors properly", () => {
@@ -312,7 +316,7 @@ describe("Test renderStatsCard", () => {
312316

313317
expect(
314318
document.body.getElementsByTagName("svg")[0].getAttribute("width"),
315-
).toBe("270");
319+
).toBe("287");
316320
});
317321

318322
it("should render translations", () => {

0 commit comments

Comments
 (0)