chore(ui): enforce placeholder aspect ratios#320
Open
alexhb1 wants to merge 2 commits intogrimmory-tools:developfrom
Open
chore(ui): enforce placeholder aspect ratios#320alexhb1 wants to merge 2 commits intogrimmory-tools:developfrom
alexhb1 wants to merge 2 commits intogrimmory-tools:developfrom
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🧰 Additional context used🔀 Multi-repo context grimmory-tools/grimmory-docsgrimmory-tools/grimmory-docs
Assessment: documentation references cover generation, cropping, thumbnails, and grid/card displays that are relevant context for this PR's enforced aspect-ratio and border-radius fixes. No code-level consumers or breaking API changes were found in this repo. 📝 WalkthroughWalkthroughThree small styling updates: two components now enforce a 5:7 aspect-ratio for cover images, and the cover placeholder gains Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@frontend/src/app/features/book/components/book-card-lite/book-card-lite-component.scss`:
- Around line 7-11: The .book-cover rule forces a 5:7 aspect ratio but lacks
object-fit, causing <img class="book-cover"> images to stretch; update the base
.book-cover CSS rule in book-card-lite-component.scss to include object-fit:
cover so images maintain aspect ratio and fill the box (keeping any existing
audiobook-only override as is).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5a8582d4-29c0-4355-8fcd-f8ae6fafed53
📒 Files selected for processing (3)
frontend/src/app/features/book/components/book-browser/book-table/book-table.component.scssfrontend/src/app/features/book/components/book-card-lite/book-card-lite-component.scssfrontend/src/app/shared/components/cover-generator/cover-generator.component.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Test Suite / Backend Tests
- GitHub Check: Test Suite / Frontend Tests
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (java-kotlin)
🧰 Additional context used
📓 Path-based instructions (3)
frontend/src/**/*.{ts,tsx,html,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation in TypeScript, HTML, and SCSS files
Files:
frontend/src/app/shared/components/cover-generator/cover-generator.component.tsfrontend/src/app/features/book/components/book-card-lite/book-card-lite-component.scssfrontend/src/app/features/book/components/book-browser/book-table/book-table.component.scss
frontend/src/app/**/*.component.ts
📄 CodeRabbit inference engine (AGENTS.md)
Keep Angular code on standalone components. Do not add NgModules
Files:
frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
frontend/src/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
frontend/src/app/**/*.{ts,tsx}: Preferinject()over constructor injection
Followfrontend/eslint.config.js: component selectors useapp-*, directive selectors useapp*, andanyis disallowed
Files:
frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
🔀 Multi-repo context grimmory-tools/grimmory-docs
Linked repositories findings
grimmory-tools/grimmory-docs
- docs/tools/cover-art-settings.md — Documentation for cover image handling and settings; mentions cropping and cover processing that may relate to UI changes for cover placeholders. [::grimmory-tools/grimmory-docs::docs/tools/cover-art-settings.md]
- docs/tools/global-preferences.md — Describes cover thumbnail generation, aspect-ratio threshold and regeneration instructions (lines referencing aspect ratio/cover processing). UI behaviour changes around aspect-ratio/placeholders might warrant doc updates here. [::grimmory-tools/grimmory-docs::docs/tools/global-preferences.md]
- docs/view-preferences.md — Contains omitted long matching lines but is part of display preferences; could reference cover display options affected by placeholder aspect-ratio changes. [::grimmory-tools/grimmory-docs::docs/view-preferences.md]
- docs/book-browser/grid.md — Describes grid view of cover cards (cover sizing/layout UI); front-end aspect-ratio fixes may affect examples or screenshots referenced here. [::grimmory-tools/grimmory-docs::docs/book-browser/grid.md]
- Multiple other docs reference "cover" broadly (getting-started, metadata docs, library docs, readers, integrations) — these are documentation surfaces that mention covers and might need minor wording/screenshots if the visual behaviour changed (examples: docs/getting-started.md, docs/metadata/, docs/library/, docs/readers/, docs/integration/). Representative file list:
- docs/getting-started.md [::grimmory-tools/grimmory-docs::docs/getting-started.md]
- docs/metadata/file-naming-patterns.md [::grimmory-tools/grimmory-docs::docs/metadata/file-naming-patterns.md]
- docs/metadata/metadata-settings.md [::grimmory-tools/grimmory-docs::docs/metadata/metadata-settings.md]
- docs/library/physical-books.md [::grimmory-tools/grimmory-docs::docs/library/physical-books.md]
- docs/readers/audiobook-player.md [::grimmory-tools/grimmory-docs::docs/readers/audiobook-player.md]
- docs/integration/opds.md (thumbnail API reference) [::grimmory-tools/grimmory-docs::docs/integration/opds.md]
Summary: No code consumers found in this repository (it's documentation). Relevant doc pages mention cover handling, aspect-ratio, thumbnails, and display preferences — consider updating wording/screenshots if the UI visual behavior changed due to enforced aspect-ratio and border-radius inheritance.
🔇 Additional comments (2)
frontend/src/app/features/book/components/book-browser/book-table/book-table.component.scss (1)
61-64: Same fixed-ratio image stretching risk here.This repeats the same pattern flagged in
book-card-lite-component.scss: fixedaspect-ratioon an image class withoutobject-fit.frontend/src/app/shared/components/cover-generator/cover-generator.component.ts (1)
54-54: Good fix for placeholder corner consistency.
border-radius: inheriton Line 54 cleanly aligns placeholder rendering with the card radius.
frontend/src/app/features/book/components/book-card-lite/book-card-lite-component.scss
Show resolved
Hide resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
I noticed a couple areas in the UI (E.g. book details similar books) that weren't correctly enforcing the correct aspect ratio or rounded corners for the new CSS placeholders.
Linked Issue: Fixes #
Changes
Summary by CodeRabbit