Implementação do card de eventos

[joaovictorsl]

Qual o objetivo dessa Pull Request?

• Removi código que considerei redundante em routes.js
• Removi console.log de members que provavelmente foi utilizado para testes e esquecido
• Adicionei a página de eventos
• Adicionei o card de eventos

Que problema está resolvendo?

#181

Como pode ser manualmente testado?

Inicie a aplicação e entre na página de eventos

Screenshots

Tipos de mudanças

• Conserta um bug
• Nova funcionalidade
• Refatoração de código
• Atualiza documentação

[joaovictorsl]

Opa, @RodrigoEC, eu fiz o card mas não cuidei de responsividade. Como não tem o esqueleto eu não tive ideia de como testaria a responsividade do card 😕.

[RodrigoEC]

OOii @joaovictorsl, então a ideia seria implementar esse card aqui ó:

Eu acho que como o design que tu seguiu e esse não são muito diferentes, na verdade eles são bem parecidos, acho que fica mais tranquilo de refatorar.

Sobre a responsividade, realmente esse card grandão que tu fez fica dificil de fazer a responsividade, porém acredito que esse card menorzinho ele ja caiba certinho numa tela mobile, diminuindo só o tamanho da imagem msm, pra telas menores

[joaovictorsl]

[RodrigoEC]

@joaovictorsl revisei visse! Tem algumas alterações importantes como a adição do defaultProps e propTypes e o uso de rem ao inves de % e vw 😄.

Quanto a responsividade ela funciona certinho com o tamanho que ta esse card. 🚀

[RodrigoEC]

Suggested change

	<Card>
	<UpperRow>
	<ImageSide>
	<EventImage src={org_image} alt={name} />
	</ImageSide>
	<InfoSide>
	<Title>{name}</Title>
	<Date>Data do evento - {init_date}</Date>
	</InfoSide>
	</UpperRow>
	<LowerRow>
	<Description>{description}</Description>
	</LowerRow>
	</Card>
	<Card>
	<UpperRow>
	<ImageSide>
	<EventImage src={org_image} alt={name} />
	</ImageSide>
	<InfoSide>
	<Title>{name}</Title>
	<Date>Data do evento - {init_date}</Date>
	</InfoSide>
	</UpperRow>
	<LowerRow>
	<Description>{description}</Description>
	</LowerRow>
	</Card>

[RodrigoEC]

Seria melhor colocar os props padrão no final do arquivo usando EventCard.defaultProps como está no arquivo do componente Carousel

Suggested change

	export const EventCard = ({
	name = "Andromedev 2020",
	init_date = "dd/mm/yyyy",
	end_date = "dd/mm/yyyy",
	org_image = tempImg,
	description = "O Andromedev é um evento organizado pela organização estudantil OpenDevUFCG com o intuito de incentivar a participação de estudantes da Universidade Federal de Campina Grande (UFCG) em projetos open source. O evento ocorre em um período de nove semanas nas quais os estudantes colaboram com projetos open source através de um sistema de mentoria."
	export const EventCard = ({ name, init_date, end_date, org_image

[RodrigoEC]

Adiciona por favor o EventCard.propTypes, pra tu ter referencia, usa o arquivo do componente Carousel

[RodrigoEC]

Aqui a gente pode resumir esse Card em:

Suggested change

	export const Card = styled.div`
	border-radius: 8px;
	background-color:#F9F9F9;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	width: 29.6vw;
	height: 22.2vw;
	position: absolute;
	left: 100px;
	@media screen and (max-width: 1181px) {
	height: 24vw;
	}
	@media screen and (max-width: 944px) {
	height: 26vw;
	}
	@media screen and (max-width: 778px) {
	height: 28vw;
	}
	@media screen and (max-width: 726px) {
	height: 30vw;
	}
	@media screen and (max-width: 609px) {
	height: 32vw;
	}
	@media screen and (max-width: 535px) {
	height: 34vw;
	}
	`;
	export const Card = styled.div`
	display: flex;
	flex-direction: column;
	max-width: 24rem;
	width: 100%;
	border-radius: 8px;
	background-color: #f9f9f9;
	box-shadow: 0px 4px 8px #00000025;
	padding: 0.75rem;
	box-sizing: border-box;
	`;

[RodrigoEC]

É bom evitar padding em porcentagem. Nesse caso podemos tirar o padding por que adicionamos no Card um padding geral.

Suggested change

	export const UpperRow = styled.div`
	display: flex;
	flex-direction: row;
	padding: .5%;
	`;
	export const UpperRow = styled.div`
	display: flex;
	`;

[RodrigoEC]

No caso do ImageSide, podemos retira-lo adicionando no EventImage o atributo de margin :)

Suggested change

	export const ImageSide = styled.div`
	padding: .4vw;
	`;
	export const EventImage = styled.img`
	border-radius: 8px;
	border: 2px solid rgba(52, 53, 135, 0.3);
	width: 11.3vw;
	height: 11.3vw;
	`;
	export const EventImage = styled.img`
	border-radius: 8px;
	border: 2px solid rgba(52, 53, 135, 0.3);
	max-width: 10rem;
	margin: 0 8px 8px 0;
	`;

[RodrigoEC]

Suggested change

padding: .4vw;

[RodrigoEC]

É bom mudar a medida vw por px ou rem

Suggested change

	export const Title = styled.h1`
	font-family: 'Roboto';
	font-weight: 700;
	letter-spacing: 0.125em;
	color: #393A6E;
	font-size: 1.3vw;
	line-height: 1.6vw;
	`;
	export const Title = styled.h1`
	font-weight: 700;
	letter-spacing: 0.125em;
	color: #393a6e;
	font-size: 16px;
	line-height: 1.25rem;
	`;

[RodrigoEC]

Suggested change

	export const Date = styled.h2`
	font-family: 'Roboto';
	font-weight: 700;
	letter-spacing: 0.125em;
	color: #7E7FC1;
	font-size: .9vw;
	line-height: 1vw;
	`;
	export const Description = styled.span`
	font-family: 'Roboto';
	font-weight: 400;
	font-size: .9vw;
	line-height: 1.27vw;
	color: #2A2A2A;
	`;
	export const Date = styled.h2`
	font-weight: 700;
	letter-spacing: 0.125em;
	color: #7e7fc1;
	font-size: 12px;
	line-height: 1vw;
	`;
	export const Description = styled.span`
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25rem;
	text-align: justify;
	color: #2a2a2a;
	`;

[RodrigoEC]

Ao inves de implementar o Title nesse arquivo seria melhor utilizar o SectionTitle no arquivo ### src/components/index.js

Suggested change

	export const Title = styled.h1`
	font-family: 'Roboto';
	font-weight: 700;
	color: #343587;
	font-size: 2rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	`;