chore: improvements to activity suggestion UI on mobile (#2159)
This commit is contained in:
parent
6d393f7745
commit
cfe5a0abf9
2 changed files with 62 additions and 61 deletions
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue