Skip to content

feat(home): center cards and contain posters so actions stay visible #124

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
CodeWithMa merged 3 commits into from
Sep 4, 2026
Merged

feat(home): center cards and contain posters so actions stay visible #124

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
084f120
feat(home): center cards and contain posters so actions stay visible
CodeWithMaBot Sep 4, 2026
14d379f
fix(home): show full poster artwork without cropping
CodeWithMaBot Sep 4, 2026
d7a4caa
fix(home): drop Mark Completed so actions fit on one row
CodeWithMaBot Sep 4, 2026
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
51 changes: 22 additions & 29 deletions src/app/components/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,44 +15,41 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
<div>
<h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">What should I watch now?</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div>
<h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 justify-items-center">
<div class="w-full max-w-[280px] justify-self-center">
<h2
class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
>
Next Series
</h2>
@if (nextSeries()) {
<div class="mb-4">
<div class="w-full">
<!-- Narrow card (280px) keeps natural 2/3 poster (~420px tall) fully visible, no cropping -->
<app-item-card [item]="nextSeries()!" />
<div class="flex gap-2 mt-3">
<div class="flex flex-wrap justify-center gap-2 mt-3">
<button
(click)="markItem(nextSeries, 'watched')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-transparent rounded bg-accent-primary text-white cursor-pointer text-xs font-medium hover:bg-accent-primary-hover"
>
Mark Watched
</button>
<button
(click)="markItem(nextSeries, 'completed')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Mark Completed
</button>
<button
(click)="markItem(nextSeries, 'paused')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Pause
</button>
<button
(click)="markItem(nextSeries, 'dropped')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Drop
</button>
</div>
</div>
} @else {
<p
class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
class="w-full p-6 text-center text-sm rounded-lg border border-dashed border-light-border dark:border-dark-border text-light-font-muted dark:text-dark-font-muted"
>
@if (hasSeries()) {
@if (hasInProgressSeries()) {
Expand All @@ -67,43 +64,39 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
}
</div>

<div>
<h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
<div class="w-full max-w-[280px] justify-self-center">
<h2
class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
>
Next Movie
</h2>
@if (nextMovie()) {
<div class="mb-4">
<div class="w-full">
<app-item-card [item]="nextMovie()!" />
<div class="flex gap-2 mt-3">
<div class="flex flex-wrap justify-center gap-2 mt-3">
<button
(click)="markItem(nextMovie, 'watched')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-transparent rounded bg-accent-primary text-white cursor-pointer text-xs font-medium hover:bg-accent-primary-hover"
>
Mark Watched
</button>
<button
(click)="markItem(nextMovie, 'completed')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Mark Completed
</button>
<button
(click)="markItem(nextMovie, 'paused')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Pause
</button>
<button
(click)="markItem(nextMovie, 'dropped')"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
>
Drop
</button>
</div>
</div>
} @else {
<p
class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
class="w-full p-6 text-center text-sm rounded-lg border border-dashed border-light-border dark:border-dark-border text-light-font-muted dark:text-dark-font-muted"
>
@if (hasMovies()) {
No movies currently being watched
Expand Down
Loading