From 377bd6e2b74d05bbfa300f3844f4cd3739b5ec24 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 13 Apr 2019 11:08:59 -0700
Subject: [PATCH] Collapse calendar view buttons on narrower screens (<=
 1200px)

---
 frontend/src/Calendar/Header/CalendarHeader.js   | 16 +++++++++++++++-
 .../Calendar/Header/CalendarHeaderConnector.js   |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Calendar/Header/CalendarHeader.js b/frontend/src/Calendar/Header/CalendarHeader.js
index 4fea8356d..9e65df87b 100644
--- a/frontend/src/Calendar/Header/CalendarHeader.js
+++ b/frontend/src/Calendar/Header/CalendarHeader.js
@@ -83,6 +83,7 @@ class CalendarHeader extends Component {
       end,
       longDateFormat,
       isSmallScreen,
+      collapseViewButtons,
       onTodayPress,
       onPreviousPress,
       onNextPress
@@ -145,7 +146,7 @@ class CalendarHeader extends Component {
             }
 
             {
-              isSmallScreen ?
+              collapseViewButtons ?
                 <Menu
                   className={styles.viewMenu}
                   alignMenu={align.RIGHT}
@@ -158,6 +159,18 @@ class CalendarHeader extends Component {
                   </MenuButton>
 
                   <MenuContent>
+                    {
+                      isSmallScreen ?
+                        null :
+                        <ViewMenuItem
+                          name={calendarViews.MONTH}
+                          selectedView={view}
+                          onPress={this.onViewChange}
+                        >
+                          Month
+                        </ViewMenuItem>
+                    }
+
                     <ViewMenuItem
                       name={calendarViews.WEEK}
                       selectedView={view}
@@ -243,6 +256,7 @@ CalendarHeader.propTypes = {
   end: PropTypes.string.isRequired,
   view: PropTypes.oneOf(calendarViews.all).isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  collapseViewButtons: PropTypes.bool.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   onViewChange: PropTypes.func.isRequired,
   onTodayPress: PropTypes.func.isRequired,
diff --git a/frontend/src/Calendar/Header/CalendarHeaderConnector.js b/frontend/src/Calendar/Header/CalendarHeaderConnector.js
index c96cf2869..b73730ed9 100644
--- a/frontend/src/Calendar/Header/CalendarHeaderConnector.js
+++ b/frontend/src/Calendar/Header/CalendarHeaderConnector.js
@@ -23,6 +23,7 @@ function createMapStateToProps() {
       ]);
 
       result.isSmallScreen = dimensions.isSmallScreen;
+      result.collapseViewButtons = dimensions.isLargeScreen;
       result.longDateFormat = uiSettings.longDateFormat;
 
       return result;