mirror/github-readme-stats
2
0
Fork 0
mirror of https://github.com/anuraghazra/github-readme-stats.git synced 2025-03-07 15:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixes card overflow problem #2452 (#2460)

Browse Source 
This commit makes sure that the card width is formatted correctly.
This commit is contained in:
Rick Staa 2023-01-24 15:40:11 +01:00 committed by GitHub
parent b2bf4fa487
commit cd5cbcdb09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/cards/stats-card.js
View File

@ -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;
/**
* Create a stats card text item.
*
@ -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;
@ -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;
}
};

20
tests/renderStatsCard.test.js
View File

@ -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,
@ -97,6 +98,7 @@ describe("Test renderStatsCard", () => {
"305.81250000000006",
);
// Test minimum card width with rank and icons.
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: true,
@ -104,22 +106,24 @@ describe("Test renderStatsCard", () => {
});
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", () => {
@ -312,7 +316,7 @@ describe("Test renderStatsCard", () => {
expect(
document.body.getElementsByTagName("svg")[0].getAttribute("width"),
).toBe("270");
).toBe("287");
});
it("should render translations", () => {