diff --git a/lib/dashboard/view/dashboard_page.dart b/lib/dashboard/view/dashboard_page.dart index 007d2eb..a78010e 100644 --- a/lib/dashboard/view/dashboard_page.dart +++ b/lib/dashboard/view/dashboard_page.dart @@ -58,41 +58,62 @@ class _DashboardPageState extends State { return ListView( padding: const EdgeInsets.all(AppSpacing.lg), children: [ - Wrap( - spacing: AppSpacing.lg, - runSpacing: AppSpacing.lg, - children: [ - _SummaryCard( - icon: Icons.article_outlined, - title: l10n.totalHeadlines, - value: summary.headlineCount.toString(), - ), - _SummaryCard( - icon: Icons.category_outlined, - title: l10n.totalCategories, - value: summary.categoryCount.toString(), - ), - _SummaryCard( - icon: Icons.source_outlined, - title: l10n.totalSources, - value: summary.sourceCount.toString(), - ), - ], + LayoutBuilder( + builder: (context, constraints) { + const tabletBreakpoint = 800; + final isNarrow = constraints.maxWidth < tabletBreakpoint; + + final summaryCards = [ + _SummaryCard( + icon: Icons.article_outlined, + title: l10n.totalHeadlines, + value: summary.headlineCount.toString(), + ), + _SummaryCard( + icon: Icons.category_outlined, + title: l10n.totalCategories, + value: summary.categoryCount.toString(), + ), + _SummaryCard( + icon: Icons.source_outlined, + title: l10n.totalSources, + value: summary.sourceCount.toString(), + ), + ]; + + if (isNarrow) { + return Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + summaryCards[0], + const SizedBox(height: AppSpacing.lg), + summaryCards[1], + const SizedBox(height: AppSpacing.lg), + summaryCards[2], + ], + ); + } + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded(child: summaryCards[0]), + const SizedBox(width: AppSpacing.lg), + Expanded(child: summaryCards[1]), + const SizedBox(width: AppSpacing.lg), + Expanded(child: summaryCards[2]), + ], + ); + }, ), const SizedBox(height: AppSpacing.lg), - Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - flex: 2, - child: _RecentHeadlinesCard( - headlines: recentHeadlines, - ), - ), - const SizedBox(width: AppSpacing.lg), - Expanded( - flex: 1, - child: Column( + LayoutBuilder( + builder: (context, constraints) { + const wideBreakpoint = 1200; + final isWide = constraints.maxWidth > wideBreakpoint; + + final mainContent = [ + _RecentHeadlinesCard(headlines: recentHeadlines), + Column( children: [ _SystemStatusCard( status: appConfig.appOperationalStatus, @@ -101,8 +122,28 @@ class _DashboardPageState extends State { const _QuickActionsCard(), ], ), - ), - ], + ]; + + if (isWide) { + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded(flex: 2, child: mainContent[0]), + const SizedBox(width: AppSpacing.lg), + Expanded(flex: 1, child: mainContent[1]), + ], + ); + } + + return Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + mainContent[0], + const SizedBox(height: AppSpacing.lg), + mainContent[1], + ], + ); + }, ), ], ); @@ -193,34 +234,33 @@ class _QuickActionsCard extends StatelessWidget { child: Padding( padding: const EdgeInsets.all(AppSpacing.lg), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Text(l10n.quickActions, style: theme.textTheme.titleLarge), const SizedBox(height: AppSpacing.md), - SizedBox( - width: double.infinity, - child: ElevatedButton.icon( - icon: const Icon(Icons.add_circle_outline), - label: Text(l10n.createHeadlineAction), - onPressed: () => context.goNamed(Routes.createHeadlineName), - ), + ElevatedButton.icon( + icon: const Icon(Icons.add_circle_outline), + label: Text(l10n.createHeadlineAction), + onPressed: () => context.goNamed(Routes.createHeadlineName), ), const SizedBox(height: AppSpacing.sm), - SizedBox( - width: double.infinity, - child: OutlinedButton.icon( - icon: const Icon(Icons.folder_open_outlined), - label: Text(l10n.manageContentAction), - onPressed: () => context.goNamed(Routes.contentManagementName), + ElevatedButton.icon( + icon: const Icon(Icons.create_new_folder_outlined), + label: Text(l10n.createCategory), + onPressed: () => context.goNamed(Routes.createCategoryName), + style: ElevatedButton.styleFrom( + backgroundColor: theme.colorScheme.secondaryContainer, + foregroundColor: theme.colorScheme.onSecondaryContainer, ), ), const SizedBox(height: AppSpacing.sm), - SizedBox( - width: double.infinity, - child: OutlinedButton.icon( - icon: const Icon(Icons.settings_applications_outlined), - label: Text(l10n.appConfigAction), - onPressed: () => context.goNamed(Routes.appConfigurationName), + ElevatedButton.icon( + icon: const Icon(Icons.add_to_photos_outlined), + label: Text(l10n.createSource), + onPressed: () => context.goNamed(Routes.createSourceName), + style: ElevatedButton.styleFrom( + backgroundColor: theme.colorScheme.secondaryContainer, + foregroundColor: theme.colorScheme.onSecondaryContainer, ), ), ],