improvement(item_detail): improve design

[igorsimb]

Fixes https://github.com/igorsimb/mp-monitor/issues/59

Also, some minor UI improvement on other pages.

Summary by CodeRabbit

• New Features

  • Enhanced item detail page with improved text, icons, and gradient card styling.
  • Updated homepage with subtle shadow and border styling for images.
  • Introduced icons for price trends and enhanced display in item details.

• Bug Fixes

  • Corrected the calculation of percentage change to reflect accurate values.

• Style

  • Removed breadcrumb navigation and updated styling for a cleaner look.
  • Added margin to buttons for better layout spacing.
  • Adjusted table styling for better readability of price percent changes.
  • Updated custom CSS with new styles for item price cards and icons.

• Chores

  • Minor adjustments in layout and styling across various templates for consistency and improved user experience.

[coderabbitai[bot]]

Walkthrough

## Walkthrough The changes encompass a redesign of the Item List and Item Detail pages to align with the homepage's new design. This includes updates to navigation, styling enhancements for consistency, and layout adjustments for clarity and visual appeal. The modifications aim to improve user experience by making information more accessible and the interface more intuitive. ## Changes | Files | Changes | |--------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `.../item_detail.html` | - Removed breadcrumb navigation
- Updated breadcrumb styling, added emphasis to links
- Changed card styling, added gradients
- Added icons, improved text in item detail
- Adjusted card layout/styling for price info
- Enhanced price display with icons | | `.../create_interval_form.html` | - Added margin to button | | `.../homepage/how_does_it_work.html` | - Added classes for image styling consistency | | `.../items_table.html` | - Added margin class to table
- Changed header text for "Разница %" column, added link
- Adjusted styling/content display for price percent changes | | `.../update_items_form.html` | - Adjusted button margin with `ms-2` class | | `main/utils.py` | - Modified `calculate_percentage_change` function by removing absolute value calculation | | `static/css/custom.css` | - Added `.material-symbols-sharp` to `.custom-material-icon` selector
- Added styles for `.item-price-card` | ## Assessment against linked issues | Objective | Addressed | Explanation | |---------------------------------------------------------------------------|-----------|-------------| | Redesign Item List and Item Detail pages in accordance to Homepage (#59) | ✅ | | The changes made to the templates and styling files directly address the objective outlined in issue #59. The redesign efforts for both the Item List and Item Detail pages have been implemented, aligning these pages with the homepage's new design aesthetic. The updates to breadcrumb navigation, card styling, and the addition of icons and gradients, among other changes, contribute to a cohesive look and feel across the site.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

---

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.