diff --git a/lib/ui/screens/editorial/editorial_screen.dart b/lib/ui/screens/editorial/editorial_screen.dart index f5d38c84..fe04490b 100644 --- a/lib/ui/screens/editorial/editorial_screen.dart +++ b/lib/ui/screens/editorial/editorial_screen.dart @@ -21,7 +21,6 @@ import 'package:wonders/ui/common/scaling_list_item.dart'; import 'package:wonders/ui/common/static_text_scale.dart'; import 'package:wonders/ui/common/themed_text.dart'; import 'package:wonders/ui/common/utils/context_utils.dart'; -import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart'; @@ -37,10 +36,6 @@ part 'widgets/_sliding_image_stack.dart'; part 'widgets/_title_text.dart'; part 'widgets/_top_illustration.dart'; -//TODO: Try and maintain 1.5 : 1 aspect ratio on the featured image -//TODO: Try and move the scrollbar all the way to the edge of the screen -//TODO: Fix arch logic (if necessary) -// or maybe remove class WonderEditorialScreen extends StatefulWidget { const WonderEditorialScreen(this.data, {Key? key, required this.onScroll}) : super(key: key); final WonderData data; @@ -75,7 +70,7 @@ class _WonderEditorialScreenState extends State { double minAppBarHeight = shortMode ? 80 : 150; /// Attempt to maintain a similar aspect ratio for the image within the app-bar - double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.5; + double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.2; return PopRouterOnOverScroll( controller: _scroller, @@ -147,17 +142,12 @@ class _WonderEditorialScreenState extends State { widget.data.type, scrollPos: _scrollPos, sectionIndex: _sectionIndex, - ).animate().fade(duration: $styles.times.med, delay: $styles.times.pageTransition), + ), ), ), /// Editorial content (text and images) _ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex), - - /// Bottom padding - SliverToBoxAdapter( - child: Container(height: 150, color: $styles.colors.offWhite), - ), ], ), ), diff --git a/lib/ui/screens/editorial/widgets/_scrolling_content.dart b/lib/ui/screens/editorial/widgets/_scrolling_content.dart index 00e4f98f..3e45dc7a 100644 --- a/lib/ui/screens/editorial/widgets/_scrolling_content.dart +++ b/lib/ui/screens/editorial/widgets/_scrolling_content.dart @@ -134,9 +134,10 @@ class _ScrollingContent extends StatelessWidget { buildText(data.locationInfo2), ]), Gap($styles.insets.md), - _MapsThumbnail(data, height: 400), + AspectRatio(aspectRatio: 1.65, child: _MapsThumbnail(data)), Gap($styles.insets.md), ..._contentSection([Center(child: buildHiddenCollectible(slot: 3))]), + Gap(150), ]), ), ), @@ -214,9 +215,8 @@ class _YouTubeThumbnail extends StatelessWidget { } class _MapsThumbnail extends StatefulWidget { - const _MapsThumbnail(this.data, {Key? key, required this.height}) : super(key: key); + const _MapsThumbnail(this.data, {Key? key}) : super(key: key); final WonderData data; - final double height; @override State<_MapsThumbnail> createState() => _MapsThumbnailState(); @@ -232,30 +232,27 @@ class _MapsThumbnailState extends State<_MapsThumbnail> { return MergeSemantics( child: Column( children: [ - SizedBox( - height: widget.height, - child: ClipRRect( - borderRadius: BorderRadius.circular($styles.corners.md), - child: AppBtn.basic( - semanticLabel: $strings.scrollingContentSemanticOpen, - onPressed: handlePressed, + ClipRRect( + borderRadius: BorderRadius.circular($styles.corners.md), + child: AppBtn.basic( + semanticLabel: $strings.scrollingContentSemanticOpen, + onPressed: handlePressed, - /// To prevent the map widget from absorbing the onPressed action, use a Stack + IgnorePointer + a transparent Container - child: Stack( - children: [ - Positioned.fill(child: ColoredBox(color: Colors.transparent)), - IgnorePointer( - child: GoogleMap( - markers: {getMapsMarker(startPos.target)}, - zoomControlsEnabled: false, - mapType: MapType.normal, - mapToolbarEnabled: false, - initialCameraPosition: startPos, - myLocationButtonEnabled: false, - ), + /// To prevent the map widget from absorbing the onPressed action, use a Stack + IgnorePointer + a transparent Container + child: Stack( + children: [ + Positioned.fill(child: ColoredBox(color: Colors.transparent)), + IgnorePointer( + child: GoogleMap( + markers: {getMapsMarker(startPos.target)}, + zoomControlsEnabled: false, + mapType: MapType.normal, + mapToolbarEnabled: false, + initialCameraPosition: startPos, + myLocationButtonEnabled: false, ), - ], - ), + ), + ], ), ), ),