Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixes card overflow problem #2452 #2460

Merged
merged 1 commit into from
Jan 24, 2023
Merged

fix: fixes card overflow problem #2452 #2460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions src/cards/stats-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
import { getStyles } from "../getStyles.js";
import { statCardLocales } from "../translations.js";

const CARD_MIN_WIDTH = 287;
const CARD_DEFAULT_WIDTH = 287;
const RANK_CARD_MIN_WIDTH = 420;
const RANK_CARD_DEFAULT_WIDTH = 450;
Comment on lines +15 to +18
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean 🤌


/**
* Create a stats card text item.
*
Expand Down Expand Up @@ -218,11 +223,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
Numbers are picked by looking at existing dimensions on production.
*/
const iconWidth = show_icons ? 16 : 0;
const minCardWidth = hide_rank
? clampValue(50 /* padding */ + calculateTextWidth() * 2, 270, Infinity)
: 340 + iconWidth;
const defaultCardWidth = hide_rank ? 270 : 495;
const iconWidth = show_icons ? 16 + /* padding */ 1 : 0;
const minCardWidth =
(hide_rank
? clampValue(
50 /* padding */ + calculateTextWidth() * 2,
CARD_MIN_WIDTH,
Infinity,
)
: RANK_CARD_MIN_WIDTH) + iconWidth;
const defaultCardWidth =
(hide_rank ? CARD_DEFAULT_WIDTH : RANK_CARD_DEFAULT_WIDTH) + iconWidth;
let width = isNaN(card_width) ? defaultCardWidth : card_width;
if (width < minCardWidth) {
width = minCardWidth;
Expand Down Expand Up @@ -251,18 +262,21 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {

/**
* Calculates the right rank circle translation values such that the rank circle
* keeps respecting the padding.
* keeps respecting the following padding:
*
* width > 450: The default left padding of 50 px will be used.
* width < 450: The left and right padding will shrink equally.
* width > RANK_CARD_DEFAULT_WIDTH: The default right padding of 70 px will be used.
* width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
* equally from a certain minimum at RANK_CARD_MIN_WIDTH.
*
* @returns {number} - Rank circle translation value.
*/
const calculateRankXTranslation = () => {
if (width < 450) {
return width - 95 + (45 * (450 - 340)) / 110;
const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
if (width > RANK_CARD_DEFAULT_WIDTH) {
const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
} else {
return width - 95;
return minXTranslation + (width - minCardWidth) / 2;
}
};

Expand Down
20 changes: 12 additions & 8 deletions tests/renderStatsCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,17 @@ describe("Test renderStatsCard", () => {

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

document.body.innerHTML = renderStatsCard(stats, { card_width: 400 });
expect(document.querySelector("svg")).toHaveAttribute("width", "400");
document.body.innerHTML = renderStatsCard(stats, { card_width: 500 });
expect(document.querySelector("svg")).toHaveAttribute("width", "500");
});

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

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

// Test minimum card width with rank and icons.
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: true,
show_icons: true,
});
expect(document.querySelector("svg")).toHaveAttribute(
"width",
"305.81250000000006",
"322.81250000000006",
);

// Test minimum card width with icons but without rank.
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: false,
show_icons: true,
});
expect(document.querySelector("svg")).toHaveAttribute("width", "356");
expect(document.querySelector("svg")).toHaveAttribute("width", "437");

// Test minimum card width without icons or rank.
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: false,
show_icons: false,
});
expect(document.querySelector("svg")).toHaveAttribute("width", "340");
expect(document.querySelector("svg")).toHaveAttribute("width", "420");
});

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

expect(
document.body.getElementsByTagName("svg")[0].getAttribute("width"),
).toBe("270");
).toBe("287");
});

it("should render translations", () => {
Expand Down