nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: simplify entity cards to minimal design with detail page links

Browse Source 
Simplified all entity list cards to show only essential information:

Cards now display ONLY:
- Cover/poster image (if available)
- Title (clickable link to detail page)
- Primary identifier (author/artist/platform)
- Status badge
- Rating stars (if available)
- Like button
- Admin actions (Edit/Delete - only for admins)

Removed from cards:
- Series information
- Time tracking
- Notes
- Tags
- External links
- Dates (all timestamps)
- Comments sections

Technical changes:
- Wrapped card content in routerLink for navigation
- Separated interactive elements (like/admin buttons) from clickable area
- Removed unused CommentDisplayComponent imports
- Updated CSS for cleaner, more compact card layouts
- All removed content still accessible on detail pages

Affected components:
- Games list
- Books list
- Music list
- Art gallery
- Shows list
- Manga list

This creates a cleaner browsing experience whilst encouraging users
to explore detail pages for complete information.
This commit is contained in:
Hikari
2026-02-20 01:20:28 -08:00
committed by Naomi Carrigan
parent cce520598d
commit 86e65d5688
6 changed files with 299 additions and 1877 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/components/art/art-gallery.component.ts
+34 -270
View File
@@ -7,6 +7,7 @@
import { Component, OnInit, inject, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ArtService } from '../../services/art.service';
import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { PaginationComponent } from '../shared/pagination.component';
import { LikeButtonComponent } from '../shared/like-button.component';
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-art-gallery',
standalone: true,
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
template: `
<div class="container">
<div class="header-section">
@@ -392,49 +392,29 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
<div class="gallery-grid">
@for (art of paginatedArtPieces(); track art.id) {
<div class="art-card">
<div class="art-image-container">
<img
[src]="art.imageUrl"
[alt]="art.description || art.title"
class="art-image"
(click)="openLightbox(art)"
(keyup.enter)="openLightbox(art)"
(keyup.space)="openLightbox(art)"
tabindex="0"
role="button"
>
</div>
<a [routerLink]="['/art', art.id]" class="card-link">
<div class="art-image-container">
<img
[src]="art.imageUrl"
[alt]="art.description || art.title"
class="art-image"
>
</div>
<div class="art-info">
<h3>{{ art.title }}</h3>
<p class="artist">by {{ art.artist }}</p>
<p class="date-added">Added: {{ formatDate(art.dateAdded) }}</p>
<div class="art-info">
<h3>{{ art.title }}</h3>
<p class="artist">by {{ art.artist }}</p>
</div>
</a>
<div class="card-actions">
<app-like-button
entityType="art"
[entityId]="art.id"
></app-like-button>
@if (art.tags && art.tags.length > 0) {
<div class="tags-display">
@for (tag of art.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (art.links && art.links.length > 0) {
<div class="links-display">
@for (link of art.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (authService.isAdmin()) {
<div class="actions">
<div class="admin-actions">
<button (click)="startEdit(art)" class="btn btn-secondary btn-sm">
Edit
</button>
@@ -443,40 +423,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
</button>
</div>
}
<div class="comments-section">
<button (click)="toggleComments(art.id)" class="btn btn-secondary btn-sm comments-toggle">
{{ expandedComments()[art.id] ? 'Hide' : 'Show' }} Comments{{ comments()[art.id] ? ' (' + getCommentCount(art.id) + ')' : '' }}
</button>
@if (expandedComments()[art.id]) {
<div class="comments-container">
@if (authService.isAuthenticated()) {
@if (authService.user()?.isBanned) {
<div class="banned-notice">
You have been banned from commenting.
</div>
} @else {
<form (ngSubmit)="addComment(art.id)" class="comment-form">
<textarea
[(ngModel)]="newCommentContent[art.id]"
name="comment"
placeholder="Add a comment (Markdown supported)..."
rows="2"
></textarea>
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
</form>
}
}
<app-comment-display
[comments]="getCommentsSignal(art.id)"
(edit)="handleCommentEdit(art.id, $event)"
(delete)="deleteComment(art.id, $event)"
/>
</div>
}
</div>
</div>
</div>
}
@@ -725,6 +671,8 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
box-shadow: 0 4px 12px var(--witch-shadow);
border: 2px solid var(--witch-lavender);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.art-card:hover {
@@ -732,11 +680,17 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
box-shadow: 0 8px 24px var(--witch-shadow);
}
.card-link {
text-decoration: none;
color: inherit;
display: block;
flex: 1;
}
.art-image-container {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
cursor: pointer;
}
.art-image {
@@ -746,7 +700,7 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
transition: transform 0.3s;
}
.art-image:hover {
.card-link:hover .art-image {
transform: scale(1.05);
}
@@ -762,19 +716,19 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
.artist {
color: var(--witch-mauve);
font-style: italic;
margin: 0 0 0.5rem 0;
margin: 0;
}
.date-added {
font-size: 0.85rem;
color: var(--witch-mauve);
margin: 0 0 1rem 0;
.card-actions {
padding: 0 1rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.actions {
.admin-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.btn {
@@ -869,159 +823,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
opacity: 0.8;
}
/* Comments */
.comments-section {
margin-top: 1rem;
border-top: 1px solid var(--witch-lavender);
padding-top: 1rem;
}
.comments-toggle {
width: 100%;
}
.comments-container {
margin-top: 1rem;
}
.comment-form {
margin-bottom: 1rem;
}
.comment-form textarea {
width: 100%;
padding: 0.5rem;
border: 2px solid var(--witch-lavender);
border-radius: 4px;
font-size: 0.9rem;
background-color: var(--witch-moon);
color: var(--witch-purple);
resize: vertical;
margin-bottom: 0.5rem;
}
.comment-form textarea:focus {
outline: none;
border-color: var(--witch-rose);
}
.comment {
background: var(--witch-moon);
border: 1px solid var(--witch-lavender);
border-radius: 4px;
padding: 0.75rem;
margin-bottom: 0.5rem;
}
.comment-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.comment-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
}
.comment-author {
font-weight: 500;
color: var(--witch-plum);
}
.discord-badge {
background: #5865f2;
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.vip-badge {
background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #1a1a1a;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.mod-badge {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.staff-badge {
background: linear-gradient(135deg, #e84393, #fd79a8);
color: white;
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 600;
}
.comment-date {
font-size: 0.75rem;
color: var(--witch-mauve);
}
.comment-content {
font-size: 0.9rem;
color: var(--witch-purple);
}
.comments-loading,
.no-comments {
text-align: center;
padding: 1rem;
color: var(--witch-mauve);
font-size: 0.9rem;
}
.banned-notice {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
padding: 0.75rem 1rem;
border-radius: 4px;
text-align: center;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.comment-edit-form {
margin-top: 0.5rem;
}
.comment-edit-form textarea {
width: 100%;
padding: 0.5rem;
border: 2px solid var(--witch-lavender);
border-radius: 4px;
font-size: 0.9rem;
background-color: var(--witch-moon);
color: var(--witch-purple);
resize: vertical;
}
.comment-edit-form textarea:focus {
outline: none;
border-color: var(--witch-rose);
}
.comment-edit-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.tags-input-container {
display: flex;
@@ -1071,21 +872,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(253, 203, 110, 0.2);
color: #b38f00;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
@@ -1110,28 +896,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #b38f00;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(253, 203, 110, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(253, 203, 110, 0.2);
text-decoration: underline;
}
`]
})
export class ArtGalleryComponent implements OnInit {