matthias.lotz
15fc02235f
Phase 4 Progress - Tasks 7 & 8 Complete Countdown Display (Task 7): - getDaysUntilDeletion() helper in ImageGalleryCard - Countdown widget for unapproved groups - Shows '⏰ Wird gelöscht in: X Tagen' - Only visible for pending groups in moderation mode - Yellow warning style with border accent - CSS: .deletion-countdown with responsive design Approval Button Improvements (Task 8): - Upgraded from alert() to SweetAlert2 - Success message with auto-close (2s) - Error handling with detailed messages - Optimistic UI updates (groups move between sections) - Different messages for approve/unapprove actions Files modified: - ImageGalleryCard.js: Countdown logic and display - ImageGallery.css: Countdown styling - ModerationGroupsPage.js: SweetAlert2 integration Tasks completed: ✅ 4.7, ✅ 4.8
346 lines
6.4 KiB
CSS
346 lines
6.4 KiB
CSS
/* ImageGallery and ImageGalleryCard Styles */
|
|
|
|
/* Make cards use column layout so image + content align and cards stretch uniformly */
|
|
|
|
/* ImageGalleryCard - Base styles */
|
|
.image-gallery-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.image-gallery-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.image-gallery-card.pending {
|
|
border-left: 5px solid #ffc107;
|
|
}
|
|
|
|
.image-gallery-card.approved {
|
|
border-left: 5px solid #28a745;
|
|
}
|
|
|
|
/* ImageGalleryCard - Preview area */
|
|
.image-gallery-card-preview {
|
|
position: relative;
|
|
height: 200px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.image-gallery-card-preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Support legacy class for backward compatibility */
|
|
.image-gallery-card .group-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* ImageGalleryCard - Content area */
|
|
.image-gallery-card-content {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.image-gallery-card-info {
|
|
padding: 15px;
|
|
}
|
|
|
|
.image-gallery-card-info h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #333;
|
|
}
|
|
|
|
.image-gallery-card-meta {
|
|
color: #007bff;
|
|
font-weight: 500;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.image-gallery-card-description {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
margin: 8px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.image-gallery-card-upload-date {
|
|
color: #6c757d;
|
|
font-size: 0.8rem;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
/* Deletion Countdown */
|
|
.deletion-countdown {
|
|
background: #fff3cd;
|
|
border-left: 3px solid #ffc107;
|
|
padding: 8px 12px;
|
|
margin-top: 10px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.countdown-icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.countdown-text {
|
|
color: #856404;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ImageGalleryCard - Actions area */
|
|
.image-gallery-card-actions {
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ImageGalleryCard - No preview state */
|
|
.image-gallery-card-no-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ImageGalleryCard - Image count badge */
|
|
.image-gallery-card-image-count {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* ImageGalleryCard - Image order badge (preview mode) */
|
|
.image-gallery-card-image-order {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ImageGalleryCard - File metadata */
|
|
.image-gallery-card-file-meta {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Utility classes to replace inline styles for consistent sizing */
|
|
.grid-item-stretch {
|
|
display: flex;
|
|
}
|
|
|
|
.card-stretch {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ImageGallery Grid Container */
|
|
.image-gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
/* ImageGallery Container */
|
|
.image-gallery-container {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.image-gallery-title {
|
|
margin-bottom: 15px;
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #333;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.image-gallery-empty {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Responsive: 2 columns on tablets */
|
|
@media (max-width: 1024px) {
|
|
.image-gallery-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Drag-and-Drop Styles */
|
|
.image-gallery-card.reorderable {
|
|
cursor: grab;
|
|
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.image-gallery-card.reorderable:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.image-gallery-card.dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(5deg);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.image-gallery-card.drag-overlay {
|
|
opacity: 0.9;
|
|
transform: rotate(5deg);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
|
|
z-index: 2000;
|
|
}
|
|
|
|
/* Drag Handle */
|
|
.drag-handle {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
cursor: grab;
|
|
user-select: none;
|
|
z-index: 10;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.image-gallery-card.reorderable:hover .drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.drag-handle span {
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Touch-friendly drag handle on mobile */
|
|
@media (max-width: 768px) {
|
|
.drag-handle {
|
|
opacity: 1;
|
|
padding: 8px 12px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.image-gallery-card.reorderable {
|
|
cursor: default; /* No grab cursor on touch devices */
|
|
}
|
|
}
|
|
|
|
/* Responsive: 1 column on mobile */
|
|
@media (max-width: 768px) {
|
|
.image-gallery-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.image-gallery-card-actions {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* Image Description Edit Mode */
|
|
.image-description-edit {
|
|
padding: 10px;
|
|
border-top: 1px solid #e0e0e0;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.image-description-edit textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 14px;
|
|
resize: vertical;
|
|
min-height: 50px;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.image-description-edit textarea:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.image-description-edit .char-counter {
|
|
display: block;
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.image-description-edit .char-counter.limit-reached {
|
|
color: #f44336;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Image Description Display Mode */
|
|
.image-description-display {
|
|
padding: 10px;
|
|
border-top: 1px solid #e0e0e0;
|
|
font-size: 14px;
|
|
color: #555;
|
|
font-style: italic;
|
|
background-color: #f8f9fa;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Edit Button Styles */
|
|
.btn-edit-mode {
|
|
background: linear-gradient(45deg, #2196F3 30%, #1976D2 90%);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.btn-edit-mode:hover {
|
|
background: linear-gradient(45deg, #1976D2 30%, #2196F3 90%);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
|
|
}
|