Make the calendar more mobile-friendly. (#3774) (#3776)

* 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 <[email protected]> Co-authored-by: Tomoya Fujita <[email protected]> (cherry picked from commit 0da5490) Co-authored-by: Chris Lalancette <[email protected]>
ros2 · Jul 8, 2023 · c86c4e8 · c86c4e8
1 parent df80020
commit c86c4e8
Showing 1 changed file with 32 additions and 3 deletions.
diff --git 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 [email protected]