bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

General UI Polish – Artifact Carousel tweaks

Browse Source 
-Adjust curved clipper for taller spade/pyramid masks.
-Wonder graphics adjustments for moons petra/pyramids

Carousel items
- inset non-focused items with padding to shrink
- adjust vOffsets to match larger curve

Carousel
– Include 800 in shortmode limit (<=)
– Try dynamic bottom height, remove shortmode sizing.
– increase background radius, and remove curve flattening.

Tested on macOS, ipad pro (port/land), iphone 14 Pro, samsung active tab pro.
This commit is contained in:
Jared Bell 2022-12-21 17:10:40 -07:00
parent 8b997644ab
commit fce6506862
6 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/styles/styles.dart
View File

@ -21,7 +21,7 @@ class AppStyle {
} else if (screenSize > 1400) { } else if (screenSize > 1400) {
scale = 1.15; scale = 1.15;
} else if (screenSize > 1000) { } else if (screenSize > 1000) {
scale = 1.1; scale = 1.25;
} else if (screenSize > 800) { } else if (screenSize > 800) {
scale = 1; scale = 1;
} else { } else {

2
lib/ui/common/curved_clippers.dart
View File

@ -39,7 +39,7 @@ class ArchPoint {
} }
List<ArchPoint> _getArchPts(Size size, ArchType type) { List<ArchPoint> _getArchPts(Size size, ArchType type) {
double distanceFromTop = size.width / 3; double distanceFromTop = size.width / 2.5;
switch (type) { switch (type) {
case ArchType.pyramid: case ArchType.pyramid:
return [ return [

8
lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
View File

@ -51,8 +51,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool shortMode = context.heightPx < 800; bool shortMode = context.heightPx <= 800;
final double bottomHeight = shortMode ? 240 : 340; final double bottomHeight = context.heightPx / 2.75; // Prev 340, dynamic seems to work better
// Allow objects to become wider as the screen becomes tall, this allows // Allow objects to become wider as the screen becomes tall, this allows
// them to grow taller as well, filling the available space better. // them to grow taller as well, filling the available space better.
double itemHeight = (context.heightPx - 200 - bottomHeight).clamp(250, 400); double itemHeight = (context.heightPx - 200 - bottomHeight).clamp(250, 400);
@ -137,7 +137,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
} }
OverflowBox _buildBgCircle(double height) { OverflowBox _buildBgCircle(double height) {
const double size = 1500; final double size = 2000;
return OverflowBox( return OverflowBox(
maxWidth: size, maxWidth: size,
maxHeight: size, maxHeight: size,
@ -146,7 +146,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(0.8), color: $styles.colors.offWhite.withOpacity(0.8),
borderRadius: BorderRadius.vertical(top: Radius.circular(size * .45)), borderRadius: BorderRadius.vertical(top: Radius.circular(size)),
), ),
), ),
), ),

7
lib/ui/screens/artifact/artifact_carousel/widgets/_collapsing_carousel_item.dart
View File

@ -23,8 +23,8 @@ class _CollapsingCarouselItem extends StatelessWidget {
// Calculate offset, this will be subtracted from the bottom padding moving the element downwards // Calculate offset, this will be subtracted from the bottom padding moving the element downwards
double vtOffset = 0; double vtOffset = 0;
final tallHeight = width * 1.5; final tallHeight = width * 1.5;
if (indexOffset == 1) vtOffset = width * .4; if (indexOffset == 1) vtOffset = width * .5;
if (indexOffset == 2) vtOffset = width * .8; if (indexOffset == 2) vtOffset = width * .825;
if (indexOffset > 2) vtOffset = width; if (indexOffset > 2) vtOffset = width;
final content = AnimatedOpacity( final content = AnimatedOpacity(
@ -32,13 +32,14 @@ class _CollapsingCarouselItem extends StatelessWidget {
opacity: indexOffset.abs() <= 2 ? 1 : 0, opacity: indexOffset.abs() <= 2 ? 1 : 0,
child: _AnimatedTranslate( child: _AnimatedTranslate(
duration: $styles.times.fast, duration: $styles.times.fast,
offset: Offset(0, -tallHeight * .2 + vtOffset), offset: Offset(0, -tallHeight * .25 + vtOffset),
child: Center( child: Center(
child: AnimatedContainer( child: AnimatedContainer(
duration: $styles.times.fast, duration: $styles.times.fast,
// Center item is portrait, the others are square // Center item is portrait, the others are square
height: indexOffset == 0 ? tallHeight : width, height: indexOffset == 0 ? tallHeight : width,
width: width, width: width,
padding: indexOffset == 0 ? EdgeInsets.all(0) : EdgeInsets.all(30),
child: child, child: child,
), ),
), ),

2
lib/ui/wonder_illustrations/petra_illustration.dart
View File

@ -37,7 +37,7 @@ class PetraIllustration extends StatelessWidget {
), ),
IllustrationPiece( IllustrationPiece(
fileName: 'moon.png', fileName: 'moon.png',
initialOffset: Offset(0, -150), initialOffset: Offset(0, 50),
heightFactor: .15, heightFactor: .15,
minHeight: 50, minHeight: 50,
alignment: Alignment.topCenter, alignment: Alignment.topCenter,

2
lib/ui/wonder_illustrations/pyramids_giza_illustration.dart
View File

@ -41,7 +41,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
enableHero: true, enableHero: true,
heightFactor: .15, heightFactor: .15,
minHeight: 100, minHeight: 100,
offset: config.shortMode ? Offset(120, context.heightPx * -.05) : Offset(120, context.heightPx * -.35), offset: config.shortMode ? Offset(180, context.heightPx * -.09) : Offset(250, context.heightPx * -.3),
zoomAmt: .05, zoomAmt: .05,
), ),
]; ];