Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit cd36cf9

Browse files
author
M-ZubairAhmed
committed
https://github.com/coderplex/coderplex/pull/11#discussion_r144852017
1 parent de65cb3 commit cd36cf9

File tree

2 files changed

+66
-70
lines changed

2 files changed

+66
-70
lines changed

‎components/row-events.js

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
1-
import React from 'react'
2-
import { Card, Icon } from 'semantic-ui-react'
3-
import moment from 'moment'
1+
import React from 'react';
2+
import { Card, Icon } from 'semantic-ui-react';
3+
import moment from 'moment';
44

55
const RowEvent = props => {
66
return (
7-
<cardhead onClick={() => window.open(props.link)}>
8-
{/* <div style={{ display: 'inline-block' }}>Picture goes here</div> */}
9-
<Card
10-
style={{
11-
marginTop: '15px',
12-
width: '800px',
13-
backgroundColor: '#fafafa',
14-
}}
15-
>
16-
<Card.Content>
17-
<Card.Header>{props.name}</Card.Header>
18-
<Card.Meta style={{ marginTop: '15px' }}>
7+
<Card fluid href={props.link} raised>
8+
<Card.Content>
9+
<Card.Header>{props.name}</Card.Header>
10+
<div className="card_venue">
11+
<Card.Meta>
1912
{props.venue === undefined ? 'Online' : props.venue.name}
2013
</Card.Meta>
21-
{/* <Card.Description as="string">
22-
{props.description.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/gi, '')}
23-
</Card.Description> */}
24-
</Card.Content>
25-
<Card.Content extra>
14+
</div>
15+
</Card.Content>
16+
<Card.Content extra>
17+
<span className="card_icons">
2618
<Icon name="clock" />
2719
{moment(props.time).format("h:mm A, ddd MMM Do 'YY")}
28-
<Icon name="users" style={{ marginLeft: '15px' }} />
20+
</span>
21+
<span className="card_icons">
22+
<Icon name="users" />
2923
{`${props.yesCount} attended`}
30-
<Icon name="log out" style={{ marginLeft: '15px' }} />
31-
{props.venue === undefined ? 'Free session' : 'Free entry'}
32-
</Card.Content>
33-
</Card>
24+
</span>
25+
<Icon name="log out" />
26+
{props.venue === undefined ? 'Free session' : 'Free entry'}
27+
</Card.Content>
3428
<style jsx>{`
35-
cardhead :hover {
36-
cursor: pointer;
29+
.card_venue {
30+
margin-top: 15px;
31+
}
32+
.card_icons {
33+
margin-right: 15px;
3734
}
3835
`}</style>
39-
</cardhead>
40-
)
41-
}
36+
</Card>
37+
);
38+
};
4239

43-
export default RowEvent
40+
export default RowEvent;

‎pages/events.js

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import axios from 'axios';
33
import NProgress from 'nprogress';
4+
import { Card } from 'semantic-ui-react';
45

56
import publicPage from '../hocs/public-page';
67
import { futureEventsMeetupURL, pastEventsMeetupURL } from '../utils/urls';
@@ -32,26 +33,9 @@ export default publicPage(
3233
render() {
3334
return (
3435
<div>
35-
<div
36-
style={{
37-
backgroundColor: '#f4f7fb',
38-
minHeight: '200px',
39-
}}
40-
>
41-
<h1
42-
style={{
43-
textAlign: 'center',
44-
paddingTop: '20px',
45-
fontSize: '4em',
46-
color: '#DF1CB5',
47-
fontWeight: '900',
48-
}}
49-
>
50-
Events
51-
</h1>
52-
<h2 style={{ textAlign: 'center' }}>
53-
Because you cannot change the world alone
54-
</h2>
36+
<div className="top_banner_root">
37+
<h1 className="top_banner_headline">Events</h1>
38+
<h2>Because you cannot change the world alone</h2>
5539
</div>
5640
<main>
5741
{this.state.pastEvents.length !== 0 &&
@@ -60,27 +44,30 @@ export default publicPage(
6044
<h4>Upcoming events</h4>
6145
<div>
6246
{this.state.futureEvents.map(event => (
63-
<RowEvent
64-
key={event.id}
65-
name={event.name}
66-
yesCount={event.yes_rsvp_count}
67-
time={event.time}
68-
venue={event.venue}
69-
link={event.link}
70-
/>
47+
<Card.Group key={event.id}>
48+
<RowEvent
49+
name={event.name}
50+
yesCount={event.yes_rsvp_count}
51+
time={event.time}
52+
venue={event.venue}
53+
link={event.link}
54+
/>
55+
</Card.Group>
7156
))}
7257
</div>
7358
<h4>Recent events</h4>
7459
<div>
7560
{this.state.pastEvents.map(event => (
76-
<RowEvent
77-
key={event.id}
78-
name={event.name}
79-
yesCount={event.yes_rsvp_count}
80-
time={event.time}
81-
venue={event.venue}
82-
link={event.link}
83-
/>
61+
<Card.Group key={event.id}>
62+
<RowEvent
63+
key={event.id}
64+
name={event.name}
65+
yesCount={event.yes_rsvp_count}
66+
time={event.time}
67+
venue={event.venue}
68+
link={event.link}
69+
/>
70+
</Card.Group>
8471
))}
8572
</div>
8673
</div>
@@ -90,16 +77,28 @@ export default publicPage(
9077
</main>
9178
<style jsx>{`
9279
main {
93-
background-color :#FFFFFF
80+
background-color: #ffffff;
9481
padding-top: 30px;
95-
padding-bottom:30px;
82+
padding-bottom: 30px;
83+
padding-left: 30px;
84+
padding-right: 30px;
9685
min-height: calc(100vh - 70px);
97-
padding-left: 40;
9886
display: flex;
9987
justify-content: center;
10088
align-items: center;
10189
flex-direction: column;
10290
}
91+
.top_banner_root {
92+
background-color: #f4f7fb;
93+
min-height: 200px;
94+
text-align: center;
95+
}
96+
.top_banner_headline {
97+
padding-top: 20px;
98+
font-size: 4em;
99+
color: #df1cb5;
100+
font-weight: 900;
101+
}
103102
`}</style>
104103
</div>
105104
);

0 commit comments

Comments
 (0)