From 2f6dc30d5164663fea0b97e4f5fc427d608c93fb Mon Sep 17 00:00:00 2001
From: jberry93 <jeffreyberry93@gmail.com>
Date: Tue, 17 Oct 2017 20:36:38 -0700
Subject: [PATCH 1/2] refactor(row-events): upcoming events will show
'attending' while recent events will show 'attended'. Applied flex styling
and some margin to make event details more viewable on mobile
---
components/row-events.js | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/components/row-events.js b/components/row-events.js
index 1a6af784c..17e2c88ac 100644
--- a/components/row-events.js
+++ b/components/row-events.js
@@ -20,10 +20,13 @@ const RowEvent = props => {
</span>
<span className="card_icons">
<Icon name="users" />
- {`${props.yesCount} attended`}
+ {props.yesCount}
+ {moment(props.time).isAfter() ? ' attending' : ' attended'}
+ </span>
+ <span className="card_icons">
+ <Icon name="log out" />
+ {props.venue === undefined ? 'Free session' : 'Free entry'}
</span>
- <Icon name="log out" />
- {props.venue === undefined ? 'Free session' : 'Free entry'}
</Card.Content>
<style jsx>{`
.card_venue {
@@ -32,6 +35,12 @@ const RowEvent = props => {
.card_icons {
margin-right: 15px;
}
+ @media (max-width: 700px) {
+ .card_icons {
+ display: flex;
+ margin: 5px 0;
+ }
+ }
`}</style>
</Card>
);
From 1f2dda01a070a4e08e7bd0e70ad333cd0bb7c50b Mon Sep 17 00:00:00 2001
From: jberry93 <jeffreyberry93@gmail.com>
Date: Wed, 18 Oct 2017 10:54:05 -0700
Subject: [PATCH 2/2] refactor(props): added status prop to row-events
component to determine attendance terminology
---
components/row-events.js | 2 +-
pages/events.js | 2 ++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/components/row-events.js b/components/row-events.js
index 17e2c88ac..f4770992c 100644
--- a/components/row-events.js
+++ b/components/row-events.js
@@ -21,7 +21,7 @@ const RowEvent = props => {
<span className="card_icons">
<Icon name="users" />
{props.yesCount}
- {moment(props.time).isAfter() ? ' attending' : ' attended'}
+ {props.status === 'upcoming' ? ' attending' : ' attended'}
</span>
<span className="card_icons">
<Icon name="log out" />
diff --git a/pages/events.js b/pages/events.js
index 8d197ee53..e8801caad 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -53,6 +53,7 @@ export default publicPage(
time={event.time}
venue={event.venue}
link={event.link}
+ status={event.status}
/>
</Card.Group>
))}
@@ -68,6 +69,7 @@ export default publicPage(
time={event.time}
venue={event.venue}
link={event.link}
+ status={event.status}
/>
</Card.Group>
))}