chore: improvements to activity suggestion UI on mobile (#2159)

This commit is contained in:
ggurdin 2025-03-17 16:42:52 -04:00 committed by GitHub
parent 6d393f7745
commit cfe5a0abf9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 62 additions and 61 deletions

View file

@ -43,8 +43,8 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
final List<ActivityPlanModel> _activityItems = [];
final ScrollController _scrollController = ScrollController();
final double cardHeight = 235.0;
final double cardPadding = 8.0;
double get cardWidth => _isColumnMode ? 225.0 : 160.0;
double get cardPadding => _isColumnMode ? 8.0 : 0.0;
double get cardWidth => _isColumnMode ? 225.0 : 150.0;
void _scrollToItem(int index) {
final viewportDimension = _scrollController.position.viewportDimension;
@ -133,8 +133,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
return Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: _isColumnMode ? 16.0 : 0.0,
horizontal: FluffyThemes.isColumnMode(context) ? 16.0 : 4.0,
),
height: _isColumnMode ? cardHeight * 1.5 : null,
child: _isColumnMode
@ -218,12 +217,14 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
),
],
)
: SingleChildScrollView(
controller: _scrollController,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: cards,
: SizedBox.expand(
child: SingleChildScrollView(
controller: _scrollController,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
runSpacing: 8.0,
children: cards,
),
),
),
);

View file

@ -16,62 +16,62 @@ class SuggestionsPage extends StatelessWidget {
final theme = Theme.of(context);
return Padding(
padding: EdgeInsets.symmetric(
horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 8.0,
vertical: 24.0,
horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 16.0,
vertical: FluffyThemes.isColumnMode(context) ? 24.0 : 16.0,
),
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
L10n.of(context).learnByTexting,
style: const TextStyle(fontWeight: FontWeight.bold),
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (!FluffyThemes.isColumnMode(context))
const LearningProgressIndicators(),
Padding(
padding: EdgeInsets.only(
left: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
right: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
top: 16.0,
bottom: 8.0,
),
Container(
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(36.0),
),
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16.0,
),
child: Row(
spacing: 8.0,
children: [
PangeaLogoSvg(
width: 24.0,
forceColor: theme.colorScheme.primary,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
L10n.of(context).learnByTexting,
style: theme.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold),
),
Container(
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(36.0),
),
Text(
AppConfig.applicationName,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
padding: const EdgeInsets.symmetric(
vertical: 6.0,
horizontal: 10.0,
),
],
),
child: Row(
spacing: 8.0,
children: [
PangeaLogoSvg(
width: 16.0,
forceColor: theme.colorScheme.primary,
),
Text(
AppConfig.applicationName,
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
],
),
),
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (!FluffyThemes.isColumnMode(context))
const Padding(
padding: EdgeInsets.all(24.0),
child: LearningProgressIndicators(),
),
const SizedBox(height: 16.0),
const Flexible(
child: ActivitySuggestionsArea(),
),
],
),
),
const Flexible(
child: ActivitySuggestionsArea(),
),
],
),
),
);