From 13073d4e0263d6d32309fcc48d1b3ed8e1c4bb7e Mon Sep 17 00:00:00 2001
From: Shawn <shawn@gskinner.com>
Date: Mon, 23 Jan 2023 09:07:30 -0700
Subject: [PATCH] EventsView: switch to two-column layout at aspect ratios >
 .85

---
 lib/ui/screens/wonder_events/wonder_events.dart | 16 ++++++++++++----
 release_notes.txt                               |  3 ++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/lib/ui/screens/wonder_events/wonder_events.dart b/lib/ui/screens/wonder_events/wonder_events.dart
index ea56adac..e6f7af15 100644
--- a/lib/ui/screens/wonder_events/wonder_events.dart
+++ b/lib/ui/screens/wonder_events/wonder_events.dart
@@ -1,4 +1,7 @@
+import 'dart:io';
+
 import 'package:wonders/common_libs.dart';
+import 'package:wonders/logic/common/platform_info.dart';
 import 'package:wonders/logic/common/string_utils.dart';
 import 'package:wonders/logic/data/wonder_data.dart';
 import 'package:wonders/ui/common/app_backdrop.dart';
@@ -26,6 +29,11 @@ class WonderEvents extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(type));
+    // Main view content switches between 1 and 2 column layouts
+    // On mobile, use the 2 column layout on screens close to landscape (>.85). This is primarily an optimization for foldable devices square-ish dimensions when opened.
+    final twoColumnAspect = PlatformInfo.isMobile ? .85 : 1;
+    bool useTwoColumnLayout = context.mq.size.aspectRatio > twoColumnAspect;
+
     return LayoutBuilder(builder: (context, constraints) {
       return Container(
         color: $styles.colors.black,
@@ -33,10 +41,10 @@ class WonderEvents extends StatelessWidget {
           bottom: false,
           child: Stack(
             children: [
-              /// Main view switches between portrait and landscape views
+              /// Main view
               Positioned.fill(
                 top: $styles.insets.sm,
-                child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(),
+                child: useTwoColumnLayout ? _buildTwoColumn(context) : _buildSingleColumn(),
               ),
 
               /// Header w/ TimelineBtn
@@ -58,7 +66,7 @@ class WonderEvents extends StatelessWidget {
   }
 
   /// Landscape layout is a row, with the WonderImage on left and EventsList on the right
-  Widget _buildLandscape(BuildContext context) {
+  Widget _buildTwoColumn(BuildContext context) {
     return Row(
       children: [
         /// WonderImage w/ Timeline btn
@@ -104,7 +112,7 @@ class WonderEvents extends StatelessWidget {
   }
 
   /// Portrait layout is a stack with the EventsList scrolling overtop of the WonderImage
-  Widget _buildPortrait() {
+  Widget _buildSingleColumn() {
     return LayoutBuilder(builder: (_, constraints) {
       double topHeight = max(constraints.maxHeight * .55, 200);
       return CenteredBox(
diff --git a/release_notes.txt b/release_notes.txt
index f2407c7a..c6525973 100644
--- a/release_notes.txt
+++ b/release_notes.txt
@@ -1,2 +1,3 @@
 # 2.0.9
-- Remember currently selected wonder on home page
\ No newline at end of file
+- Remember currently selected wonder on home page
+- EventsView: switch to two-column layout at aspect ratios > .85