Skip to content

Refactor dashobard UI polish #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 4, 2025
+95 −55
Merged

Refactor dashobard UI polish #22

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a13e9d2
feat(dashboard): make summary cards responsive
fulleni Jul 4, 2025
cb4874c
feat(dashboard): make main content area responsive
fulleni Jul 4, 2025
908bf05
feat(dashboard): update quick actions card
fulleni Jul 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 95 additions & 55 deletions lib/dashboard/view/dashboard_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,41 +58,62 @@ class _DashboardPageState extends State<DashboardPage> {
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,
Expand All @@ -101,8 +122,28 @@ class _DashboardPageState extends State<DashboardPage> {
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],
],
);
},
),
],
);
Expand Down Expand Up @@ -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,
),
Comment on lines +247 to 254
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Consider using OutlinedButton.icon instead of ElevatedButton.icon with a secondaryContainer background for the category and source buttons. This would provide a visual distinction from the primary action (create headline) and align better with a secondary action style.

            OutlinedButton.icon(
              icon: const Icon(Icons.create_new_folder_outlined),
              label: Text(l10n.createCategory),
              onPressed: () => context.goNamed(Routes.createCategoryName),
            ),

),
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,
),
),
],
Expand Down
Loading