Refactor dashobard UI polish #22
Conversation
Replaces the `Wrap` widget for the summary cards with a `LayoutBuilder`. This allows the layout to switch from a `Row` on wider screens to a `Column` on narrower screens, ensuring the cards utilize the available space effectively and stack vertically when needed.
Replaces the main content `Row` with a `LayoutBuilder`. This allows the layout to switch from a `Row` on wider screens to a `Column` on narrower screens, ensuring the recent headlines, system status, and quick actions cards stack vertically on smaller displays.
Refactors the `_QuickActionsCard` to include only "Create Headline", "Create Category", and "Create Source" actions. All actions are now represented by `ElevatedButton` widgets for a consistent appearance and navigate to their respective creation pages.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @fulleni, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request focuses on enhancing the dashboard's user interface by introducing responsive design patterns for key sections and refining the 'Quick Actions' card. The changes aim to provide a more adaptive and visually polished experience across various screen sizes, while also updating the available quick content creation actions.
Highlights
- Responsive Layout for Summary Cards: Implemented a
LayoutBuilderfor the dashboard's summary cards (_SummaryCard), allowing them to dynamically switch between a horizontalRowlayout on wider screens and a verticalColumnlayout on narrower screens (below 800px width) for improved responsiveness. - Adaptive Main Content Layout: Introduced a
LayoutBuilderfor the main content area, including recent headlines and quick actions. This enables the layout to adapt, displaying content in aRowon very wide screens (above 1200px) and stacking them vertically in aColumnon narrower views. - Refined Quick Actions Card: The
_QuickActionsCardhas been updated to useElevatedButton.iconconsistently. The 'Manage Content' and 'App Config' actions were replaced with new 'Create Category' and 'Create Source' actions, featuring updated icons and distinct styling using thesecondaryContainercolor scheme.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This PR refactors the dashboard UI to be more responsive by using LayoutBuilder to adapt to different screen widths. The changes improve the layout on both narrow and wide screens. The quick actions card has also been updated with new actions and a cleaner implementation. I've added a suggestion to improve the visual distinction of the secondary actions in the _QuickActionsCard.
| 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, | ||
| ), |
There was a problem hiding this comment.
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),
),
Status
READY
Description
Refactor dashobard UI polish
Type of Change