Polish editorial screen

lib/ui/common/curved_clippers.dart

@@ -39,7 +39,7 @@ class ArchPoint {
 }
 
 List<ArchPoint> _getArchPts(Size size, ArchType type) {
-  double distanceFromTop = 100;
+  double distanceFromTop = size.width / 3;
   switch (type) {
     case ArchType.pyramid:
       return [
@@ -60,19 +60,19 @@ List<ArchPoint> _getArchPts(Size size, ArchType type) {
     case ArchType.arch:
       return [
         ArchPoint(Offset(0, size.height)),
-        ArchPoint(Offset(0, distanceFromTop * 2)),
+        ArchPoint(Offset(0, size.width / 2)),
         ArchPoint(Offset(size.width / 2, 0), Offset(0, 0)),
-        ArchPoint(Offset(size.width, distanceFromTop * 2), Offset(size.width, 0)),
+        ArchPoint(Offset(size.width, size.width / 2), Offset(size.width, 0)),
         ArchPoint(Offset(size.width, size.height)),
       ];
     case ArchType.wideArch:
       return [
         ArchPoint(Offset(0, size.height)),
-        ArchPoint(Offset(0, distanceFromTop * 2)),
+        ArchPoint(Offset(0, size.width / 2)),
         ArchPoint(Offset(0, distanceFromTop)),
         ArchPoint(Offset(size.width / 2, 0), Offset(0, 0)),
         ArchPoint(Offset(size.width, distanceFromTop), Offset(size.width, 0)),
-        ArchPoint(Offset(size.width, distanceFromTop * 2)),
+        ArchPoint(Offset(size.width, size.width / 2)),
         ArchPoint(Offset(size.width, size.height)),
       ];
     case ArchType.flatPyramid:

lib/ui/screens/collectible_found/collectible_found_screen.dart

@@ -160,7 +160,6 @@ class CollectibleFoundScreen extends StatelessWidget {
     return AppBtn.from(
       text: $strings.collectibleFoundButtonViewCollection,
       isSecondary: true,
-      expand: true,
       onPressed: () => _handleViewCollectionPressed(context),
     )
         .animate()

lib/ui/screens/editorial/editorial_screen.dart

@@ -5,6 +5,7 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter_circular_text/circular_text.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 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_icons.dart';
@@ -72,7 +73,9 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
       bool shortMode = constraints.biggest.height < 700;
       double illustrationHeight = shortMode ? 250 : 280;
       double minAppBarHeight = shortMode ? 80 : 120;
-      double maxAppBarHeight = shortMode ? 400 : 500;
+
+      /// Attempt to maintain a similar aspect ratio for the image within the app-bar
+      double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.5;
 
       return PopRouterOnOverScroll(
         controller: _scroller,
@@ -82,16 +85,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
             children: [
               /// Background
               Positioned.fill(
-                child: ValueListenableBuilder<double>(
+                child: ColoredBox(color: widget.data.type.bgColor),
-                  valueListenable: _scrollPos,
-                  builder: (_, value, __) {
-                    bool showBg = value < 700;
-                    return AnimatedContainer(
-                      duration: $styles.times.fast,
-                      color: widget.data.type.bgColor.withOpacity(showBg ? 1 : 0),
-                    );
-                  },
-                ),
               ),
 
               /// Top Illustration - Sits underneath the scrolling content, fades out as it scrolls
@@ -112,7 +106,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
               /// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
               TopCenter(
                 child: SizedBox(
-                  width: $styles.sizes.maxContentWidth1,
+                  //width: $styles.sizes.maxContentWidth1,
                   child: CustomScrollView(
                     primary: false,
                     controller: _scroller,

lib/ui/screens/editorial/widgets/_app_bar.dart

@@ -47,13 +47,16 @@ class _AppBar extends StatelessWidget {
         fit: StackFit.expand,
         children: [
           AnimatedSwitcher(
-            duration: $styles.times.fast * .5,
+            duration: $styles.times.med,
             child: Stack(
               key: ValueKey(showOverlay),
               fit: StackFit.expand,
               children: [
                 /// Masked image
-                ClipPath(
+                Center(
+                  child: SizedBox(
+                    width: showOverlay ? double.infinity : $styles.sizes.maxContentWidth1,
+                    child: ClipPath(
                       // Switch arch type to Rect if we are showing the title bar
                       clipper: showOverlay ? null : ArchClipper(arch),
                       child: ValueListenableBuilder<double>(
@@ -71,6 +74,8 @@ class _AppBar extends StatelessWidget {
                         },
                       ),
                     ),
+                  ),
+                ),
 
                 /// Colored overlay
                 if (showOverlay) ...[

lib/ui/screens/editorial/widgets/_scrolling_content.dart

@@ -89,7 +89,11 @@ class _ScrollingContent extends StatelessWidget {
       sliver: SliverPadding(
         padding: EdgeInsets.symmetric(vertical: $styles.insets.md),
         sliver: SliverList(
-          delegate: SliverChildListDelegate([
+          delegate: SliverChildListDelegate.fixed([
+            Center(
+              child: SizedBox(
+                width: $styles.sizes.maxContentWidth1,
+                child: Column(children: [
                   ..._contentSection([
                     Center(child: buildHiddenCollectible(slot: 0)),
 
@@ -136,6 +140,9 @@ class _ScrollingContent extends StatelessWidget {
                 ]),
               ),
             ),
+          ]),
+        ),
+      ),
     );
   }
 
@@ -221,6 +228,7 @@ class _MapsThumbnailState extends State<_MapsThumbnail> {
   @override
   Widget build(BuildContext context) {
     void handlePressed() => context.push(ScreenPaths.maps(widget.data.type));
+    if (PlatformInfo.isDesktop) return Placeholder();
     return MergeSemantics(
       child: Column(
         children: [

lib/ui/screens/editorial/widgets/_title_text.dart

@@ -11,6 +11,9 @@ class _TitleText extends StatelessWidget {
       child: DefaultTextColor(
         color: $styles.colors.offWhite,
         child: StaticTextScale(
+          child: Center(
+            child: SizedBox(
+              width: $styles.sizes.maxContentWidth1,
               child: Column(
                 children: [
                   Gap($styles.insets.md),
@@ -91,6 +94,8 @@ class _TitleText extends StatelessWidget {
               ),
             ),
           ),
+        ),
+      ),
     );
   }
 }

lib/ui/screens/wonder_details/wonder_details_tab_menu.dart

@@ -125,7 +125,7 @@ class _TabBtn extends StatelessWidget {
     final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
     String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
     tabLabel = '$label: $tabLabel';
-    final double btnWidth = (context.widthPx / 6).clamp(80, 120);
+    final double btnWidth = (context.widthPx / 6).clamp(70, 120);
     return MergeSemantics(
       child: Semantics(
         selected: selected,
@@ -136,25 +136,8 @@ class _TabBtn extends StatelessWidget {
             onPressed: () => tabController.index = index,
             semanticLabel: label,
             minimumSize: Size(btnWidth, 0),
-            child: Stack(
+            // Image icon
-              children: [
+            child: Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
-                /// Image icon
-                Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
-                // if (selected)
-                // Positioned.fill(
-                //   child: BottomCenter(
-                //     child: Transform.translate(
-                //       offset: Offset(0, $styles.insets.xxs),
-                //       child: Animate().custom(
-                //         curve: Curves.easeOutCubic,
-                //         end: 24,
-                //         builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1),
-                //       ),
-                //     ),
-                //   ),
-                // ),
-              ],
-            ),
           ),
         ),
       ),

pubspec.lock

@@ -1149,10 +1149,10 @@ packages:
     dependency: transitive
     description:
       name: string_scanner
-      sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
+      sha256: "862015c5db1f3f3c4ea3b94dc2490363a84262994b88902315ed74be1155612f"
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.1.1"
   sync_http:
     dependency: transitive
     description:
@@ -1173,10 +1173,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
+      sha256: c9aba3b3dbfe8878845dfab5fa096eb8de7b62231baeeb1cea8e3ee81ca8c6d8
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.16"
+    version: "0.4.15"
   timing:
     dependency: transitive
     description: