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 a48cb8d

Browse files
author
z
committed
events card converted to emotion style
1 parent 08fe634 commit a48cb8d

File tree

4 files changed

+77
-98
lines changed

4 files changed

+77
-98
lines changed

‎components/events/event-card.js

Lines changed: 73 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,93 @@
11
import React from 'react';
22
import styled from 'react-emotion';
3+
import { space } from 'styled-system';
4+
import { Flex, Box } from 'grid-emotion';
35
import TimeIcon from 'react-icons/lib/md/access-time';
46
import format from 'date-fns/format';
57
import LocationIcon from 'react-icons/lib/md/location-on';
68
import AttendeesIcon from 'react-icons/lib/md/people';
79
import TicketIcon from 'react-icons/lib/md/exit-to-app';
810
import StreamIcon from 'react-icons/lib/md/desktop-mac';
911

10-
import { Button, graySecondary } from '../../utils/base.styles';
12+
import { breakpoints, Button, graySecondary } from '../../utils/base.styles';
1113

1214
const Card = styled.div`
13-
display: flex;
14-
flex-direction: row;
15-
flex-wrap: wrap;
16-
max-height: 120px;
17-
justify-content: center;
18-
align-content: stretch;
19-
align-items: center;
20-
margin-top: 20px;
15+
${space};
16+
background: #fff;
2117
border: 1px solid ${graySecondary};
22-
& .photo {
23-
flex: 1 1 auto;
24-
align-self: auto;
25-
max-width: 180px;
18+
& .eventPhoto {
19+
width: 100%;
20+
height: 150px;
21+
vertical-align: middle;
22+
object-fit: cover;
2623
}
27-
& .content {
28-
flex: 3 1 auto;
29-
align-self: stretch;
30-
display: flex;
31-
flex-direction: column;
32-
flex-wrap: wrap;
33-
justify-content: center;
34-
align-content: stretch;
35-
align-items: flex-start;
36-
margin: 5px;
37-
& .title {
38-
order: 1;
39-
flex: 1.5 1 auto;
40-
align-self: flex-start;
41-
font-size: 1.2rem;
42-
vertical-align: top;
43-
font-weight: 400;
44-
}
45-
& .location {
46-
order: 2;
47-
flex: 1 1 auto;
48-
align-self: auto;
49-
font-size: 0.8rem;
50-
}
51-
& .info {
52-
order: 3;
53-
flex: 1 1 auto;
54-
align-self: auto;
55-
display: flex;
56-
width: 100%;
57-
font-size: 0.8rem;
58-
flex-direction: row;
59-
flex-wrap: nowrap;
60-
justify-content: flex-start;
61-
align-content: stretch;
62-
align-items: center;
63-
& .infotext {
64-
flex: 0 1 auto;
65-
align-self: auto;
66-
margin-right: 1rem;
67-
}
68-
& .rsvp {
69-
align-items: flex-end;
70-
flex: 1 1 auto;
71-
align-self: auto;
72-
text-align: right;
73-
}
74-
}
75-
& .icons{
76-
font-size: 1rem;
77-
margin-right: 0.25rem;
78-
}
24+
& .title {
25+
font-size: 1rem;
26+
font-weight: 350;
27+
color: #000;
28+
border-bottom: 1px solid ${graySecondary};
29+
${breakpoints.xs} {
30+
font-size: 0.9rem;
7931
}
8032
}
33+
& .secondaryText {
34+
font-size: 0.8rem;
35+
color: #36434d;
36+
}
37+
& .icons {
38+
font-size: 1.2rem;
39+
margin-right: 0.25rem;
40+
color: #36434d;
41+
}
42+
& .rsvp {
43+
text-align: right;
44+
}
8145
`;
8246

8347
export default props => (
84-
<Card>
85-
<img className="photo" src={props.image} />
86-
<div className="content">
87-
<div className="title">{props.name}</div>
88-
<div className="location">
89-
<LocationIcon className="icons" />
90-
{props.location}
91-
</div>
92-
<div className="info">
93-
<div className="infotext">
94-
<TimeIcon className="icons" />
95-
{props.tense === 'past' ? format(props.time, "ddd MMM Do 'YY") : format(props.time, "h:mm A, ddd MMM Do 'YY")}
96-
</div>
97-
<div className="infotext">
98-
<AttendeesIcon className="icons" />
99-
{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
100-
</div>
101-
{props.tense === 'past' ? null : (
102-
<div className="infotext">
103-
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
104-
{props.online ? 'Free session' : 'Free entry'}
105-
</div>
106-
)}
107-
<div className="rsvp">
108-
<Button href={props.link} ghost>
109-
{props.tense === 'past' ? 'View' : 'RSVP'}
110-
</Button>
111-
</div>
112-
</div>
113-
</div>
48+
<Card m={2}>
49+
<Flex wrap>
50+
<Box width={[1, 1 / 3, 1 / 4, 1 / 4]}>
51+
<img className="eventPhoto" src={props.image} />
52+
</Box>
53+
<Box width={[1, 2 / 3, 3 / 4, 3 / 4]} pb={1} pt={1}>
54+
<Flex column justify={'space-between'} align={'stretch'}>
55+
<Box className="title" pr={1} pl={1}>
56+
{props.name}
57+
</Box>
58+
<Box className="secondaryText" pr={1} pl={1}>
59+
<LocationIcon className="icons" />
60+
<span>{props.location}</span>
61+
</Box>
62+
<Box pr={1} pl={1}>
63+
<Flex wrap>
64+
<Box className="secondaryText" pr={1}>
65+
<TimeIcon className="icons" />
66+
{props.tense === 'past'
67+
? format(props.time, "ddd MMM Do 'YY")
68+
: format(props.time, "h:mm A, ddd MMM Do 'YY")}
69+
</Box>
70+
<Box className="secondaryText" pr={1}>
71+
<AttendeesIcon className="icons" />
72+
{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
73+
</Box>
74+
<Box className="secondaryText" pr={1}>
75+
{props.tense === 'past' ? null : (
76+
<div>
77+
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
78+
{props.online ? 'Free session' : 'Free entry'}
79+
</div>
80+
)}
81+
</Box>
82+
<Box flex="1 1 auto" className="rsvp">
83+
<Button href={props.link} ghost>
84+
{props.tense === 'past' ? 'View' : 'RSVP'}
85+
</Button>
86+
</Box>
87+
</Flex>
88+
</Box>
89+
</Flex>
90+
</Box>
91+
</Flex>
11492
</Card>
11593
);

‎pages/events.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { space } from 'styled-system';
77
import Layout from '../components/common/layout';
88
import BannerSection from '../components/common/banner';
99
import { Container, Title, SubTitle } from '../utils/base.styles';
10-
import { baseEventsURL, futureEventsURL, pastEventsURL, noMeetupImageURL } from '../utils/urls';
10+
import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
1111
import EventCard from '../components/events/event-card';
1212

1313
const EventsSection = styled.section`
@@ -85,7 +85,7 @@ export default class Events extends React.Component {
8585
return (
8686
<EventCard
8787
key={event.id}
88-
image={imageSrc ? imageSrc[1] : noMeetupImageURL}
88+
image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
8989
name={event.name}
9090
location={event.venue ? event.venue.name : 'Online'}
9191
time={event.time}

‎utils/base.styles.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled, { css } from 'react-emotion';
33
export const purplePrimary = '#7657fb';
44
export const purpleSecondary = '#6f19ed';
55
export const whiteFull = '#ffffff';
6+
export const blackPure = '#000000';
67
export const graySecondary = '#b9b9b9';
78

89
export const breakpoints = {

‎utils/urls.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const indexPageEventURL = '/events';
88

99
export const subscribeURL = '/subscribe';
1010

11-
export const imagePlaceholder =
11+
export const imagePlaceholderURL =
1212
'http://res.cloudinary.com/coderplex/image/upload/c_scale,h_400,w_600/v1511345686/website__assets/placeholder.png';
1313

1414
export const heroPatternURL =

0 commit comments

Comments
 (0)