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

Commit55e538e

Browse files
authored
fix: break word to wrap long strings in stats, add media query (#2310)
* break word to wrap long strings, add media query* add stories for smaller screens
1 parent12a664f commit55e538e

File tree

5 files changed

+58
-3
lines changed

5 files changed

+58
-3
lines changed

‎site/src/components/TemplateStats/TemplateStats.stories.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,24 @@ UsedByMany.args = {
2323
},
2424
activeVersion:Mocks.MockTemplateVersion,
2525
}
26+
27+
exportconstLongTemplateVersion=Template.bind({})
28+
LongTemplateVersion.args={
29+
template:Mocks.MockTemplate,
30+
activeVersion:{
31+
...Mocks.MockTemplateVersion,
32+
name:"thisisareallyreallylongnamefortesting",
33+
},
34+
}
35+
LongTemplateVersion.parameters={
36+
chromatic:{viewports:[960]},
37+
}
38+
39+
exportconstSmallViewport=Template.bind({})
40+
SmallViewport.args={
41+
template:Mocks.MockTemplate,
42+
activeVersion:Mocks.MockTemplateVersion,
43+
}
44+
SmallViewport.parameters={
45+
chromatic:{viewports:[600]},
46+
}

‎site/src/components/TemplateStats/TemplateStats.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
6666
color:theme.palette.text.secondary,
6767
fontFamily:MONOSPACE_FONT_FAMILY,
6868
border:`1px solid${theme.palette.divider}`,
69+
[theme.breakpoints.down("sm")]:{
70+
display:"block",
71+
},
6972
},
7073

7174
statItem:{
@@ -79,18 +82,23 @@ const useStyles = makeStyles((theme) => ({
7982
textTransform:"uppercase",
8083
display:"block",
8184
fontWeight:600,
85+
wordWrap:"break-word",
8286
},
8387

8488
statsValue:{
8589
fontSize:16,
8690
marginTop:theme.spacing(0.25),
87-
display:"inline-block",
91+
display:"block",
92+
wordWrap:"break-word",
8893
},
8994

9095
statsDivider:{
9196
width:1,
9297
height:theme.spacing(5),
9398
backgroundColor:theme.palette.divider,
9499
marginRight:theme.spacing(2),
100+
[theme.breakpoints.down("sm")]:{
101+
display:"none",
102+
},
95103
},
96104
}))

‎site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
6666
color:theme.palette.text.secondary,
6767
fontFamily:MONOSPACE_FONT_FAMILY,
6868
border:`1px solid${theme.palette.divider}`,
69+
[theme.breakpoints.down("sm")]:{
70+
display:"block",
71+
},
6972
},
7073

7174
statItem:{
@@ -79,19 +82,24 @@ const useStyles = makeStyles((theme) => ({
7982
textTransform:"uppercase",
8083
display:"block",
8184
fontWeight:600,
85+
wordWrap:"break-word",
8286
},
8387

8488
statsValue:{
8589
fontSize:16,
8690
marginTop:theme.spacing(0.25),
87-
display:"inline-block",
91+
display:"block",
92+
wordWrap:"break-word",
8893
},
8994

9095
statsDivider:{
9196
width:1,
9297
height:theme.spacing(5),
9398
backgroundColor:theme.palette.divider,
9499
marginRight:theme.spacing(2),
100+
[theme.breakpoints.down("sm")]:{
101+
display:"none",
102+
},
95103
},
96104

97105
capitalize:{

‎site/src/components/WorkspaceStats/WorkspaceStats.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ const useStyles = makeStyles((theme) => ({
8282
color:theme.palette.text.secondary,
8383
fontFamily:MONOSPACE_FONT_FAMILY,
8484
margin:"0px",
85+
[theme.breakpoints.down("sm")]:{
86+
display:"block",
87+
},
8588
},
8689

8790
statItem:{
@@ -95,19 +98,24 @@ const useStyles = makeStyles((theme) => ({
9598
textTransform:"uppercase",
9699
display:"block",
97100
fontWeight:600,
101+
wordWrap:"break-word",
98102
},
99103

100104
statsValue:{
101105
fontSize:16,
102106
marginTop:theme.spacing(0.25),
103-
display:"inline-block",
107+
display:"block",
108+
wordWrap:"break-word",
104109
},
105110

106111
statsDivider:{
107112
width:1,
108113
height:theme.spacing(5),
109114
backgroundColor:theme.palette.divider,
110115
marginRight:theme.spacing(2),
116+
[theme.breakpoints.down("sm")]:{
117+
display:"none",
118+
},
111119
},
112120

113121
capitalize:{

‎site/src/pages/TemplatePage/TemplatePageView.stories.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,13 @@ Example.args = {
1515
activeTemplateVersion:Mocks.MockTemplateVersion,
1616
templateResources:[Mocks.MockWorkspaceResource,Mocks.MockWorkspaceResource2],
1717
}
18+
19+
exportconstSmallViewport=Template.bind({})
20+
SmallViewport.args={
21+
template:Mocks.MockTemplate,
22+
activeTemplateVersion:Mocks.MockTemplateVersion,
23+
templateResources:[Mocks.MockWorkspaceResource,Mocks.MockWorkspaceResource2],
24+
}
25+
SmallViewport.parameters={
26+
chromatic:{viewports:[600]},
27+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp