opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: break word to wrap long strings in stats, add media query (#2310)

Browse Source 
* break word to wrap long strings, add media query

* add stories for smaller screens
This commit is contained in:
Abhineet Jain
2022-06-15 11:16:03 -04:00
committed by GitHub
parent 12a664fa9a
commit 55e538e854
5 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/TemplateStats/TemplateStats.stories.tsx
+21
View File
@@ -23,3 +23,24 @@ UsedByMany.args = {
},
activeVersion: Mocks.MockTemplateVersion,
}
export const LongTemplateVersion = Template.bind({})
LongTemplateVersion.args = {
template: Mocks.MockTemplate,
activeVersion: {
...Mocks.MockTemplateVersion,
name: "thisisareallyreallylongnamefortesting",
},
}
LongTemplateVersion.parameters = {
chromatic: { viewports: [960] },
}
export const SmallViewport = Template.bind({})
SmallViewport.args = {
template: Mocks.MockTemplate,
activeVersion: Mocks.MockTemplateVersion,
}
SmallViewport.parameters = {
chromatic: { viewports: [600] },
}
site/src/components/TemplateStats/TemplateStats.tsx
+9 -1
View File
@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.text.secondary,
fontFamily: MONOSPACE_FONT_FAMILY,
border: `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down("sm")]: {
display: "block",
},
},
statItem: {
@@ -79,12 +82,14 @@ const useStyles = makeStyles((theme) => ({
textTransform: "uppercase",
display: "block",
fontWeight: 600,
wordWrap: "break-word",
},
statsValue: {
fontSize: 16,
marginTop: theme.spacing(0.25),
display: "inline-block",
display: "block",
wordWrap: "break-word",
},
statsDivider: {
@@ -92,5 +97,8 @@ const useStyles = makeStyles((theme) => ({
height: theme.spacing(5),
backgroundColor: theme.palette.divider,
marginRight: theme.spacing(2),
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
}))
site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx
+9 -1
View File
@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.text.secondary,
fontFamily: MONOSPACE_FONT_FAMILY,
border: `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down("sm")]: {
display: "block",
},
},
statItem: {
@@ -79,12 +82,14 @@ const useStyles = makeStyles((theme) => ({
textTransform: "uppercase",
display: "block",
fontWeight: 600,
wordWrap: "break-word",
},
statsValue: {
fontSize: 16,
marginTop: theme.spacing(0.25),
display: "inline-block",
display: "block",
wordWrap: "break-word",
},
statsDivider: {
@@ -92,6 +97,9 @@ const useStyles = makeStyles((theme) => ({
height: theme.spacing(5),
backgroundColor: theme.palette.divider,
marginRight: theme.spacing(2),
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
capitalize: {
site/src/components/WorkspaceStats/WorkspaceStats.tsx
+9 -1
View File
@@ -82,6 +82,9 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.text.secondary,
fontFamily: MONOSPACE_FONT_FAMILY,
margin: "0px",
[theme.breakpoints.down("sm")]: {
display: "block",
},
},
statItem: {
@@ -95,12 +98,14 @@ const useStyles = makeStyles((theme) => ({
textTransform: "uppercase",
display: "block",
fontWeight: 600,
wordWrap: "break-word",
},
statsValue: {
fontSize: 16,
marginTop: theme.spacing(0.25),
display: "inline-block",
display: "block",
wordWrap: "break-word",
},
statsDivider: {
@@ -108,6 +113,9 @@ const useStyles = makeStyles((theme) => ({
height: theme.spacing(5),
backgroundColor: theme.palette.divider,
marginRight: theme.spacing(2),
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
capitalize: {
site/src/pages/TemplatePage/TemplatePageView.stories.tsx
+10
View File
@@ -15,3 +15,13 @@ Example.args = {
activeTemplateVersion: Mocks.MockTemplateVersion,
templateResources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
}
export const SmallViewport = Template.bind({})
SmallViewport.args = {
template: Mocks.MockTemplate,
activeTemplateVersion: Mocks.MockTemplateVersion,
templateResources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
}
SmallViewport.parameters = {
chromatic: { viewports: [600] },
}