Skip to content

Commit 75314ae

Browse files
ChitlangeSahasChitlangeSahas
authored
fix: styling for the homepage container (first mile), add documentation panel (#4185)
1 parent 4539444 commit 75314ae

File tree

2 files changed

+122
-105
lines changed

2 files changed

+122
-105
lines changed

‎src/homepageExperience/containers/HomepageContainer.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,6 @@
1515
cursor: pointer;
1616
}
1717

18-
.homepage-container {
19-
display: flex;
20-
flex-direction: column;
21-
width: 70%;
22-
}
23-
24-
.homepage-container--wrapper {
25-
display: flex;
26-
width: 100%;
27-
height: 100%;
28-
justify-content: center;
29-
align-items: center;
30-
}
31-
3218
.homepage-write-data-tile {
3319
display: flex;
3420
background-color: #1a1a2a;

‎src/homepageExperience/containers/HomepageContainer.tsx‎

Lines changed: 122 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import {Link} from 'react-router-dom'
44

55
import {
66
AlignItems,
7+
Columns,
78
ComponentSize,
9+
DapperScrollbars,
810
FlexBox,
11+
FlexDirection,
12+
Grid,
913
Icon,
1014
IconFont,
1115
InfluxColors,
12-
JustifyContent,
1316
Page,
1417
ResourceCard,
1518
} from '@influxdata/clockface'
@@ -25,7 +28,12 @@ import {
2528
} from 'src/homepageExperience/components/HomepageIcons'
2629

2730
import './HomepageContainer.scss'
31+
32+
// Utils
2833
import {event} from 'src/cloud/utils/reporting'
34+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
35+
import UsageProvider from 'src/usage/context/usage'
36+
import Resources from 'src/me/components/Resources'
2937

3038
export const HomepageContainer: FC = () => {
3139
const org = useSelector(getOrg)
@@ -36,7 +44,7 @@ export const HomepageContainer: FC = () => {
3644
const golangLink = `/orgs/${org.id}/load-data/client-libraries/go`
3745
const loadDataSourcesLink = `/orgs/${org.id}/load-data/sources`
3846

39-
const cardStyle = {maxWidth: '250px'}
47+
const cardStyle = {minWidth: '200px'}
4048
const linkStyle = {color: InfluxColors.Grey75}
4149
const moreStyle = {height: '100%', ...linkStyle}
4250

@@ -48,99 +56,122 @@ export const HomepageContainer: FC = () => {
4856
return (
4957
<>
5058
<Page titleTag={pageTitleSuffixer(['Get Started'])}>
51-
<Page.Contents>
52-
<div className="homepage-container--wrapper">
53-
<div className="homepage-container">
54-
<h1>Get Started</h1>
55-
<h5>
56-
Write and query data using the programming language of your
57-
choice
58-
</h5>
59-
<FlexBox
60-
margin={ComponentSize.Large}
61-
alignItems={AlignItems.Stretch}
62-
justifyContent={JustifyContent.SpaceBetween}
63-
>
64-
<ResourceCard style={cardStyle}>
65-
<Link
66-
to={pythonWizardLink}
67-
style={linkStyle}
68-
onClick={logPythonEvent}
69-
>
70-
<div className="homepage-wizard-language-tile">
71-
<h5>Python</h5>
72-
{PythonIcon}
73-
</div>
74-
</Link>
75-
</ResourceCard>
76-
<ResourceCard style={cardStyle}>
77-
<Link to={javaScriptNodeLink} style={linkStyle}>
78-
<div className="homepage-wizard-language-tile">
79-
<h5>JavaScript/Node.js</h5>
80-
{JavascriptNodeJsIcon}
81-
</div>
82-
</Link>
83-
</ResourceCard>
84-
<ResourceCard style={cardStyle}>
85-
<Link to={golangLink} style={linkStyle}>
86-
<div className="homepage-wizard-language-tile">
87-
<h5>Go</h5>
88-
{GoIcon}
89-
</div>
90-
</Link>
91-
</ResourceCard>
92-
<ResourceCard style={cardStyle}>
93-
<Link to={loadDataSourcesLink} style={moreStyle}>
94-
<div className="homepage-wizard-language-tile">
95-
<span>
96-
<h5>
97-
MORE <Icon glyph={IconFont.ArrowRight_New} />
98-
</h5>
99-
</span>
59+
<Page.Contents scrollable={true} fullWidth={false}>
60+
<Grid>
61+
<Grid.Row>
62+
<Grid.Column widthSM={Columns.Eight} widthMD={Columns.Nine}>
63+
<FlexBox
64+
direction={FlexDirection.Column}
65+
alignItems={AlignItems.Stretch}
66+
>
67+
<h1>Get Started</h1>
68+
<h5>
69+
Write and query data using the programming language of your
70+
choice
71+
</h5>
72+
<DapperScrollbars autoSizeHeight={true} autoHide={true}>
73+
<FlexBox
74+
margin={ComponentSize.Large}
75+
alignItems={AlignItems.Stretch}
76+
stretchToFitWidth={false}
77+
>
78+
<ResourceCard style={cardStyle}>
79+
<Link
80+
to={pythonWizardLink}
81+
style={linkStyle}
82+
onClick={logPythonEvent}
83+
>
84+
<div className="homepage-wizard-language-tile">
85+
<h5>Python</h5>
86+
{PythonIcon}
87+
</div>
88+
</Link>
89+
</ResourceCard>
90+
<ResourceCard style={cardStyle}>
91+
<Link to={javaScriptNodeLink} style={linkStyle}>
92+
<div className="homepage-wizard-language-tile">
93+
<h5>JavaScript/Node.js</h5>
94+
{JavascriptNodeJsIcon}
95+
</div>
96+
</Link>
97+
</ResourceCard>
98+
<ResourceCard style={cardStyle}>
99+
<Link to={golangLink} style={linkStyle}>
100+
<div className="homepage-wizard-language-tile">
101+
<h5>Go</h5>
102+
{GoIcon}
103+
</div>
104+
</Link>
105+
</ResourceCard>
106+
<ResourceCard style={cardStyle}>
107+
<Link to={loadDataSourcesLink} style={moreStyle}>
108+
<div className="homepage-wizard-language-tile">
109+
<span>
110+
<h5>
111+
MORE <Icon glyph={IconFont.ArrowRight_New} />
112+
</h5>
113+
</span>
114+
</div>
115+
</Link>
116+
</ResourceCard>
117+
</FlexBox>
118+
</DapperScrollbars>
119+
<hr style={{marginTop: '32px'}} />
120+
<Link to={cliPageLink} style={linkStyle}>
121+
<div className="homepage-write-data-tile">
122+
<div className="tile-icon-text-wrapper">
123+
<div className="icon">{CLIIcon}</div>
124+
<div>
125+
<h4>CLI</h4>
126+
<h6>
127+
Write and query data using the Command Line
128+
Interface
129+
</h6>
130+
</div>
131+
</div>
132+
133+
<Icon
134+
glyph={IconFont.ArrowRight_New}
135+
className="arrow-button"
136+
/>
100137
</div>
101138
</Link>
102-
</ResourceCard>
103-
</FlexBox>
104-
<hr style={{marginTop: '32px'}} />
105-
<Link to={cliPageLink} style={linkStyle}>
106-
<div className="homepage-write-data-tile">
107-
<div className="tile-icon-text-wrapper">
108-
<div className="icon">{CLIIcon}</div>
109-
<div>
110-
<h4>CLI</h4>
111-
<h6>
112-
Write and query data using the Command Line Interface
113-
</h6>
114-
</div>
115-
</div>
139+
<Link to={telegrafPageLink} style={linkStyle}>
140+
<div className="homepage-write-data-tile">
141+
<div className="tile-icon-text-wrapper">
142+
<div className="icon">{TelegrafIcon}</div>
143+
<div>
144+
<h4>Server Agent (Telegraf)</h4>
145+
<h6>
146+
Easily collect and write data using custom
147+
stand-alone agent plugins
148+
</h6>
149+
</div>
150+
</div>
116151

117-
<Icon
118-
glyph={IconFont.ArrowRight_New}
119-
className="arrow-button"
120-
/>
121-
</div>
122-
</Link>
123-
<Link to={telegrafPageLink} style={linkStyle}>
124-
<div className="homepage-write-data-tile">
125-
<div className="tile-icon-text-wrapper">
126-
<div className="icon">{TelegrafIcon}</div>
127-
<div>
128-
<h4>Server Agent (Telegraf)</h4>
129-
<h6>
130-
Easily collect and write data using custom stand-alone
131-
agent plugins
132-
</h6>
152+
<Icon
153+
glyph={IconFont.ArrowRight_New}
154+
className="arrow-button"
155+
/>
133156
</div>
134-
</div>
135-
136-
<Icon
137-
glyph={IconFont.ArrowRight_New}
138-
className="arrow-button"
139-
/>
140-
</div>
141-
</Link>
142-
</div>
143-
</div>
157+
</Link>
158+
</FlexBox>
159+
</Grid.Column>
160+
<Grid.Column
161+
widthSM={Columns.Four}
162+
widthMD={Columns.Three}
163+
style={{marginTop: '40px'}}
164+
>
165+
{isFlagEnabled('uiUnificationFlag') ? (
166+
<UsageProvider>
167+
<Resources />
168+
</UsageProvider>
169+
) : (
170+
<Resources />
171+
)}
172+
</Grid.Column>
173+
</Grid.Row>
174+
</Grid>
144175
</Page.Contents>
145176
</Page>
146177
</>

0 commit comments

Comments
 (0)