From 0da5490809b0d2cd7fd40b87c5cebde6c6b9e148 Mon Sep 17 00:00:00 2001
From: Chris Lalancette <clalancette@gmail.com>
Date: Sat, 8 Jul 2023 09:17:01 -0400
Subject: [PATCH] Make the calendar more mobile-friendly. (#3774)

* Make the calendar more mobile-friendly.

When looking at some of the analytics, it looks like this
page is particularly not mobile friendly.  That's because
the Google calendar embedded on the bottom of the page
is of fixed with 800x600, which doesn't work well on
many mobile devices.

What we do here is to see if a device has 767 or less pixels.
If it does, then we just show the agenda, which fits in just
280 pixels.  If we have more than that, we have room for
the full monthly agenda, so we show the full thing.

Signed-off-by: Chris Lalancette <clalancette@gmail.com>
Co-authored-by: Tomoya Fujita <Tomoya.Fujita@sony.com>
---
 source/The-ROS2-Project/Governance.rst | 35 +++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/source/The-ROS2-Project/Governance.rst b/source/The-ROS2-Project/Governance.rst
index cab0167bdcc..7f106ea2444 100644
--- a/source/The-ROS2-Project/Governance.rst
+++ b/source/The-ROS2-Project/Governance.rst
@@ -333,8 +333,37 @@ It can be accessed via `iCal <https://calendar.google.com/calendar/ical/agf3kaji
 
 .. raw:: html
 
-    <iframe src="https://calendar.google.com/calendar/embed?src=agf3kajirket8khktupm9go748%40group.calendar.google.com" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
-
-
+    <!--
+    The below code comes from https://www.mpking.com/2021/04/making-google-calendar-embeddable.html.
+    The basic idea is that if we are on a desktop device (defined as anything that has more than 767 pixels),
+    then we show the monthly version of the calendar. If we are on a device with 767 or less, show the agenda
+    version, which is much narrower.
+    -->
+    <style>
+      .responsiveCal {
+        position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
+      }
+
+      .responsiveCal iframe {
+        position: absolute; top:0; left: 0; width: 100%; height: 100%;
+      }
+
+      @media all and (min-width: 768px) {
+        .deskContent {display:block;}
+        .phoneContent {display:none;}
+      }
+
+      @media all and (max-width: 767px) {
+        .deskContent {display:none;}
+        .phoneContent {display:block;}
+      }
+    </style>
+    <div class="responsiveCal">
+      <div class="deskContent">
+        <iframe src="https://calendar.google.com/calendar/embed?src=agf3kajirket8khktupm9go748%40group.calendar.google.com" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
+      </div>
+      <div class="phoneContent"><iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=400&amp;wkst=1&amp;src=agf3kajirket8khktupm9go748%40group.calendar.google.com" style="border: 0" width="280" height="500" frameborder="0" scrolling="no"></iframe>
+      </div>
+    </div>
 
 If you have an individual event or series of events that you'd like to post please contact info@openrobotics.org