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

* multiline span

* refactor done,log removed

* multiline prop added for display

* text-align left added to event details class

Author: abiduzz420

components/row-events.js

@@ -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>{`
@@ -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 {