generated from nhcarrigan/template
feat: simplify entity cards to minimal design with detail page links
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:
@@ -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 {
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { BooksService } from '../../services/books.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 { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-books-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -642,96 +642,39 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
<div class="books-grid">
|
||||
@for (book of paginatedBooks(); track book.id) {
|
||||
<div class="book-card" [class.finished]="book.status === BookStatus.finished">
|
||||
@if (book.coverImage) {
|
||||
<img [src]="book.coverImage" [alt]="book.title" class="book-cover">
|
||||
} @else {
|
||||
<div class="book-cover placeholder">📚</div>
|
||||
}
|
||||
|
||||
<div class="book-info">
|
||||
<h3>{{ book.title }}</h3>
|
||||
<p class="author">by {{ book.author }}</p>
|
||||
@if (book.series) {
|
||||
<p class="series">
|
||||
📚 {{ book.series }}@if (book.seriesOrder) { #{{ book.seriesOrder }}}
|
||||
</p>
|
||||
<a [routerLink]="['/books', book.id]" class="card-link">
|
||||
@if (book.coverImage) {
|
||||
<img [src]="book.coverImage" [alt]="book.title" class="book-cover">
|
||||
} @else {
|
||||
<div class="book-cover placeholder">📚</div>
|
||||
}
|
||||
|
||||
<span class="status status-{{ book.status }}">
|
||||
{{ getStatusLabel(book.status) }}
|
||||
</span>
|
||||
<div class="book-info">
|
||||
<h3>{{ book.title }}</h3>
|
||||
<p class="author">by {{ book.author }}</p>
|
||||
|
||||
@if (book.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= book.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<span class="status status-{{ book.status }}">
|
||||
{{ getStatusLabel(book.status) }}
|
||||
</span>
|
||||
|
||||
@if (book.timeSpent) {
|
||||
<p class="time-spent">
|
||||
📖 Reading Time: {{ formatTimeSpent(book.timeSpent) }}
|
||||
</p>
|
||||
}
|
||||
@if (book.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= book.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="book"
|
||||
[entityId]="book.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (book.isbn) {
|
||||
<p class="isbn">ISBN: {{ book.isbn }}</p>
|
||||
}
|
||||
|
||||
@if (book.notes) {
|
||||
<p class="notes">{{ book.notes }}</p>
|
||||
}
|
||||
|
||||
@if (book.tags && book.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of book.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book.links && book.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of book.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} ↗
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(book.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(book.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(book.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(book.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(book)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -740,44 +683,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(book.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[book.id] ? 'Hide' : 'Show' }} Comments{{ comments()[book.id] ? ' (' + getCommentCount(book.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[book.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(book.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[book.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>
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[book.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(book.id)"
|
||||
(edit)="handleCommentEdit(book.id, $event)"
|
||||
(delete)="deleteComment(book.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1043,6 +948,8 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
@@ -1056,6 +963,33 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.book-cover {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@@ -1077,6 +1011,7 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
.book-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.author {
|
||||
@@ -1085,14 +1020,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.series {
|
||||
color: #8b6f47;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
@@ -1127,38 +1054,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
font-size: 0.9rem;
|
||||
color: #10b981;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.isbn {
|
||||
font-size: 0.8rem;
|
||||
color: var(--witch-mauve);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-plum);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: var(--witch-plum);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
@@ -1205,163 +1100,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.comment-content :deep(p) {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1443,21 +1181,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(139, 111, 71, 0.2);
|
||||
color: #8b6f47;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1483,28 +1206,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #8b6f47;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(139, 111, 71, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(139, 111, 71, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-section {
|
||||
flex-direction: column;
|
||||
|
||||
@@ -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 { GamesService } from '../../services/games.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 { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-games-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -604,87 +604,38 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
<div class="games-grid">
|
||||
@for (game of paginatedGames(); track game.id) {
|
||||
<div class="game-card" [class.completed]="game.status === GameStatus.completed">
|
||||
@if (game.coverImage) {
|
||||
<img [src]="game.coverImage" [alt]="game.title" class="game-cover">
|
||||
}
|
||||
|
||||
<div class="game-info">
|
||||
<h3>{{ game.title }}</h3>
|
||||
@if (game.platform) {
|
||||
<p class="platform">{{ game.platform }}</p>
|
||||
}
|
||||
@if (game.series) {
|
||||
<p class="series">
|
||||
📚 {{ game.series }}@if (game.seriesOrder) { #{{ game.seriesOrder }}}
|
||||
</p>
|
||||
}
|
||||
<span class="status status-{{ game.status }}">
|
||||
{{ getStatusLabel(game.status) }}
|
||||
</span>
|
||||
|
||||
@if (game.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= game.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/games', game.id]" class="card-link">
|
||||
@if (game.coverImage) {
|
||||
<img [src]="game.coverImage" [alt]="game.title" class="game-cover">
|
||||
}
|
||||
|
||||
@if (game.timeSpent) {
|
||||
<p class="time-spent">
|
||||
⏱️ Time Played: {{ formatTimeSpent(game.timeSpent) }}
|
||||
</p>
|
||||
}
|
||||
<div class="game-info">
|
||||
<h3>{{ game.title }}</h3>
|
||||
@if (game.platform) {
|
||||
<p class="platform">{{ game.platform }}</p>
|
||||
}
|
||||
<span class="status status-{{ game.status }}">
|
||||
{{ getStatusLabel(game.status) }}
|
||||
</span>
|
||||
|
||||
@if (game.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= game.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="game"
|
||||
[entityId]="game.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (game.notes) {
|
||||
<p class="notes">{{ game.notes }}</p>
|
||||
}
|
||||
|
||||
@if (game.tags && game.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of game.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game.links && game.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of game.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} ↗
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(game.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (game.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(game.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(game.createdAt) }}
|
||||
</p>
|
||||
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(game.updatedAt) }}
|
||||
</p>
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(game)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -693,44 +644,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(game.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[game.id] ? 'Hide' : 'Show' }} Comments{{ comments()[game.id] ? ' (' + getCommentCount(game.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[game.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(game.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[game.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>
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[game.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(game.id)"
|
||||
(edit)="handleCommentEdit(game.id, $event)"
|
||||
(delete)="deleteComment(game.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -940,6 +853,8 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
@@ -951,6 +866,17 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -964,6 +890,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
.game-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.platform {
|
||||
@@ -972,25 +899,19 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.series {
|
||||
color: #8b6f47;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status-playing { background: #fef3c7; color: #92400e; }
|
||||
.status-completed { background: #d1fae5; color: #065f46; }
|
||||
.status-backlog { background: #e0e7ff; color: #3730a3; }
|
||||
.status-retired { background: #f3f4f6; color: #4b5563; }
|
||||
|
||||
.rating {
|
||||
margin: 0.5rem 0;
|
||||
@@ -1005,30 +926,19 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
font-size: 0.9rem;
|
||||
color: #10b981;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -1050,127 +960,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
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: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
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: #374151;
|
||||
}
|
||||
|
||||
.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: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Tags and Links Styling */
|
||||
/* Tags and Links Styling for Forms */
|
||||
.tags-input-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -1216,21 +1006,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1254,47 +1029,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #ff6b6b;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #ff6b6b;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MangaService } from '../../services/manga.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 { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-manga-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -561,84 +561,36 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
<div class="manga-grid">
|
||||
@for (manga of paginatedManga(); track manga.id) {
|
||||
<div class="manga-card" [class.completed]="manga.status === MangaStatus.completed">
|
||||
@if (manga.coverImage) {
|
||||
<img [src]="manga.coverImage" [alt]="manga.title" class="manga-cover">
|
||||
}
|
||||
|
||||
<div class="manga-info">
|
||||
<h3>{{ manga.title }}</h3>
|
||||
<p class="author">by {{ manga.author }}</p>
|
||||
<span class="status status-{{ manga.status }}">
|
||||
{{ getStatusLabel(manga.status) }}
|
||||
</span>
|
||||
|
||||
@if (manga.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= manga.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/manga', manga.id]" class="card-link">
|
||||
@if (manga.coverImage) {
|
||||
<img [src]="manga.coverImage" [alt]="manga.title" class="manga-cover">
|
||||
}
|
||||
|
||||
@if (manga.timeSpent) {
|
||||
<p class="time-spent">
|
||||
📚 Reading Time: {{ formatTimeSpent(manga.timeSpent) }}
|
||||
</p>
|
||||
}
|
||||
<div class="manga-info">
|
||||
<h3>{{ manga.title }}</h3>
|
||||
<p class="author">by {{ manga.author }}</p>
|
||||
<span class="status status-{{ manga.status }}">
|
||||
{{ getStatusLabel(manga.status) }}
|
||||
</span>
|
||||
|
||||
@if (manga.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= manga.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="manga"
|
||||
[entityId]="manga.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (manga.notes) {
|
||||
<p class="notes">{{ manga.notes }}</p>
|
||||
}
|
||||
|
||||
@if (manga.tags && manga.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of manga.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga.links && manga.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of manga.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} ↗
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(manga.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(manga.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(manga.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(manga.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(manga)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -647,40 +599,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(manga.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[manga.id] ? 'Hide' : 'Show' }} Comments{{ comments()[manga.id] ? ' (' + getCommentCount(manga.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[manga.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(manga.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[manga.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(manga.id)"
|
||||
(edit)="handleCommentEdit(manga.id, $event)"
|
||||
(delete)="deleteComment(manga.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -891,6 +809,8 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.manga-card:hover {
|
||||
@@ -902,6 +822,13 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.manga-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -915,6 +842,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
.manga-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.author {
|
||||
@@ -930,6 +858,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status-READING { background: #fef3c7; color: #92400e; }
|
||||
@@ -949,30 +878,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
font-size: 0.9rem;
|
||||
color: #10b981;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -994,145 +911,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
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: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
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: #374151;
|
||||
}
|
||||
|
||||
.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: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
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: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1214,25 +992,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(0, 184, 148, 0.2);
|
||||
color: #00b894;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1253,28 +1012,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #00b894;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(0, 184, 148, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(0, 184, 148, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MangaListComponent implements OnInit {
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MusicService } from '../../services/music.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 { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-music-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -623,98 +623,52 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
<div class="music-grid">
|
||||
@for (music of paginatedMusic(); track music.id) {
|
||||
<div class="music-card" [class.completed]="music.status === MusicStatus.completed">
|
||||
@if (music.coverArt) {
|
||||
<img [src]="music.coverArt" [alt]="music.title" class="music-cover">
|
||||
} @else {
|
||||
<div class="music-cover placeholder">
|
||||
@switch (music.type) {
|
||||
@case (MusicType.album) { 💿 }
|
||||
@case (MusicType.single) { 🎵 }
|
||||
@case (MusicType.ep) { 🎶 }
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="music-info">
|
||||
<h3>{{ music.title }}</h3>
|
||||
<p class="artist">{{ music.artist }}</p>
|
||||
|
||||
<div class="badges">
|
||||
<span class="type-badge type-{{ music.type }}">
|
||||
{{ getTypeLabel(music.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ music.status }}">
|
||||
{{ getStatusLabel(music.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if (music.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= music.rating!">★</span>
|
||||
<a [routerLink]="['/music', music.id]" class="card-link">
|
||||
@if (music.coverArt) {
|
||||
<img [src]="music.coverArt" [alt]="music.title" class="music-cover">
|
||||
} @else {
|
||||
<div class="music-cover placeholder">
|
||||
@switch (music.type) {
|
||||
@case (MusicType.album) { 💿 }
|
||||
@case (MusicType.single) { 🎵 }
|
||||
@case (MusicType.ep) { 🎶 }
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.timeSpent) {
|
||||
<p class="time-spent">
|
||||
🎵 Listening Time: {{ formatTimeSpent(music.timeSpent) }}
|
||||
</p>
|
||||
}
|
||||
<div class="music-info">
|
||||
<h3>{{ music.title }}</h3>
|
||||
<p class="artist">{{ music.artist }}</p>
|
||||
|
||||
@if (music.type) {
|
||||
<div class="badges">
|
||||
<span class="type-badge type-{{ music.type }}">
|
||||
{{ getTypeLabel(music.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ music.status }}">
|
||||
{{ getStatusLabel(music.status) }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= music.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="music"
|
||||
[entityId]="music.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (music.notes) {
|
||||
<p class="notes">{{ music.notes }}</p>
|
||||
}
|
||||
|
||||
@if (music.tags && music.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of music.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.links && music.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of music.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} ↗
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(music.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(music.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(music.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(music.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(music)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -723,40 +677,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(music.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[music.id] ? 'Hide' : 'Show' }} Comments{{ comments()[music.id] ? ' (' + getCommentCount(music.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[music.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(music.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[music.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(music.id)"
|
||||
(edit)="handleCommentEdit(music.id, $event)"
|
||||
(delete)="deleteComment(music.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -996,6 +916,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.music-card:hover {
|
||||
@@ -1009,6 +931,17 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.music-cover {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@@ -1030,6 +963,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
.music-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.artist {
|
||||
@@ -1044,6 +978,19 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
@@ -1099,32 +1046,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-plum);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
font-size: 0.9rem;
|
||||
color: #8b5cf6;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: var(--witch-plum);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
@@ -1175,159 +1096,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1409,21 +1177,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(116, 185, 255, 0.2);
|
||||
color: #74b9ff;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1448,28 +1201,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #74b9ff;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(116, 185, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(116, 185, 255, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MusicListComponent implements OnInit {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ShowsService } from '../../services/shows.service';
|
||||
import { AuthService } from '../../services/auth.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 { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shows-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, RouterLink, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -555,84 +555,38 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
<div class="shows-grid">
|
||||
@for (show of paginatedShows(); track show.id) {
|
||||
<div class="show-card" [class.completed]="show.status === ShowStatus.completed">
|
||||
@if (show.coverImage) {
|
||||
<img [src]="show.coverImage" [alt]="show.title" class="show-cover">
|
||||
}
|
||||
|
||||
<div class="show-info">
|
||||
<h3>{{ show.title }}</h3>
|
||||
<p class="type">{{ getTypeLabel(show.type) }}</p>
|
||||
<span class="status status-{{ show.status }}">
|
||||
{{ getStatusLabel(show.status) }}
|
||||
</span>
|
||||
|
||||
@if (show.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= show.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/shows', show.id]" class="card-link">
|
||||
@if (show.coverImage) {
|
||||
<img [src]="show.coverImage" [alt]="show.title" class="show-cover">
|
||||
}
|
||||
|
||||
@if (show.timeSpent) {
|
||||
<p class="time-spent">
|
||||
📺 Watch Time: {{ formatTimeSpent(show.timeSpent) }}
|
||||
</p>
|
||||
}
|
||||
<div class="show-info">
|
||||
<h3>{{ show.title }}</h3>
|
||||
@if (show.type) {
|
||||
<p class="type">{{ getTypeLabel(show.type) }}</p>
|
||||
}
|
||||
<span class="status status-{{ show.status }}">
|
||||
{{ getStatusLabel(show.status) }}
|
||||
</span>
|
||||
|
||||
@if (show.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= show.rating!">★</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="show"
|
||||
[entityId]="show.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (show.notes) {
|
||||
<p class="notes">{{ show.notes }}</p>
|
||||
}
|
||||
|
||||
@if (show.tags && show.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of show.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show.links && show.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of show.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} ↗
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(show.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(show.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(show.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(show.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(show)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -641,40 +595,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(show.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[show.id] ? 'Hide' : 'Show' }} Comments{{ comments()[show.id] ? ' (' + getCommentCount(show.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[show.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(show.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[show.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(show.id)"
|
||||
(edit)="handleCommentEdit(show.id, $event)"
|
||||
(delete)="deleteComment(show.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -885,6 +805,8 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.show-card:hover {
|
||||
@@ -896,6 +818,17 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: #e84393;
|
||||
}
|
||||
|
||||
.show-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -909,6 +842,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.show-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.type {
|
||||
@@ -928,6 +862,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.status-WATCHING { background: #fef3c7; color: #92400e; }
|
||||
.status-COMPLETED { background: #d1fae5; color: #065f46; }
|
||||
.status-WANT_TO_WATCH { background: #e0e7ff; color: #3730a3; }
|
||||
.status-RETIRED { background: #fecaca; color: #991b1b; }
|
||||
|
||||
.rating {
|
||||
margin: 0.5rem 0;
|
||||
@@ -942,30 +877,18 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
font-size: 0.9rem;
|
||||
color: #8b5cf6;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -987,145 +910,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
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: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
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: #374151;
|
||||
}
|
||||
|
||||
.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: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
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: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1207,13 +991,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(232, 67, 147, 0.2);
|
||||
color: #e84393;
|
||||
@@ -1246,28 +1023,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #e84393;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(232, 67, 147, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(232, 67, 147, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ShowsListComponent implements OnInit {
|
||||
|
||||
Reference in New Issue
Block a user