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 6f38915

Browse files
vinaypuppalvinaypuppal
committed
migarte to grid-styled
1 parent fdf29ce commit 6f38915

File tree

15 files changed

+103
-83
lines changed

15 files changed

+103
-83
lines changed

‎components/common/banner.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const BannerSection = styled.section`
1212
`;
1313

1414
export default ({ title, subTitle, textInverted = false }) => (
15-
<BannerSection py={[2, 3]} px={[2, 1]}>
15+
<BannerSection py={[3, 4]} px={[3, 2]}>
1616
<Container>
1717
<Title inverted={textInverted}>{title}</Title>
1818
<SubTitle inverted={textInverted}>{subTitle}</SubTitle>

‎components/common/footer/index.js

Lines changed: 14 additions & 6 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 { Flex, Box } from 'grid-emotion';
3+
import { Flex, Box } from 'grid-styled/emotion';
44
import FaFacebook from 'react-icons/lib/fa/facebook';
55
import FaYoutube from 'react-icons/lib/fa/youtube-play';
66
import FaGithub from 'react-icons/lib/fa/github-alt';
@@ -121,6 +121,7 @@ export default class FooterBar extends React.Component {
121121
emailSubmittingError: '',
122122
subscriberEmailPosted: false,
123123
};
124+
124125
handleChange = event => {
125126
this.setState({
126127
subscribersEmail: event.target.value,
@@ -132,7 +133,7 @@ export default class FooterBar extends React.Component {
132133
e.preventDefault();
133134
console.log('submitting....');
134135
this.setState({ emailSubmittingError: '' });
135-
const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
136+
const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
136137
const email = this.state.subscribersEmail;
137138
if (!email) {
138139
this.setState({
@@ -169,12 +170,19 @@ export default class FooterBar extends React.Component {
169170
});
170171
}
171172
}
173+
172174
render() {
173175
return (
174176
<Footer>
175177
<Container>
176-
<Flex wrap py={[0, 3]}>
177-
<Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
178+
<Flex flexWrap="wrap" py={[0, 4]}>
179+
<Flex
180+
alignItems="center"
181+
flexDirection="column"
182+
justifyContent="center"
183+
width={[1, 1, 1 / 2]}
184+
px={[3, 4]}
185+
py={[4, 0]}>
178186
<Title>
179187
We are constantly updating our platform.
180188
<br />Do subscribe to stay informed.
@@ -198,8 +206,8 @@ export default class FooterBar extends React.Component {
198206
<p>{this.state.emailSubmittingError}</p>
199207
</Message>
200208
</Flex>
201-
<Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
202-
<Box p={[1, 2]}>
209+
<Flex className="follow" alignItems="center" justifyContent="center" width={[1, 1, 1 / 2]}>
210+
<Box p={[2, 3]}>
203211
<Title>Follow Us</Title>
204212
<SocialLinks>
205213
<SocialLink>

‎components/common/header/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,14 @@ class NavBar extends React.Component {
6363
},
6464
],
6565
};
66+
6667
toggleMenu = e => {
6768
e.preventDefault();
6869
this.setState(state => {
6970
return { menuOpen: !state.menuOpen };
7071
});
7172
};
73+
7274
render() {
7375
const pathName = this.props.router.pathname;
7476
const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
@@ -80,8 +82,7 @@ class NavBar extends React.Component {
8082
)} | Learn ${this.props.router.query.subject[0].toUpperCase() +
8183
this.props.router.query.subject.slice(1)} | Coderplex`
8284
: metaData.title;
83-
const description = metaData.description;
84-
const image = metaData.image;
85+
const { description, image } = metaData;
8586
return (
8687
<Headroom>
8788
<Header>

‎components/events/event-card.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'react-emotion';
33
import { space, fontSize } from 'styled-system';
4-
import { Flex, Box } from 'grid-emotion';
4+
import { Flex, Box } from 'grid-styled/emotion';
55
import TimeIcon from 'react-icons/lib/fa/calendar';
66
import format from 'date-fns/format';
77
import LocationIcon from 'react-icons/lib/md/location-on';
@@ -75,7 +75,7 @@ const CardTitle = styled.h3`
7575
`;
7676

7777
export default props => (
78-
<Card my={[3]} wrap>
78+
<Card my={[4]} flexWrap="wrap">
7979
{props.showImg && (
8080
<Flex align="streach" width={[1, 1, 1 / 4]}>
8181
<img
@@ -88,50 +88,50 @@ export default props => (
8888
</Flex>
8989
)}
9090
<Box className="eventDetails" width={props.showImg ? [1, 1, 3 / 4] : [1, 1, 1]}>
91-
<Flex className="eventDetails" column justify="space-between">
91+
<Flex className="eventDetails" flexDirection="column" justifyContent="space-between">
9292
<CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
9393
{truncateString(props.name, 64)}
9494
</CardTitle>
95-
<Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
95+
<Box fontSize={[12, 14]} className="secondaryText" px={[3]} my={props.showImg ? [2, 2, 0] : [2, 2, 2]}>
9696
<LocationIcon className="icons" />
9797
<span>{truncateString(props.location, 55)}</span>
9898
</Box>
99-
<Box px={2} pb={[2, 1]}>
100-
<Flex wrap>
99+
<Box px={3} pb={[3, 2]}>
100+
<Flex flexWrap="wrap">
101101
<Box
102-
fontSize={[12, 14, 16]}
102+
fontSize={[12, 14]}
103103
width={props.showImg ? [1, 1, 0.38] : [1, 1, 1 / 2]}
104104
className="secondaryText"
105-
pr={1}
105+
pr={2}
106106
mr={[0]}
107-
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
107+
my={props.showImg ? [2, 2, 0] : [2, 2, 2]}>
108108
<TimeIcon className="icons" />
109109
<span>{format(props.time, "ddd MMM Do 'YY, h:mm A")}</span>
110110
</Box>
111111
<Box
112-
fontSize={[12, 14, 16]}
112+
fontSize={[12, 14]}
113113
width={props.showImg ? [1, 1, 0.24] : [1, 1, 1 / 2]}
114114
className="secondaryText"
115-
pr={1}
115+
pr={2}
116116
mx={[0]}
117-
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
117+
my={props.showImg ? [2, 2, 0] : [2, 2, 2]}>
118118
<AttendeesIcon className="icons" />
119119
<span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
120120
</Box>
121121
<Box
122-
fontSize={[12, 14, 16]}
122+
fontSize={[12, 14]}
123123
width={props.showImg ? [1, 1, 0.21] : [1, 1, 1 / 2]}
124124
className="secondaryText"
125-
pr={1}
125+
pr={2}
126126
mx={[0]}
127-
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
127+
my={props.showImg ? [2, 2, 0] : [2, 2, 2]}>
128128
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
129129
<span>{props.online ? 'Free session' : 'Free entry'}</span>
130130
</Box>
131131
<Box
132-
fontSize={[12, 14, 16]}
132+
fontSize={[12, 14]}
133133
width={props.showImg ? [1, 1, 0.17] : [1, 1, 1 / 2]}
134-
mt={props.showImg ? [1, 1, 0] : [1, 1, 1]}
134+
mt={props.showImg ? [2, 2, 0] : [2, 2, 2]}
135135
className="rsvp">
136136
<Button href={props.link} inverted medium>
137137
{props.tense === 'past' ? 'View' : 'RSVP'}

‎components/events/event-content-loader.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import ContentLoader from 'react-content-loader';
33
import styled from 'react-emotion';
44
import { space } from 'styled-system';
5-
import { Flex } from 'grid-emotion';
5+
import { Flex } from 'grid-styled/emotion';
66

77
import { breakpoints, graySecondary } from '../../utils/base.styles';
88

@@ -23,7 +23,7 @@ const EventLoader = styled(Flex)`
2323
`;
2424

2525
export default () => (
26-
<EventLoader my={[3]} wrap>
26+
<EventLoader my={[4]} flexWrap="wrap">
2727
<ContentLoader width="100%" speed={4} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
2828
<rect x="0" y="0" rx="5" ry="5" width="200" height="132" />
2929
<rect x="207" y="7" rx="4" ry="4" width="550" height="20" />

‎components/learn/subject-banner.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'react-emotion';
33
import { space } from 'styled-system';
4-
import { Flex, Box } from 'grid-emotion';
4+
import { Flex, Box } from 'grid-styled/emotion';
55

66
import { baseContainer, Title, SubTitle, Button, breakpoints } from '../../utils/base.styles';
77

@@ -42,7 +42,7 @@ const Container = styled.section`
4242
export default ({ title, subTitle, icon }) => (
4343
<BannerSection py={[1, 3]} px={[2, 1]}>
4444
<Container>
45-
<Flex wrap={false} align={'flex-end'}>
45+
<Flex alignItems={'flex-end'}>
4646
<Box flex={'0 1 auto'}>
4747
<div className="logo">
4848
<i className={icon} />

‎components/learn/subject-card.js

Lines changed: 4 additions & 4 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 { Flex, Box } from 'grid-emotion';
3+
import { Flex, Box } from 'grid-styled/emotion';
44
import { space, fontSize } from 'styled-system';
55
import Link from 'next/link';
66
import LearningIcon from 'react-icons/lib/fa/book';
@@ -85,12 +85,12 @@ export default ({ subject }) => (
8585
<p className="subtitle" fontSize={[12, 14, 16]}>
8686
{subject.domain}
8787
</p>
88-
<Flex className="stats" wrap>
89-
<Box pr={[1]} pb={[1]} fontSize={[12, 14, 16]}>
88+
<Flex className="stats" flexWrap="wrap">
89+
<Box pr={[1]} pb={[2]} fontSize={[12, 14]}>
9090
<LearningIcon className="icons" />
9191
<span>20 learning</span>
9292
</Box>
93-
<Box fontSize={[12, 14, 16]}>
93+
<Box fontSize={[12, 14]}>
9494
<EstimateIcon className="icons" />
9595
<span>20 hours</span>
9696
</Box>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"emotion": "^9.2.6",
5151
"emotion-server": "^9.2.6",
5252
"get-port": "^4.0.0",
53-
"grid-styled/emotion": "^5.0.2",
53+
"grid-styled": "^5.0.2",
5454
"isomorphic-unfetch": "2.1.0",
5555
"lodash.take": "^4.1.1",
5656
"marked": "^0.4.0",

‎pages/events.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import fetch from 'isomorphic-unfetch';
3-
import { Flex, Box } from 'grid-emotion';
3+
import { Flex, Box } from 'grid-styled/emotion';
44
import styled from 'react-emotion';
55
import { space } from 'styled-system';
66

@@ -74,13 +74,15 @@ export default class Events extends React.Component {
7474
return [1, 2].map(i => {
7575
return <EventLoader key={i} />;
7676
});
77-
} else if (events.length === 0) {
77+
}
78+
if (events.length === 0) {
7879
return (
7980
<SubTitle inverted color="#222">
8081
No upcoming events yet, check back later
8182
</SubTitle>
8283
);
83-
} else if (events === null) {
84+
}
85+
if (events === null) {
8486
return (
8587
<SubTitle inverted color="#222">
8688
Oops! somethings went wrong while fetching the events
@@ -90,12 +92,13 @@ export default class Events extends React.Component {
9092
return (
9193
<div>
9294
{events.slice(0, loadLimit).map(event => {
93-
console.log(event);
9495
const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
9596
const imgs = regexForImageSrc.exec(event.description);
9697
const imageSrc = imgs
9798
? imgs[1]
98-
: event.featured_photo ? event.featured_photo.photo_link : imagePlaceholderURL;
99+
: event.featured_photo
100+
? event.featured_photo.photo_link
101+
: imagePlaceholderURL;
99102
return (
100103
<EventCard
101104
showImg
@@ -136,21 +139,21 @@ export default class Events extends React.Component {
136139
return (
137140
<Layout>
138141
<BannerSection title="Online & Offline Events" subTitle="Because you cannot change the world alone" />
139-
<EventsSection py={[2, 2]} px={[2, 1]}>
142+
<EventsSection py={[3, 3]} px={[3, 2]}>
140143
<Container>
141-
<Flex pb={[2, 2]} direction="column" align="center" justify="center">
144+
<Flex pb={[2, 2]} flexDirection="column" alignItems="center" justifyContent="center">
142145
<Box width={[1, 0.75]}>
143-
<h3 className="event_type_title" inverted color="#222">
146+
<h3 className="event_type_title" color="#222">
144147
Upcoming Events
145148
</h3>
146149
{this.renderEvents(this.state.futureEvents, this.state.futureEventsLoadLimit)}
147150
{!loading &&
148151
this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
149152
</Box>
150153
</Flex>
151-
<Flex direction="column" align="center" justify="center">
154+
<Flex flexDirection="column" alignItems="center" justifyContent="center">
152155
<Box width={[1, 0.75]}>
153-
<h3 className="event_type_title" inverted color="#222">
156+
<h3 className="event_type_title" color="#222">
154157
Recent Events
155158
</h3>
156159
{this.renderEvents(this.state.pastEvents, this.state.pastEventsLoadLimit)}

0 commit comments

Comments
 (0)