Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] redesigning home page #246

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[WIP] redesigning home page #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f00f720
Revert "Revert "[WIP] redesigning home page""
Dec 8, 2018
9093b13
[WIP] event cards designing
Jan 5, 2019
8d6cfc0
[WIP] card borders’ colors and content hovering
Jan 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"query-string": "^5.1.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-jss": "^8.6.1",
"react-meta-tags": "^0.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
Expand Down
1 change: 1 addition & 0 deletions client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand Down
66 changes: 58 additions & 8 deletions client/src/components/EventList/EventCard/EventCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,83 @@ import {
} from 'reactstrap';
import moment from 'moment';
import { Link } from 'react-router-dom';
// import injectSheet from 'react-jss';

// const styles = {
// bgGradient: {
// background:{
// color: 'black',
// }
// },
// };

// const DATE_FORMAT = 'LL';
const TIME_FORMAT = 'HH.A';
// const DATE_FORMAT = 'LL';
const MONTH = 'MMM';
const DAY = 'DD';

const DATE_FORMAT = 'LLLL';
const EventCard = props => {
const card = props.event;
return (
<Col md="4" className="col-padding">
<Col className="cardFormating col-padding">
<Link to={`/events/${props.event.id}`}>
<Card>
<Card className="bgGradient">
<CardImg
top
width="100%"
src={card.cover}
alt="Card image cap"
height="180"
className="mx-auto pt-3 cardFormating"
/>
<CardBody>
<CardTitle>{card.title}</CardTitle>
<CardText>{card.description}</CardText>
<CardBody className="mx-auto text-justify cardFormating my-3 bg-white">
<CardSubtitle>
<small className="text-muted">
{moment(card.startDatetime).format(DATE_FORMAT)}
<small className="float-right mr-2 text-muted">
<span className="date">
{moment(card.startDatetime).format(DAY)}
</span>
<br />
<span className="month">
{moment(card.startDatetime).format(MONTH)}
</span>
</small>
</CardSubtitle>
<CardTitle>{card.title} </CardTitle>
<span className="text-muted mr-2">
{moment(card.startDatetime).format(TIME_FORMAT)}
</span>
- &nbsp;
<span className="text-muted">
{moment(card.endDatetime).format(TIME_FORMAT)}
</span>
<CardText>{card.description}</CardText>
<CardSubtitle>
<span className="text-muted">
<i className="fas fa-map-marker-alt mr-1" />
{card.location.address}
</span>
</CardSubtitle>
</CardBody>
</Card>
</Link>
</Col>
);
};

// const StyledCard = injectSheet(styles)(EventCard);
// const App = () => <StyledCard />;

// render(<App />, document.getElementById('root'));

export default EventCard;

// export function generateColors() {
// const letters = 'BCDEF'.split('');
// let color = '#';
// for (let i = 0; i < 6; i++) {
// color += letters[Math.floor(Math.random() * letters.length)];
// }

// return color;
// }
146 changes: 74 additions & 72 deletions client/src/containers/Events/Events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,21 @@ import React, { Component } from 'react';
import { Row, Col, Jumbotron, Container } from 'reactstrap';
import { fetchEvents, postEvent } from '../../actions';
import { makeQueryStringTransformable } from '../../utils/utils';
import type { BaseReduxPropTypes } from '../../types/base-props-types';
import { BaseReduxPropTypes } from '../../types/base-props-types';
import { connect } from 'react-redux';
import { EventList } from '../../components/EventList/EventList';
import DropSearch, {
State as DropSearchState,
} from '../../components/DropSearch/DropSearch';

import EventCard from '../../components/EventList/EventCard/EventCard';
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
} from 'reactstrap';
const mainTitle = 'Portal for Tech Communities';
const eventNotFound = 'No events found.';

Expand All @@ -23,92 +31,86 @@ class Events extends Component<Props> {
componentDidMount() {
this.getData();
}
getSortyByOptions = () => {
return [
{
label: 'Start Date',
value: 'startDate',
},
{
label: 'Organisation',
value: 'organisation',
},
{
label: 'Sponsors',
value: 'sponsers',
},
{
label: 'Location',
value: 'location',
},
{
label: 'Tags',
value: 'tags',
},
{
label: 'Time',
value: 'time',
},
];
};
// getSortyByOptions = () => {
// return [
// {
// label: 'Start Date',
// value: 'startDate',
// },
// {
// label: 'Organisation',
// value: 'organisation',
// },
// {
// label: 'Sponsors',
// value: 'sponsers',
// },
// {
// label: 'Location',
// value: 'location',
// },
// {
// label: 'Tags',
// value: 'tags',
// },
// {
// label: 'Time',
// value: 'time',
// },
// ];
// };

handleSearchChange = (searchParams: DropSearchState) => {
if (searchParams) searchParams = makeQueryStringTransformable(searchParams);
this.getData(searchParams);
};
// handleSearchChange = (searchParams: DropSearchState) => {
// if (searchParams) searchParams = makeQueryStringTransformable(searchParams);
// this.getData(searchParams);
// };

getData = e => {
const { dispatch } = this.props;
dispatch(fetchEvents(e));
};

handleSubmit = (event: any) => {
event.preventDefault();
// handleSubmit = (event: any) => {
// event.preventDefault();

const {
title,
description,
startDateTime,
endDateTime,
organisation,
} = event.nativeEvent.target.elements;
// const {
// title,
// description,
// startDateTime,
// endDateTime,
// organisation,
// } = event.nativeEvent.target.elements;

this.props.dispatch(
postEvent({
title: title.value,
description: description.value,
startDateTime: startDateTime.value,
endDateTime: endDateTime.value,
organisation: organisation.value,
})
);
};
// this.props.dispatch(
// postEvent({
// title: title.value,
// description: description.value,
// startDateTime: startDateTime.value,
// endDateTime: endDateTime.value,
// organisation: organisation.value,
// })
// );
// };

render() {
const { events } = this.props;
return (
<div>
<Jumbotron>
<h3 className="text-center">{mainTitle}</h3>
</Jumbotron>
<Container>
<Row>
<Col md="12">
<DropSearch
sortBy={this.getSortyByOptions()}
handleSearchChange={this.handleSearchChange}
events={events}
/>
</Col>
</Row>
</Container>
{events.events.length ? (
<EventList events={events.events} />
) : (
<Col className="cardFormating mx-auto py-5 mt-4 bg-dark">
<Container>
<h4 className="text-center">{eventNotFound}</h4>
<Row>
<Col md="20" className="mx-auto mt-3">
{events.events.length ? (
<EventList events={events.events} />
) : (
<Container>
<h4 className="text-center">{eventNotFound}</h4>
</Container>
)}
</Col>
</Row>
</Container>
)}
</Col>
</div>
);
}
Expand Down
23 changes: 23 additions & 0 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,26 @@ body {
border-top: 1px solid #f5f5f5;
padding: 10px;
}

.bgGradient {
font-family: robotto;
background: linear-gradient(to top left, #003366, #add8e6);
}

.cardFormating {
width: 90%;
border-radius: 15px;
}

.color-grey {
color: gray;
}

.date {
font-size: 30px;
line-height: 35px;
}

.month {
font-size: 20px;
}
Loading