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 248340e

Browse files
vinaypuppalvinaypuppal
committed
make events cards responsive
1 parent a48cb8d commit 248340e

File tree

2 files changed

+90
-59
lines changed

2 files changed

+90
-59
lines changed

‎components/events/event-card.js

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import styled from 'react-emotion';
3-
import { space } from 'styled-system';
3+
import { space, fontSize } from 'styled-system';
44
import { Flex, Box } from 'grid-emotion';
55
import TimeIcon from 'react-icons/lib/md/access-time';
66
import format from 'date-fns/format';
@@ -10,28 +10,30 @@ import TicketIcon from 'react-icons/lib/md/exit-to-app';
1010
import StreamIcon from 'react-icons/lib/md/desktop-mac';
1111

1212
import { breakpoints, Button, graySecondary } from '../../utils/base.styles';
13+
import truncateString from '../../utils';
1314

14-
const Card = styled.div`
15+
const Card = styled(Flex)`
1516
${space};
1617
background: #fff;
1718
border: 1px solid ${graySecondary};
19+
min-height: 120px;
1820
& .eventPhoto {
21+
height: 120px;
1922
width: 100%;
20-
height: 150px;
21-
vertical-align: middle;
22-
object-fit: cover;
23-
}
24-
& .title {
25-
font-size: 1rem;
26-
font-weight: 350;
27-
color: #000;
28-
border-bottom: 1px solid ${graySecondary};
23+
${breakpoints.sm} {
24+
object-fit: cover;
25+
height: 200px;
26+
}
2927
${breakpoints.xs} {
30-
font-size: 0.9rem;
28+
height: 200px;
29+
object-fit: cover;
3130
}
3231
}
32+
& .eventDetails {
33+
min-height: 120px;
34+
}
3335
& .secondaryText {
34-
font-size: 0.8rem;
36+
${fontSize};
3537
color: #36434d;
3638
}
3739
& .icons {
@@ -41,53 +43,79 @@ const Card = styled.div`
4143
}
4244
& .rsvp {
4345
text-align: right;
46+
${breakpoints.sm} {
47+
text-align: left;
48+
& > * {
49+
width: 100%;
50+
display: block;
51+
text-align: center;
52+
margin: 0;
53+
}
54+
}
55+
${breakpoints.xs} {
56+
text-align: left;
57+
& > * {
58+
width: 100%;
59+
display: block;
60+
text-align: center;
61+
margin: 0;
62+
}
63+
}
4464
}
4565
`;
4666

67+
const CardTitle = styled.h3`
68+
${space};
69+
font-weight: 650;
70+
border-bottom: 1px solid ${graySecondary};
71+
`;
72+
4773
export default props => (
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" />
74+
<Card my={[3]} wrap>
75+
<Flex align="streach" width={[1, 1, 1 / 4]}>
76+
<img
77+
className="eventPhoto"
78+
src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
79+
srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
80+
props.image
81+
} 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
82+
/>
83+
</Flex>
84+
<Box className="eventDetails" width={[1, 1, 3 / 4]}>
85+
<Flex className="eventDetails" column justify="space-between">
86+
<CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
87+
{truncateString(props.name, 64)}
88+
</CardTitle>
89+
<Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={[1, 1, 0]}>
90+
<LocationIcon className="icons" />
91+
<span>{props.location}</span>
92+
</Box>
93+
<Box px={2} pb={[2, 1]}>
94+
<Flex wrap>
95+
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.33]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
96+
<TimeIcon className="icons" />
97+
<span>
6698
{props.tense === 'past'
6799
? format(props.time, "ddd MMM Do 'YY")
68100
: 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>
101+
</span>
102+
</Box>
103+
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
104+
<AttendeesIcon className="icons" />
105+
<span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
106+
</Box>
107+
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
108+
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
109+
<span>{props.online ? 'Free session' : 'Free entry'}</span>
110+
</Box>
111+
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.17]} mt={[1, 1, 0]} className="rsvp">
112+
<Button href={props.link} ghost small>
113+
{props.tense === 'past' ? 'View' : 'RSVP'}
114+
</Button>
115+
</Box>
116+
</Flex>
117+
</Box>
118+
</Flex>
119+
</Box>
92120
</Card>
93121
);

‎utils/base.styles.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const purplePrimary = '#7657fb';
44
export const purpleSecondary = '#6f19ed';
55
export const whiteFull = '#ffffff';
66
export const blackPure = '#000000';
7-
export const graySecondary = '#b9b9b9';
7+
export const graySecondary = '#ddd';
88

99
export const breakpoints = {
1010
xs: '@media screen and (max-width: 40em)',
@@ -43,6 +43,7 @@ export const baseButton = css`
4343
padding: 0.2rem 1rem;
4444
color: #fff;
4545
text-decoration: none;
46+
transition: all 0.25s;
4647
&:hover {
4748
background: #6f19ed;
4849
font-weight: normal;
@@ -53,14 +54,16 @@ export const Button = styled.a`
5354
${baseButton};
5455
background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
5556
color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
56-
padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
57-
font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')}
58-
outline:${props => (props.ghost ? `1px solid ${purpleSecondary}` : 'none')}
59-
outline-offset:${props => (props.ghost ? '-1px' : '0px')}
57+
padding: ${props =>
58+
props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : props.small ? '0.3rem 1.1rem' : '0.2rem 1rem'};
59+
font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')};
60+
font-weight: ${props => (props.ghost ? 600 : 300)};
61+
border: ${props => (props.ghost ? `2px solid ${purpleSecondary}` : 'none')};
6062
cursor: pointer;
6163
user-select: none;
6264
-webkit-touch-callout: none;
6365
&:hover {
66+
font-weight: ${props => (props.ghost ? 600 : 300)};
6467
background: ${props => (props.inverted ? purpleSecondary : props.ghost ? purpleSecondary : '#eee')};
6568
color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
6669
}

0 commit comments

Comments
 (0)