Skip to content

Commit 90f6298

Browse files
isratenedaisrateneda
authored
Merge pull request #75 from cesardlinx/fix-issue-69-72
Fix issues #69 #72
2 parents e2b1e99 + 6133de1 commit 90f6298

24 files changed

Lines changed: 418 additions & 317 deletions

File tree

‎src/components/UI/card/card.js‎

Lines changed: 53 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,50 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types'
3-
import './card.css';
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import styles from "./card.module.css";
44
import { Link } from "gatsby";
55

6-
7-
const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMoreColor, topicFontSize }) => (
8-
<div className="card">
9-
<div className="card-header">
10-
<div className="img-viewport">
6+
const Card = ({
7+
imgURL,
8+
topic,
9+
dateTime,
10+
descriptionTitle,
11+
description,
12+
link,
13+
readMoreColor,
14+
topicFontSize,
15+
viewportHeight,
16+
textSpacing,
17+
lineHeight,
18+
}) => (
19+
<div className={styles.card}>
20+
<div className={styles.card__header}>
21+
<div className={styles.card__imgViewport} style={{ height: viewportHeight }}>
1122
<img src={imgURL} />
1223
</div>
1324
</div>
14-
<div className="card-body">
15-
<h5 className="topic" style={{fontSize: topicFontSize}}>{topic}</h5>
16-
<p className="date">{date}</p>
17-
<div className="description">
18-
<p className="description-text">
19-
<strong className="description-title">{descriptionTitle}:</strong>
20-
{description} <Link to={link} className="read-more" style={{color: readMoreColor}}>Leer más</Link>
25+
<div className={styles.card__body}>
26+
<h5
27+
className={styles.card__topic}
28+
style={{
29+
fontSize: topicFontSize,
30+
marginBottom: textSpacing,
31+
lineHeight,
32+
}}>
33+
{topic}
34+
</h5>
35+
<p className={styles.card__date} style={{ lineHeight }}>
36+
{dateTime}
37+
</p>
38+
<div className={styles.card__description} style={{ marginTop: textSpacing }}>
39+
<p className={styles.card__descriptionText}>
40+
<strong className={styles.card__descriptionTitle}>{descriptionTitle}:</strong>
41+
{description}{" "}
42+
<Link
43+
to={link}
44+
className={styles.card_readmore}
45+
style={{ color: readMoreColor }}>
46+
Leer más
47+
</Link>
2148
</p>
2249
</div>
2350
</div>
@@ -27,18 +54,24 @@ const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMo
2754
Card.propTypes = {
2855
imgURL: PropTypes.string,
2956
topic: PropTypes.string,
30-
date: PropTypes.string,
57+
dateTime: PropTypes.string,
3158
descriptionTitle: PropTypes.string,
3259
description: PropTypes.string,
3360
link: PropTypes.string,
3461
readMoreColor: PropTypes.string,
35-
}
62+
viewportHeight: PropTypes.string,
63+
textSpacing: PropTypes.string,
64+
lineHeight: PropTypes.string,
65+
};
3666

3767
Card.defaultProps = {
3868
date: null,
39-
descriptionTitle: 'Descripción',
69+
descriptionTitle: "Descripción",
4070
readMoreColor: "#27ae60",
41-
topicFontSize: "2rem"
42-
}
71+
topicFontSize: "2rem",
72+
viewportHeight: "136.13px",
73+
textSpacing: "0.5em",
74+
lineHeight: "auto",
75+
};
4376

4477
export default Card;

src/components/UI/card/card.css renamed to src/components/UI/card/card.module.css

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,55 +8,57 @@
88
user-select: none;
99
}
1010

11-
.card-header {
11+
.card__header {
1212
width: 100%;
1313
padding: 24px 24px 15px;
1414
}
1515

16-
.card .img-viewport {
16+
.card__img--viewport {
1717
width: 100%;
1818
height: 136.13px;
1919
overflow: hidden;
2020
border-radius: 15px;
2121
}
2222

23-
.card img {
23+
.card__img {
2424
width: 100%;
2525
display: block;
2626
}
2727

28-
.card-body {
28+
.card__body {
2929
padding: 0 24px 24px 24px;
3030
}
3131

32-
.card-body .topic {
32+
.card__topic {
3333
font-weight: bold;
34-
margin-bottom: .5em;
3534
font-family: "Roboto", sans-serif;
3635
}
3736

38-
.card-body .date {
37+
.card__date {
3938
color: #666363;
39+
font-weight: bold;
4040
}
4141

42-
.description-title {
42+
.card__description--title {
4343
margin-right: .5em;
4444
}
4545

46-
.description {
46+
.card__description {
4747
overflow: hidden;
4848
max-height: 140px;
49-
margin-top: .5em;
5049
}
5150

52-
.description-text {
51+
.card__description--text {
5352
overflow: hidden;
5453
text-overflow: ellipsis;
5554
line-height: 1.1;
5655
font-family: "Roboto", sans-serif;
5756
}
5857

59-
.read-more {
60-
font-weight: bold;
58+
.card__readmore {
6159
margin-left: .3em;
6260
}
61+
62+
.card__description--text a {
63+
font-weight: bold;
64+
}

‎src/components/cities-section/cities-section.js‎

Lines changed: 8 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,18 @@
11
import React from 'react';
2-
import './cities-section.css';
32
import Card from '../UI/card/card';
4-
import ambatoImg from '../../images/cities/ambato.jpg';
5-
import cuencaImg from '../../images/cities/cuenca.jpg';
6-
import guayaquilImg from '../../images/cities/guayaquil.jpg';
7-
import latacungaImg from '../../images/cities/latacunga.jpg';
8-
import lojaImg from '../../images/cities/loja.jpg';
9-
import quitoImg from '../../images/cities/quito.jpg';
10-
import riobambaImg from '../../images/cities/riobamba.jpg';
113
import Carousel from '../UI/carousel/carousel';
124
import bracketsWidget from '../../images/widgets/brackets.svg'
135
import timesYellowWidget from '../../images/widgets/times-yellow.svg'
146
import timesPurpleWidget from '../../images/widgets/times-purple.svg'
7+
import styles from './cities-section.module.css'
8+
import cities from '../../constants/cities';
159

1610
const CitiesSection = () => {
17-
const cities = [
18-
{
19-
imgURL: quitoImg,
20-
topic: 'Quito.js',
21-
description:
22-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
23-
link: '#',
24-
},
25-
{
26-
imgURL: guayaquilImg,
27-
topic: 'Guayaquil.js',
28-
description:
29-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
30-
link: '#',
31-
},
32-
{
33-
imgURL: cuencaImg,
34-
topic: 'Cuenca.js',
35-
description:
36-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
37-
link: '#',
38-
},
39-
{
40-
imgURL: lojaImg,
41-
topic: 'Loja.js',
42-
description:
43-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
44-
link: '#',
45-
},
46-
{
47-
imgURL: riobambaImg,
48-
topic: 'Riobamba.js',
49-
description:
50-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
51-
link: '#',
52-
},
53-
{
54-
imgURL: ambatoImg,
55-
topic: 'Ambato.js',
56-
description:
57-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
58-
link: '#',
59-
},
60-
{
61-
imgURL: latacungaImg,
62-
topic: 'Latacunga.js',
63-
description:
64-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
65-
link: '#',
66-
},
67-
];
11+
6812
return (
69-
<section className="cities-section ec-container">
70-
<img className="small-widget times-yellow" src={timesYellowWidget} />
71-
<h2 className="section-title">Ciudades</h2>
13+
<section className={`ec-container ${styles.cities}`}>
14+
<img className={`small-widget ${styles.widget__timesYellow}`} src={timesYellowWidget} />
15+
<h2 className={`section-title ${styles.cities__title}`}>Ciudades</h2>
7216
<Carousel>
7317
{cities.map(({ imgURL, topic, description, link }) => (
7418
<Card
@@ -80,8 +24,8 @@ const CitiesSection = () => {
8024
/>
8125
))}
8226
</Carousel>
83-
<img className="small-widget bracket" src={bracketsWidget} />
84-
<img className="small-widget times-purple" src={timesPurpleWidget} />
27+
<img className={`small-widget ${styles.widget__bracket}`} src={bracketsWidget} />
28+
<img className={`small-widget ${styles.widget__timesPurple}`} src={timesPurpleWidget} />
8529
</section>
8630
);
8731
};

src/components/cities-section/cities-section.css renamed to src/components/cities-section/cities-section.module.css

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
.cities-section {
1+
.cities {
22
background: #fff;
33
height: 840px;
44
padding-top: 10em;
55
position: relative;
66
}
77

8-
.cities-section .section-title {
8+
.cities__title {
99
margin-bottom: 1em;
1010
}
1111

12+
1213
/* Widgets */
13-
.bracket {
14+
15+
.widget__bracket {
1416
bottom: 38.5em;
1517
right: 13em;
1618
}
1719

18-
.times-yellow {
20+
.widget__times--yellow {
1921
bottom: 25em;
2022
left: 22.4em;
2123
z-index: 0;
2224
}
2325

24-
.times-purple {
26+
.widget__times--purple {
2527
bottom: 2em;
2628
right: 31em;
27-
}
29+
}

‎src/components/community-section/community-section.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
justify-content: space-between;
6767
}
6868

69-
.call-to-action .community-button {
69+
.call-to-action button {
7070
margin-bottom: 1em;
7171
}
7272

@@ -75,7 +75,7 @@
7575
flex-direction: row;
7676
}
7777

78-
.call-to-action .community-button {
78+
.call-to-action button {
7979
margin-bottom: 0;
8080
}
8181
}

0 commit comments

Comments
 (0)