Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitcd5cbcd

Browse files
authored
fix: fixes card overflow problemanuraghazra#2452 (anuraghazra#2460)
This commit makes sure that the card width is formatted correctly.
1 parentb2bf4fa commitcd5cbcd

File tree

2 files changed

+37
-19
lines changed

2 files changed

+37
-19
lines changed

‎src/cards/stats-card.js

Lines changed: 25 additions & 11 deletions
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+
constCARD_MIN_WIDTH=287;
16+
constCARD_DEFAULT_WIDTH=287;
17+
constRANK_CARD_MIN_WIDTH=420;
18+
constRANK_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-
consticonWidth=show_icons ?16 :0;
222-
constminCardWidth=hide_rank
223-
?clampValue(50/* padding */+calculateTextWidth()*2,270,Infinity)
224-
:340+iconWidth;
225-
constdefaultCardWidth=hide_rank ?270 :495;
226+
consticonWidth=show_icons ?16+/* padding */1 :0;
227+
constminCardWidth=
228+
(hide_rank
229+
?clampValue(
230+
50/* padding */+calculateTextWidth()*2,
231+
CARD_MIN_WIDTH,
232+
Infinity,
233+
)
234+
:RANK_CARD_MIN_WIDTH)+iconWidth;
235+
constdefaultCardWidth=
236+
(hide_rank ?CARD_DEFAULT_WIDTH :RANK_CARD_DEFAULT_WIDTH)+iconWidth;
226237
letwidth=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 thefollowingpadding:
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
constcalculateRankXTranslation=()=>{
262-
if(width<450){
263-
returnwidth-95+(45*(450-340))/110;
274+
constminXTranslation=RANK_CARD_MIN_WIDTH+iconWidth-70;
275+
if(width>RANK_CARD_DEFAULT_WIDTH){
276+
constxMaxExpansion=minXTranslation+(450-minCardWidth)/2;
277+
returnxMaxExpansion+width-RANK_CARD_DEFAULT_WIDTH;
264278
}else{
265-
returnwidth-95;
279+
returnminXTranslation+(width-minCardWidth)/2;
266280
}
267281
};
268282

‎tests/renderStatsCard.test.js

Lines changed: 12 additions & 8 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp