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.

#37 multiline span on landing page in events card #58

Merged
merged 4 commits into from
Oct 25, 2017
Merged

#37 multiline span on landing page in events card #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7766b3f
multiline span
abiduzz420 Oct 25, 2017
aaa7a54
refactor done,log removed
abiduzz420 Oct 25, 2017
978321a
multiline prop added for display
abiduzz420 Oct 25, 2017
fc99f74
text-align left added to event details class
abiduzz420 Oct 25, 2017
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
36 changes: 21 additions & 15 deletions components/row-events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,39 @@ const extractImageUrl = input => {
return matches ? matches[1] : '';
};

const RowEvent = props => {
const RowEvent = ({
link,
isMultiLine,
fluid,
description,
name,
venue,
time,
yesCount,
status,
}) => {
return (
<Card fluid={props.fluid} raised centered target="_blank" href={props.link}>
{props.description ? (
<Image src={extractImageUrl(props.description)} />
) : (
<div />
)}
<Card fluid={fluid} raised centered target="_blank" href={link}>
{description ? <Image src={extractImageUrl(description)} /> : <div />}
<Card.Content>
<Card.Header>{props.name}</Card.Header>
<Card.Header>{name}</Card.Header>
<div className="card_venue">
<Card.Meta>
{props.venue === undefined ? 'Online' : props.venue.name}
</Card.Meta>
<Card.Meta>{venue === undefined ? 'Online' : venue.name}</Card.Meta>
</div>
</Card.Content>
<Card.Content extra>
<span className="card_icons">
<Icon name="clock" />
{format(props.time, "h:mm A, ddd MMM Do 'YY")}
{format(time, "h:mm A, ddd MMM Do 'YY")}
</span>
<span className="card_icons">
<Icon name="users" />
{props.yesCount}
{props.status === 'upcoming' ? ' attending' : ' attended'}
{yesCount}
{status === 'upcoming' ? ' attending' : ' attended'}
</span>
<span className="card_icons">
<Icon name="log out" />
{props.venue === undefined ? 'Free session' : 'Free entry'}
{venue === undefined ? 'Free session' : 'Free entry'}
</span>
</Card.Content>
<style jsx>{`
Expand All @@ -46,6 +50,8 @@ const RowEvent = props => {
}
.card_icons {
margin-right: 15px;
display: ${isMultiLine ? 'block' : null};
text-align: left;
}
@media (max-width: 700px) {
.card_icons {
Expand Down
Loading