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 3bdc1a6

Browse files
author
z
committed
event card with css flex
1 parent 40eaa41 commit 3bdc1a6

File tree

3 files changed

+81
-69
lines changed

3 files changed

+81
-69
lines changed

‎components/events/event-card.js

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import styled from 'react-emotion';
33
import TimeIcon from 'react-icons/lib/md/access-time';
4+
import format from 'date-fns/format';
45
import LocationIcon from 'react-icons/lib/md/location-on';
56
import AttendeesIcon from 'react-icons/lib/md/people';
67
import TicketIcon from 'react-icons/lib/md/exit-to-app';
@@ -9,74 +10,80 @@ import StreamIcon from 'react-icons/lib/md/desktop-mac';
910
import { Button, graySecondary } from '../../utils/base.styles';
1011

1112
const Card = styled.div`
12-
text-decoration: none;
13-
width: 100%;
14-
min-height: 150px;
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;
1520
margin-top: 20px;
16-
padding-right: 10px;
17-
display: grid;
18-
grid-template-columns: 1fr 2.5fr;
19-
grid-template-rows: 1.2fr 1fr 1fr;
20-
grid-template-areas:
21-
'photo title'
22-
'photo location'
23-
'photo info';
24-
background: #fff;
2521
border: 1px solid ${graySecondary};
26-
transition: all 0.25s;
2722
& .photo {
28-
grid-area: photo;
29-
object-fit: cover;
30-
height: 100%;
31-
width: 100%;
32-
}
33-
& .title {
34-
margin-left: 10px;
35-
grid-area: title;
36-
font-size: 1.5rem;
37-
color: #000;
38-
font-weight: 400;
39-
padding-top: 10px;
40-
}
41-
& .location {
42-
margin-left: 10px;
43-
grid-area: location;
44-
padding-top: 10px;
23+
flex: 1 1 auto;
24+
align-self: auto;
25+
max-width: 180px;
4526
}
46-
& .info {
47-
margin-left: 10px;
48-
grid-area: info;
27+
& .content {
28+
flex: 3 1 auto;
29+
align-self: stretch;
4930
display: flex;
50-
flex-direction: row;
51-
flex-wrap: nowrap;
52-
justify-content: flex-start;
31+
flex-direction: column;
32+
flex-wrap: wrap;
33+
justify-content: center;
5334
align-content: stretch;
54-
align-items: center;
55-
}
56-
& .infotext {
57-
order: 0;
58-
flex: 0 1 auto;
59-
align-self: auto;
60-
margin-right: 1rem;
61-
}
62-
& .rsvp {
63-
order: 0;
64-
align-items: flex-end;
65-
flex: 1 1 auto;
66-
align-self: auto;
67-
text-align: right;
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+
}
6879
}
69-
& .icons{
70-
font-size: 1.1rem;
71-
margin-right: 0.25rem;
7280
}
73-
}
7481
`;
7582

7683
export default props => (
77-
<div>
78-
<Card>
79-
<img className="photo" src={props.image} />
84+
<Card>
85+
<img className="photo" src={props.image} />
86+
<div className="content">
8087
<div className="title">{props.name}</div>
8188
<div className="location">
8289
<LocationIcon className="icons" />
@@ -85,7 +92,7 @@ export default props => (
8592
<div className="info">
8693
<div className="infotext">
8794
<TimeIcon className="icons" />
88-
{props.time}
95+
{props.tense === 'past' ? format(props.time, "ddd MMM Do 'YY") : format(props.time, "h:mm A, ddd MMM Do 'YY")}
8996
</div>
9097
<div className="infotext">
9198
<AttendeesIcon className="icons" />
@@ -103,6 +110,6 @@ export default props => (
103110
</Button>
104111
</div>
105112
</div>
106-
</Card>
107-
</div>
113+
</div>
114+
</Card>
108115
);

‎pages/events.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import fetch from 'isomorphic-unfetch';
33
import { Flex, Box } from 'grid-emotion';
44
import styled from 'react-emotion';
55
import { space } from 'styled-system';
6-
import format from 'date-fns/format';
76

87
import Layout from '../components/common/layout';
98
import BannerSection from '../components/common/banner';
@@ -65,13 +64,18 @@ export default class Events extends React.Component {
6564
Loading..
6665
</SubTitle>
6766
);
68-
}
69-
if (events.length === 0) {
67+
} else if (events.length === 0) {
7068
return (
7169
<SubTitle inverted color="#222">
7270
No upcoming events yet, check back later
7371
</SubTitle>
7472
);
73+
} else if (events === null) {
74+
return (
75+
<SubTitle inverted color="#222">
76+
Oops! somethings went wrong while fetching the events
77+
</SubTitle>
78+
);
7579
}
7680
return (
7781
<div>
@@ -84,7 +88,7 @@ export default class Events extends React.Component {
8488
image={imageSrc ? imageSrc[1] : noMeetupImageURL}
8589
name={event.name}
8690
location={event.venue ? event.venue.name : 'Online'}
87-
time={format(event.time, "h:mm A, ddd MMM Do 'YY")}
91+
time={event.time}
8892
attendees={event.yes_rsvp_count}
8993
tense={event.status}
9094
link={event.link}

‎utils/base.styles.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled, { css } from 'react-emotion';
22

33
export const purplePrimary = '#7657fb';
4+
export const purpleSecondary = '#6f19ed';
45
export const whiteFull = '#ffffff';
56
export const graySecondary = '#b9b9b9';
67

@@ -50,16 +51,16 @@ export const baseButton = css`
5051
export const Button = styled.a`
5152
${baseButton};
5253
background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
53-
color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
54+
color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
5455
padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
55-
font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
56-
outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
57-
outline-offset:${props => (props.ghost ? '-3px' : '0px')}
56+
font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')}
57+
outline:${props => (props.ghost ? `1px solid ${purpleSecondary}` : 'none')}
58+
outline-offset:${props => (props.ghost ? '-1px' : '0px')}
5859
cursor: pointer;
5960
user-select: none;
6061
-webkit-touch-callout: none;
6162
&:hover {
62-
background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
63+
background: ${props => (props.inverted ? purpleSecondary : props.ghost ? purpleSecondary : '#eee')};
6364
color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
6465
}
6566
`;

0 commit comments

Comments
 (0)