From 7afd28190cd91d9ca6b07daccfa04a2139c8deed Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sat, 9 Mar 2019 12:41:25 +0100
Subject: [PATCH] Compact dates in event program

---
 src/components/EventList.js    | 24 +++++++++++++++++-------
 src/templates/event-program.js |  7 ++++++-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/EventList.js b/src/components/EventList.js
index 1eec79a..881a251 100644
--- a/src/components/EventList.js
+++ b/src/components/EventList.js
@@ -66,6 +66,7 @@ export default class EventList extends React.Component {
   }
 
   renderEvent(event) {
+    const { compactDate } = this.props
     return (
       <Link to={event.path} className="event" key={event.id}>
         <div className="event-image">
@@ -79,16 +80,23 @@ export default class EventList extends React.Component {
             <span className="event-start">
               {moment(event.start_time).format('HH:mm')}
             </span>
-            <span className="event-date">
+            <span
+              className={`event-date $(compactDate && event-date-is-compact)`}
+            >
               <span className="event-date-weekday">
                 {moment(event.start_time).format('dddd')}{' '}
               </span>
-              <span className="event-date-day">
-                {moment(event.start_time).format('D.')}{' '}
-              </span>
-              <span className="event-date-month">
-                {moment(event.start_time).format('MMMM')}{' '}
-              </span>
+              {!compactDate && (
+                <span className="event-date-day-month">
+                  {moment(event.start_time).format('D.')}{' '}
+                  {moment(event.start_time).format('MMMM')}{' '}
+                </span>
+              )}
+              {compactDate && (
+                <span className="event-date-day-month">
+                  {moment(event.start_time).format('D/M')}{' '}
+                </span>
+              )}
               {/* Only specify year if different. */}
               {!moment(event.start_time).isSame(new Date(), 'year') && (
                 <span className="event-date-year">
@@ -118,12 +126,14 @@ EventList.propTypes = {
   onlyUpcoming: PropTypes.bool,
   numDays: PropTypes.number,
   groupBy: PropTypes.string,
+  compactDate: PropTypes.bool,
 }
 
 EventList.defaultProps = {
   onlyUpcoming: true,
   numDays: 0,
   groupBy: null,
+  compactDate: false,
 }
 
 export const pageQuery = graphql`
diff --git a/src/templates/event-program.js b/src/templates/event-program.js
index e8f22be..a50fe75 100644
--- a/src/templates/event-program.js
+++ b/src/templates/event-program.js
@@ -11,7 +11,12 @@ export default class EventProgram extends React.Component {
 
     return (
       <Layout>
-        <EventList events={events} title="Dette skjer" groupBy="month" />
+        <EventList
+          events={events}
+          title="Dette skjer"
+          groupBy="month"
+          compactDate={true}
+        />
       </Layout>
     )
   }