Skip to content

Commit cdffc13

Browse files
chiaramooneychiaramooney
authored
Fix Formatting on Files for Homepage (#941)
## Description ### Why Separates linting changes from #940 into a separate PR. ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/941)
1 parent 476ce40 commit cdffc13

File tree

2 files changed

+118
-61
lines changed

2 files changed

+118
-61
lines changed

‎website/pages/en/index.js

Lines changed: 112 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ If you're curious about the **sample apps** we have published for inspiration:
7373
[Calculator app]: https://github.com/microsoft/react-native-windows-samples/tree/main/samples/Calculator
7474
[ToDos Feed app]: https://github.com/microsoft/react-native-windows-samples/tree/main/samples/TodosFeed
7575
[Windows AppConsult blog]: https://techcommunity.microsoft.com/t5/Windows-Dev-AppConsult/Getting-started-with-React-Native-for-Windows/ba-p/912093
76-
`
76+
`,
7777
};
7878

7979
class Index extends React.Component {
@@ -83,54 +83,83 @@ class Index extends React.Component {
8383

8484
const Heading = ({ text }) => <h2 className="Heading">{text}</h2>;
8585

86-
const GetStartedButton = ({ pageName, platformName}) => (
86+
const GetStartedButton = ({ pageName, platformName }) => (
8787
<a
8888
className="ActionButton primary"
8989
href={`${baseUrl}docs/${pageName}`}
9090
target="_self"
9191
>
92-
<b style={{fontSize: 24}}>Get started with {platformName}</b>
92+
<b style={{ fontSize: 24 }}>Get started with {platformName}</b>
9393
</a>
9494
);
9595

96-
const VideoCardItem = ({ videolength, videotitle, videotype, videodifficulty, speakername, imgurl}) => (
96+
const VideoCardItem = ({
97+
videolength,
98+
videotitle,
99+
videotype,
100+
videodifficulty,
101+
speakername,
102+
imgurl,
103+
}) => (
97104
<div className="CenterContent">
98-
<div className="videocard" style={{maxHeight: 380}}>
99-
<div style={{position: 'relative'}}>
100-
<div style={{maxWidth: '100%', maxHeight: '100%'}}>
101-
<img src={imgurl} alt="videoimg"/>
102-
</div>
103-
<div className="videocardlengthtip">
104-
<div>
105-
<div className="videocardtipbackground">
106-
<div>
107-
<img src="./img/homepage/timeicon.png" alt="timeicon"/>
108-
</div>
109-
<div>
110-
<p style={{color: '#fff', marginLeft: 8, marginTop: 4, fontSize: 14}}>{videolength}</p>
111-
</div>
105+
<div className="videocard" style={{ maxHeight: 380 }}>
106+
<div style={{ position: "relative" }}>
107+
<div style={{ maxWidth: "100%", maxHeight: "100%" }}>
108+
<img src={imgurl} alt="videoimg" />
109+
</div>
110+
<div className="videocardlengthtip">
111+
<div>
112+
<div className="videocardtipbackground">
113+
<div>
114+
<img src="./img/homepage/timeicon.png" alt="timeicon" />
115+
</div>
116+
<div>
117+
<p
118+
style={{
119+
color: "#fff",
120+
marginLeft: 8,
121+
marginTop: 4,
122+
fontSize: 14,
123+
}}
124+
>
125+
{videolength}
126+
</p>
112127
</div>
113128
</div>
114129
</div>
115130
</div>
116-
<div className="videocardcontent">
117-
<div className="videocardheader">
118-
<p style={{fontsize: 46, fontWeight: 700}}>{videotitle}</p>
119-
<div className="videocardinfo">
120-
<p style={{fontSize: 14}}>{videotype}</p>
121-
<div className="subtitledot"/>
122-
<p style={{fontSize: 14}}>{videodifficulty}</p>
123-
</div>
124-
</div>
125-
<div className="videocarddriverinfo" style={{color: '#0e53bd'}}>
126-
<a href={"https://twitter.com/" + speakername}>
127-
<div className="column" style={{marginRight: -130, marginLeft: -15}}>
128-
<img style={{borderRadius: '50%', width: '32px', height: '32px'}} src={"https://avatars.io/twitter/" + speakername} alt="speakericon"/>
129-
</div>
130-
<div className="column" style={{marginTop: 5}}>@{speakername}</div>
131-
</a>
131+
</div>
132+
<div className="videocardcontent">
133+
<div className="videocardheader">
134+
<p style={{ fontsize: 46, fontWeight: 700 }}>{videotitle}</p>
135+
<div className="videocardinfo">
136+
<p style={{ fontSize: 14 }}>{videotype}</p>
137+
<div className="subtitledot" />
138+
<p style={{ fontSize: 14 }}>{videodifficulty}</p>
132139
</div>
133140
</div>
141+
<div className="videocarddriverinfo" style={{ color: "#0e53bd" }}>
142+
<a href={"https://twitter.com/" + speakername}>
143+
<div
144+
className="column"
145+
style={{ marginRight: -130, marginLeft: -15 }}
146+
>
147+
<img
148+
style={{
149+
borderRadius: "50%",
150+
width: "32px",
151+
height: "32px",
152+
}}
153+
src={"https://avatars.io/twitter/" + speakername}
154+
alt="speakericon"
155+
/>
156+
</div>
157+
<div className="column" style={{ marginTop: 5 }}>
158+
@{speakername}
159+
</div>
160+
</a>
161+
</div>
162+
</div>
134163
</div>
135164
</div>
136165
);
@@ -222,9 +251,9 @@ class Index extends React.Component {
222251

223252
const Intro = () => (
224253
<div background="light" className="SmallSection">
225-
<div className="CenterContent" style={{paddingTop: -150}}>
226-
<MarkdownBlock>{textContent.intro}</MarkdownBlock>
227-
</div>
254+
<div className="CenterContent" style={{ paddingTop: -150 }}>
255+
<MarkdownBlock>{textContent.intro}</MarkdownBlock>
256+
</div>
228257
</div>
229258
);
230259

@@ -233,15 +262,27 @@ class Index extends React.Component {
233262
<div className="content">
234263
<div className="row">
235264
<div className="column">
236-
<img style={{maxWidth: '200%', marginLeft: -300, marginTop: -70, marginBottom: -70}} src="./img/homepage/native_and_js_windows_cropped.png" alt="rnw_cropped"/>
265+
<img
266+
style={{
267+
maxWidth: "200%",
268+
marginLeft: -300,
269+
marginTop: -70,
270+
marginBottom: -70,
271+
}}
272+
src="./img/homepage/native_and_js_windows_cropped.png"
273+
alt="rnw_cropped"
274+
/>
237275
</div>
238276
<div className="column">
239277
<Heading text="Build for Windows" />
240-
<GitHubButton/>
241-
<div style={{marginBottom: 35}}>
278+
<GitHubButton />
279+
<div style={{ marginBottom: 35 }}>
242280
<MarkdownBlock>{textContent.windowsintro}</MarkdownBlock>
243281
</div>
244-
<GetStartedButton pageName="getting-started" platformName="Windows" />
282+
<GetStartedButton
283+
pageName="getting-started"
284+
platformName="Windows"
285+
/>
245286
</div>
246287
</div>
247288
</div>
@@ -254,14 +295,21 @@ class Index extends React.Component {
254295
<div className="row">
255296
<div className="column">
256297
<Heading text="Build for macOS" />
257-
<GitHubButtonmacOS/>
258-
<div style={{marginBottom: 35}}>
298+
<GitHubButtonmacOS />
299+
<div style={{ marginBottom: 35 }}>
259300
<MarkdownBlock>{textContent.macintro}</MarkdownBlock>
260301
</div>
261-
<GetStartedButton pageName="rnm-getting-started" platformName="macOS" />
302+
<GetStartedButton
303+
pageName="rnm-getting-started"
304+
platformName="macOS"
305+
/>
262306
</div>
263307
<div className="column">
264-
<img style={{maxWidth: '200%', marginTop: -70, marginBottom: -70}} src="./img/homepage/native_and_js_mac_cropped.png" alt="rnw_cropped"/>
308+
<img
309+
style={{ maxWidth: "200%", marginTop: -70, marginBottom: -70 }}
310+
src="./img/homepage/native_and_js_mac_cropped.png"
311+
alt="rnw_cropped"
312+
/>
265313
</div>
266314
</div>
267315
</div>
@@ -279,10 +327,17 @@ class Index extends React.Component {
279327

280328
const Tutorials = () => (
281329
<Section background="tint">
282-
<div className="CenterContent" style={{marginTop: -50}}>
330+
<div className="CenterContent" style={{ marginTop: -50 }}>
283331
<div>
284-
<a href="videos"><h1 style={{textAlign: 'center', color: '#0e53bd'}}>Take Your App Further</h1></a>
285-
<p style={{textAlign: 'center', marginTop: -10}}>Speed up development with videos on how to build React Native apps for Windows and macOS.</p>
332+
<a href="videos">
333+
<h1 style={{ textAlign: "center", color: "#0e53bd" }}>
334+
Take Your App Further
335+
</h1>
336+
</a>
337+
<p style={{ textAlign: "center", marginTop: -10 }}>
338+
Speed up development with videos on how to build React Native apps
339+
for Windows and macOS.
340+
</p>
286341

287342
<div className="row">
288343
<div className="column">
@@ -293,8 +348,9 @@ class Index extends React.Component {
293348
videotype="Walkthrough"
294349
videodifficulty="Beginner"
295350
speakername="alloy"
296-
imgurl="./img/homepage/eloy_rn4m_preview_full.png"/>
297-
</a>
351+
imgurl="./img/homepage/eloy_rn4m_preview_full.png"
352+
/>
353+
</a>
298354
</div>
299355
<div className="column">
300356
<a href={baseUrl + "videos"}>
@@ -304,8 +360,9 @@ class Index extends React.Component {
304360
videotype="Type of Video"
305361
videodifficulty="Difficulty"
306362
speakername="reactwindows"
307-
imgurl="./img/homepage/video_learning_image-small.png"/>
308-
</a>
363+
imgurl="./img/homepage/video_learning_image-small.png"
364+
/>
365+
</a>
309366
</div>
310367
</div>
311368
</div>
@@ -316,9 +373,9 @@ class Index extends React.Component {
316373
return (
317374
<div className="homepage">
318375
<HeaderHero />
319-
<Intro/>
320-
<WindowsIntro/>
321-
<MacIntro/>
376+
<Intro />
377+
<WindowsIntro />
378+
<MacIntro />
322379
{/*<Tutorials/>*/}
323380
<About />
324381
</div>

‎website/static/css/homepage/HeaderHero.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
.videocard {
3131
border-radius: 6px;
32-
box-shadow: 0 5px 10px 0 rgba(0,0,0,.4);
32+
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
3333
background-color: #fff;
3434
overflow: hidden;
3535
display: -ms-flexbox;
@@ -92,8 +92,8 @@
9292
.videocardtipbackground {
9393
display: flex;
9494
align-items: center;
95-
box-shadow: 0 5px 10px 0 rgba(1,1,1,.2);
96-
background-color: rgba(1,1,1,.75);
95+
box-shadow: 0 5px 10px 0 rgba(1, 1, 1, 0.2);
96+
background-color: rgba(1, 1, 1, 0.75);
9797
border-radius: 4px;
9898
padding: 15px 7px 5px 10px;
9999
color: #fff;
@@ -126,9 +126,9 @@
126126
}
127127

128128
@media screen and (max-width: 800px) {
129-
.discriptionadjust {
130-
white-space: nowrap !important;
131-
}
129+
.discriptionadjust {
130+
white-space: nowrap !important;
131+
}
132132
}
133133

134134
.HeaderHero .title {

0 commit comments

Comments
 (0)