Skip to content

Commit 86ded3e

Browse files
hueyyhueyy
committed
different emojis for each bullet point; adjusted footer padding; adjusted header div height
1 parent 5e37689 commit 86ded3e

3 files changed

Lines changed: 168 additions & 138 deletions

File tree

‎src/components/HomePage.jsx‎

Lines changed: 139 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import posed from 'react-pose';
33
import { Waypoint } from 'react-waypoint';
4+
import styled from 'styled-components'
45

56
// Styles
67
import 'Styles/uclapi-hackathon.scss';
@@ -13,7 +14,7 @@ import society from 'Images/icons/user-group.svg';
1314
import question from 'Images/icons/lightbulb.svg';
1415

1516
import aisoc from 'Images/sponsors/aisoc.png'
16-
import techsoc from 'Images/sponsors/techsoc.png'
17+
import techsoc from 'Images/sponsors/techsoc.png'
1718
import simplepoll from 'Images/sponsors/simplepoll.png'
1819

1920
// Components
@@ -25,8 +26,14 @@ import {
2526
// Data
2627
import { builtApps, ideas } from 'Layout/data/Examples.jsx'
2728

29+
const EmojiLi = styled.li((props) => ({
30+
'&::before': {
31+
content: `"${props.emoji}"`,
32+
}
33+
}))
34+
2835
// Constants
29-
let partners = [
36+
const partners = [
3037
{
3138
image: aisoc,
3239
name: `UCL Artificial Intelligence Society`,
@@ -43,35 +50,53 @@ let partners = [
4350
link: `https://simplepoll.rocks/`,
4451
},
4552
]
46-
let categories = [
53+
const categories = [
4754
{
48-
'title': `Best individual use`,
55+
'title': `Best Student App`,
4956
'image': individual,
5057
'description':
5158
(<ul>
52-
<li>Make an application any student can use</li>
53-
<li>Give it some innovative features</li>
54-
<li>Use the API and tell us how</li>
59+
<EmojiLi emoji="💡">
60+
Make something for students
61+
</EmojiLi>
62+
<EmojiLi emoji="🤔">
63+
Scratch your own itch
64+
</EmojiLi>
65+
<EmojiLi emoji="👏">
66+
What would your friends use everyday?
67+
</EmojiLi>
5568
</ul>)
5669
},
5770
{
58-
'title': `Best society use`,
71+
'title': `Best Society Use`,
5972
'image': society,
6073
'description':
6174
(<ul>
62-
<li>Make something that helps out societies</li>
63-
<li>Make it easy to use</li>
64-
<li>Use the API and tell us how</li>
75+
<EmojiLi emoji="🏅">
76+
Make something for societies
77+
</EmojiLi>
78+
<EmojiLi emoji="🤯">
79+
What would be a killer app for your society?
80+
</EmojiLi>
81+
<EmojiLi emoji="😍">
82+
Bonus points if your society starts using it
83+
</EmojiLi>
6584
</ul>)
6685
},
6786
{
68-
'title': `Sponsor challenge`,
87+
'title': `Sponsor Challenge`,
6988
'image': question,
7089
'description':
7190
(<ul>
72-
<li>Make an application </li>
73-
<li>Use our sponsor API</li>
74-
<li>More details to come soon</li>
91+
<EmojiLi emoji="✨">
92+
Use our sponsors' API in a creative way
93+
</EmojiLi>
94+
<EmojiLi emoji="🎨">
95+
Make anything you like
96+
</EmojiLi>
97+
<EmojiLi emoji="⌚">
98+
More details to come soon
99+
</EmojiLi>
75100
</ul>)
76101
}
77102
]
@@ -125,27 +150,27 @@ export default class HomePage extends React.Component {
125150

126151
const date = "18th - 19th January 2020"
127152
const location = "South Cloisters and Gustave Tuck LT"
128-
153+
129154
const registerLink = "/login/process"
130155
const canRegister = true
131156

132157
const categoryImageSize = "50px"
133-
134-
const locations = [{ lng: -0.1333324, lat: 51.5246765},
135-
{ lng: -0.1334518, lat: 51.5246298},
136-
{ lng: -0.1334209, lat: 51.5246022},
137-
{ lng: -0.1333981, lat: 51.5246114},
138-
{ lng: -0.1332761, lat: 51.5244971},
139-
{ lng: -0.1333847, lat: 51.5244562},
140-
{ lng: -0.1333552, lat: 51.524432},
141-
{ lng: -0.1332506, lat: 51.5244771},
142-
{ lng: -0.1331259, lat: 51.5243669},
143-
{ lng: -0.1332305, lat: 51.5243202},
144-
{ lng: -0.1331769, lat: 51.5242726},
145-
{ lng: -0.1329207, lat: 51.5243769},
146-
{ lng: -0.1329797, lat: 51.5244287},
147-
{ lng: -0.1330347, lat: 51.5244087},
148-
{ lng: -0.1333324, lat: 51.5246765}, ]
158+
159+
const locations = [{ lng: -0.1333324, lat: 51.5246765 },
160+
{ lng: -0.1334518, lat: 51.5246298 },
161+
{ lng: -0.1334209, lat: 51.5246022 },
162+
{ lng: -0.1333981, lat: 51.5246114 },
163+
{ lng: -0.1332761, lat: 51.5244971 },
164+
{ lng: -0.1333847, lat: 51.5244562 },
165+
{ lng: -0.1333552, lat: 51.524432 },
166+
{ lng: -0.1332506, lat: 51.5244771 },
167+
{ lng: -0.1331259, lat: 51.5243669 },
168+
{ lng: -0.1332305, lat: 51.5243202 },
169+
{ lng: -0.1331769, lat: 51.5242726 },
170+
{ lng: -0.1329207, lat: 51.5243769 },
171+
{ lng: -0.1329797, lat: 51.5244287 },
172+
{ lng: -0.1330347, lat: 51.5244087 },
173+
{ lng: -0.1333324, lat: 51.5246765 },]
149174

150175
return (
151176
<React.Fragment>
@@ -157,18 +182,18 @@ export default class HomePage extends React.Component {
157182
/>
158183

159184
<Row height='800px' styling='splash-parallax' noPadding>
160-
<Explosion particles={30} speed={800} maxsize={30}
161-
isOn={true} isOn={animations["landingpage"] ? true : false}/>
185+
<Explosion particles={30} speed={600} maxsize={30}
186+
isOn={true} isOn={animations["landingpage"] ? true : false} />
162187
<Column width='2-3' horizontalAlignment='center' verticalAlignment='center'>
163188
<TextView text='UCL API Hackathon' heading={1} align={'center'} />
164189
<TextView text={date} heading={2} align={'center'} />
165190
<TextView text={location} heading={3} align={'center'} />
166191
<FocusIn pose={animations["landingpage"] ? 'open' : 'closed'} style={{ 'transitionTimingFunction': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}>
167-
{canRegister ? (
192+
{canRegister ? (
168193
<ButtonView text={'Register Now'} link={registerLink} type="alternate" />
169194
) : (
170-
<ButtonView text={'Registration not open'} link={registerLink} type="default" onClick={ () => {} } />
171-
)}
195+
<ButtonView text={'Registration not open'} link={registerLink} type="default" onClick={() => { }} />
196+
)}
172197
</FocusIn>
173198
</Column>
174199
</Row>
@@ -200,22 +225,22 @@ export default class HomePage extends React.Component {
200225
/>
201226

202227
<Row styling='splash-parallax'>
203-
<FocusIn className='animated-card' pose={animations["categories"] ? 'open' : 'closed'} style={ { marginLeft: 0, marginRight: 0 } }>
228+
<FocusIn className='animated-card' pose={animations["categories"] ? 'open' : 'closed'} style={{ marginLeft: 0, marginRight: 0 }}>
204229
<Column width='1-1' horizontalAlignment="center">
205230
<TextView text="Challenges" heading="1" />
206231
{
207232
categories.map((category, i) =>
208-
209-
<CardView width={"1-" + categories.length} minWidth="300px" key={i} height="380px" style={{ padding: `20px 0`}} snapAlign>
210-
<Row height={`380px`} noPadding >
211-
<Column width='2-3' horizontalAlignment='center' verticalAlignment='center'>
212-
<ImageView width={categoryImageSize} height={categoryImageSize} src={category.image} />
213-
<TextView text={category.title} heading={1} align='center' />
214-
<TextView text={category.description} heading={5} align={'left'} />
215-
</Column>
216-
</Row>
217-
</CardView>
218-
233+
234+
<CardView width={"1-" + categories.length} minWidth="300px" key={i} height="380px" style={{ padding: `20px 0` }} snapAlign>
235+
<Row height={`380px`} noPadding >
236+
<Column width='2-3' horizontalAlignment='center' verticalAlignment='center'>
237+
<ImageView width={categoryImageSize} height={categoryImageSize} src={category.image} />
238+
<TextView text={category.title} heading={1} align='center' />
239+
<TextView text={category.description} heading={5} align={'left'} />
240+
</Column>
241+
</Row>
242+
</CardView>
243+
219244
)
220245
}
221246
</Column>
@@ -226,69 +251,69 @@ export default class HomePage extends React.Component {
226251
onEnter={(props) => { this.toggleAnimation("examples", true) }}
227252
/>
228253

229-
<Row styling="primary" style={ {paddingTop : `50px` } } noPadding>
254+
<Row styling="primary" style={{ paddingTop: `50px` }} noPadding>
230255
<Column width='2-3' maxWidth='700px' horizontalAlignment='center'>
231-
<TextView heading={`1`} text={`The API In Action`}/>
256+
<TextView heading={`1`} text={`The API In Action`} />
232257
<TextView heading={`p`} text={`Here are some examples of things
233258
people have already built that make use of the UCL API.
234259
Check out the source code, play around with them, and get
235-
inspired!`}/>
260+
inspired!`} />
236261
</Column>
237262
</Row>
238263

239-
<Row styling="primary" style={ {paddingBottom : `30px` } } noPadding>
264+
<Row styling="primary" style={{ paddingBottom: `30px` }} noPadding>
240265
<Column width='8-10' horizontalAlignment='center'>
241-
<table className="built-apps-table">
242-
<tbody>
243-
{
244-
(showMore ? builtApps : builtApps.slice(0, 1)).map(({ title, description, status, links }) => (
245-
<tr key={title}>
246-
<td style={ { width : `25%` } }>
247-
<h5>{title}</h5>
248-
</td>
249-
<td style={ { width : `50%`, textAlign : `left`} }>
250-
<p>{description}</p>
251-
</td>
252-
<td style={ { width : `25%` } }>
253-
{
254-
// status && <div className="chip status">{status}</div>
255-
}
256-
{
257-
links.map(({ text, url }) => (
258-
<p key={url}><a href={url}>{text}</a></p>
259-
))
260-
}
261-
</td>
262-
</tr>
263-
))
264-
}
265-
{ !showMore && (
266-
<tr>
267-
<td colSpan={3}>
268-
<ButtonView text={'Show more'} type="alternate"
269-
onClick={() => {
270-
this.setState({ showMore: true })
271-
}} />
266+
<table className="built-apps-table">
267+
<tbody>
268+
{
269+
(showMore ? builtApps : builtApps.slice(0, 1)).map(({ title, description, status, links }) => (
270+
<tr key={title}>
271+
<td style={{ width: `25%` }}>
272+
<h5>{title}</h5>
273+
</td>
274+
<td style={{ width: `50%`, textAlign: `left` }}>
275+
<p>{description}</p>
276+
</td>
277+
<td style={{ width: `25%` }}>
278+
{
279+
// status && <div className="chip status">{status}</div>
280+
}
281+
{
282+
links.map(({ text, url }) => (
283+
<p key={url}><a href={url}>{text}</a></p>
284+
))
285+
}
272286
</td>
273287
</tr>
274-
)}
275-
</tbody>
276-
</table>
277-
278-
<TextView heading={`1`} text={`You could make...`}/>
288+
))
289+
}
290+
{!showMore && (
291+
<tr>
292+
<td colSpan={3}>
293+
<ButtonView text={'Show more'} type="alternate"
294+
onClick={() => {
295+
this.setState({ showMore: true })
296+
}} />
297+
</td>
298+
</tr>
299+
)}
300+
</tbody>
301+
</table>
302+
303+
<TextView heading={`1`} text={`You could make...`} />
279304
</Column>
280-
<Column width={`8-10`} horizontalAlignment='center' style={ {marginBottom : `20px`} }>
281-
<CardView width={"1-1"} type={`alternate`} style={ { padding: `20px 0`, margin : `0`, marginBottom : `20px`, borderRadius : `0` } } noPadding>
305+
<Column width={`8-10`} horizontalAlignment='center' style={{ marginBottom: `20px` }}>
306+
<CardView width={"1-1"} type={`alternate`} style={{ padding: `20px 0`, margin: `0`, marginBottom: `20px`, borderRadius: `0` }} noPadding>
282307
<Column width='2-3' horizontalAlignment='center'>
283-
<TextView text={ideas[ideaIndex]} heading={`p`} style={ { marginBottom : `0` } }/>
308+
<TextView text={ideas[ideaIndex]} heading={`p`} style={{ marginBottom: `0` }} />
284309
</Column>
285310
</CardView>
286311
</Column>
287312
<Column width='8-10' horizontalAlignment='center'>
288-
<ButtonView text={'Inspire Me!'} type="alternate"
289-
onClick={() => {
290-
this.setState({ ideaIndex: randIndex(ideas) })
291-
}} />
313+
<ButtonView text={'Inspire Me!'} type="alternate"
314+
onClick={() => {
315+
this.setState({ ideaIndex: randIndex(ideas) })
316+
}} />
292317
</Column>
293318

294319
</Row>
@@ -334,12 +359,12 @@ export default class HomePage extends React.Component {
334359
<Row height="500px" noPadding styling="primary">
335360
<div className={`default`}>
336361
<Column width='2-3' style={{ "display": "inline-block", "float": "left" }}>
337-
<MapFragment locations={locations}/>
362+
<MapFragment locations={locations} />
338363
</Column>
339364
<Column width='1-3' style={{ "display": "inline-block", "float": "left" }}>
340365
<Row height="500px" noPadding styling="transparent">
341366
<Column width='1-1' horizontalAlignment='center' verticalAlignment='center'>
342-
<CardView width={"1-1"} height="fit-content" style={ { padding: `20px 0` }}>
367+
<CardView width={"1-1"} height="fit-content" style={{ padding: `20px 0` }}>
343368
<TextView text="Location:" heading={1} align={'center'} />
344369
<TextView text="South Cloisters" heading={1} align={'center'} />
345370
</CardView>
@@ -350,28 +375,28 @@ export default class HomePage extends React.Component {
350375

351376
<div className={`mobile tablet`}>
352377
<Column width='1-1' style={{ "display": "inline-block", "float": "left" }}>
353-
<MapFragment locations={locations}/>
378+
<MapFragment locations={locations} />
354379
</Column>
355380
</div>
356381
</Row>
357382

358383
<Row styling='splash-parallax'>
359384
<Column width='1-1' horizontalAlignment="center">
360-
<TextView text="Partners" heading="1" style={ { paddingBottom : `0`} }/>
361-
{
362-
partners.map((partner, i) =>
363-
364-
<CardView width={"1-3"} minWidth="300px" key={i} height="fit-content"
365-
style={{ padding: `20px 0`}} snapAlign link={partner.link}>
366-
<Row noPadding>
367-
<ImageView width={"100px"} height={"100px"} src={partner.image} />
368-
<TextView text={partner.name} heading={3} align={'center'} />
369-
</Row>
370-
</CardView>
371-
372-
)
373-
}
374-
</Column>
385+
<TextView text="Partners" heading="1" style={{ paddingBottom: `0` }} />
386+
{
387+
partners.map((partner, i) =>
388+
389+
<CardView width={"1-3"} minWidth="300px" key={i} height="fit-content"
390+
style={{ padding: `20px 0` }} snapAlign link={partner.link}>
391+
<Row noPadding>
392+
<ImageView width={"100px"} height={"100px"} src={partner.image} />
393+
<TextView text={partner.name} heading={3} align={'center'} />
394+
</Row>
395+
</CardView>
396+
397+
)
398+
}
399+
</Column>
375400
</Row>
376401

377402
<Footer />

0 commit comments

Comments
 (0)