From bf4ff75ce5896572caefbc06131867423b12de8d Mon Sep 17 00:00:00 2001 From: "matthias.lotz" Date: Sun, 19 Oct 2025 21:59:37 +0200 Subject: [PATCH] CSS Anpassungen, noch nicht gut --- .../Components/ComponentUtils/Css/main.css | 76 +++++ .../MultiUpload/ImagePreviewGallery.js | 31 +- .../src/Components/Pages/Css/Background.css | 7 + .../Components/Pages/Css/GroupImagesPage.css | 3 - .../Pages/Css/GroupsOverviewPage.css | 14 - .../Components/Pages/Css/ModerationPage.css | 284 ------------------ .../src/Components/Pages/GroupImagesPage.js | 2 +- .../Components/Pages/GroupsOverviewPage.js | 23 +- frontend/src/index.js | 1 + 9 files changed, 109 insertions(+), 332 deletions(-) create mode 100644 frontend/src/Components/ComponentUtils/Css/main.css diff --git a/frontend/src/Components/ComponentUtils/Css/main.css b/frontend/src/Components/ComponentUtils/Css/main.css new file mode 100644 index 0000000..63e797a --- /dev/null +++ b/frontend/src/Components/ComponentUtils/Css/main.css @@ -0,0 +1,76 @@ +/* Main shared styles for cards, buttons, modals used across pages */ + +/* Group Card */ +.group-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; +} + +/* Make cards use column layout so image + content align and cards stretch uniformly */ +.group-card { display: flex; flex-direction: column; } +.group-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); } +.group-card.pending { border-left: 5px solid #ffc107; } +.group-card.approved { border-left: 5px solid #28a745; } +.group-preview { position: relative; height: 200px; background: #f8f9fa; } +.preview-image { width: 100%; height: 100%; object-fit: cover; } + +/* Support legacy class used by GroupsOverviewPage (CardMedia with class 'group-image') */ +.group-card .group-image { width: 100%; height: 200px; object-fit: cover; display: block; } + +/* Ensure content area expands to fill remaining space */ +.group-content { flex-grow: 1; display: flex; flex-direction: column; } + +/* Utility classes to replace inline styles for consistent sizing */ +.grid-item-stretch { display: flex; } +.card-stretch { display: flex; flex-direction: column; height: 100%; } +.no-preview { display:flex; align-items:center; justify-content:center; height:100%; color:#6c757d; font-style:italic; } +.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; } +.group-info { padding:15px; } +.group-info h3 { margin:0 0 10px 0; color:#333; } +.group-meta { color:#007bff; font-weight:500; margin:5px 0; } +.group-description { color:#6c757d; font-size:0.9rem; margin:8px 0; line-height:1.4; } +.upload-date { color:#6c757d; font-size:0.8rem; margin:10px 0 0 0; } +.group-actions { padding:15px; background:#f8f9fa; display:flex; gap:8px; flex-wrap:wrap; } + +/* Buttons */ +.btn { padding:8px 12px; border:none; border-radius:6px; cursor:pointer; font-size:0.85rem; transition:background-color 0.2s; flex:1; min-width:80px; } +.btn-secondary { background:#6c757d; color:white; } +.btn-secondary:hover { background:#5a6268; } +.btn-success { background:#28a745; color:white; } +.btn-success:hover { background:#218838; } +.btn-warning { background:#ffc107; color:#212529; } +.btn-warning:hover { background:#e0a800; } +.btn-danger { background:#dc3545; color:white; } +.btn-danger:hover { background:#c82333; } +.btn-sm { padding:4px 8px; font-size:0.75rem; min-width:auto; } + +/* Modal */ +.image-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; } +.image-modal { background:white; border-radius:12px; max-width:90vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; } +.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid #e9ecef; background:#f8f9fa; } +.modal-header h2 { margin:0; color:#333; } +.close-btn { background:none; border:none; font-size:2rem; cursor:pointer; color:#6c757d; padding:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; } +.close-btn:hover { color:#333; } +.modal-body { padding:20px; overflow-y:auto; } +.group-details { background:#f8f9fa; padding:15px; border-radius:8px; margin-bottom:20px; } +.group-details p { margin:5px 0; } +.images-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:15px; } +.image-item { background:#f8f9fa; border-radius:8px; overflow:hidden; position:relative; } +.modal-image { width:100%; height:150px; object-fit:cover; display:block; } +.image-actions { padding:10px; display:flex; justify-content:space-between; align-items:center; background:white; } +.image-name { font-size:0.8rem; color:#6c757d; flex:1; margin-right:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } + +@media (max-width:768px) { + .moderation-stats { flex-direction:column; gap:20px; } + .groups-grid { grid-template-columns:1fr; } + .group-actions { flex-direction:column; } + .btn { width:100%; } + .image-modal { max-width:95vw; max-height:95vh; } + .images-grid { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); } +} + +/* Standard groups grid used by moderation and overview pages */ +.groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } diff --git a/frontend/src/Components/ComponentUtils/MultiUpload/ImagePreviewGallery.js b/frontend/src/Components/ComponentUtils/MultiUpload/ImagePreviewGallery.js index d0a21cf..13aab70 100644 --- a/frontend/src/Components/ComponentUtils/MultiUpload/ImagePreviewGallery.js +++ b/frontend/src/Components/ComponentUtils/MultiUpload/ImagePreviewGallery.js @@ -96,21 +96,18 @@ function ImagePreviewGallery({ images, onRemoveImage, onReorderImages }) { Vorschau ({images.length} Bild{images.length !== 1 ? 'er' : ''}) - + {images.map((image, index) => ( - - - - + + +
+ {`Vorschau +
+ - + - +
{index + 1}
- +
{image.name || image.originalName || 'Bild'}{image.size ? ' • ' + formatFileSize(image.size) : ''}
diff --git a/frontend/src/Components/Pages/Css/Background.css b/frontend/src/Components/Pages/Css/Background.css index 179f74c..88d5314 100644 --- a/frontend/src/Components/Pages/Css/Background.css +++ b/frontend/src/Components/Pages/Css/Background.css @@ -11,3 +11,10 @@ body { margin: 0; font-family: Roboto, Arial, sans-serif; background: #fff; } /* Reset common element spacing to keep consistent top spacing */ h1, h2, h3, h4, h5 { margin-top: 0; } + +/* Unified page container used by all pages */ +.page-container { + padding-top: 20px; + padding-bottom: 40px; + min-height: 80vh; +} diff --git a/frontend/src/Components/Pages/Css/GroupImagesPage.css b/frontend/src/Components/Pages/Css/GroupImagesPage.css index 355d6e5..949e1d1 100644 --- a/frontend/src/Components/Pages/Css/GroupImagesPage.css +++ b/frontend/src/Components/Pages/Css/GroupImagesPage.css @@ -1,6 +1,3 @@ -/* Copied from ComponentUtils/Css/GroupImagesPage.css and moved to Pages/Css */ -.group-images-container { padding-top: 20px; padding-bottom: 40px; min-height: 80vh; } -.group-card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; } .header-text { font-family: roboto; font-weight: 400; font-size: 28px; text-align: center; margin-bottom: 10px; color: #333333; } .subheader-text { font-family: roboto; font-weight: 300; font-size: 16px; color: #666666; text-align: center; margin-bottom: 30px; } .action-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } diff --git a/frontend/src/Components/Pages/Css/GroupsOverviewPage.css b/frontend/src/Components/Pages/Css/GroupsOverviewPage.css index 6f708e8..06fa9d9 100644 --- a/frontend/src/Components/Pages/Css/GroupsOverviewPage.css +++ b/frontend/src/Components/Pages/Css/GroupsOverviewPage.css @@ -1,20 +1,6 @@ -/* Copied from ComponentUtils/Css/GroupsOverviewPage.css and moved to Pages/Css */ -.groups-overview-container { padding-top: 20px; padding-bottom: 40px; min-height: 80vh; } .header-card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 30px; text-align: center; padding: 20px; } .header-title { font-family: roboto; font-weight: 500; font-size: 28px; color: #333333; margin-bottom: 10px; } .header-subtitle { font-family: roboto; font-size: 16px; color: #666666; margin-bottom: 20px; } -.group-card { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } -.group-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } -.group-image { height: 180px; object-fit: cover; } -.group-content { flex-grow: 1; display: flex; flex-direction: column; } -.group-title { font-family: roboto; font-weight: 500; font-size: 16px; color: #333333; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } -.group-meta { font-size: 12px; color: #999999; margin-bottom: 15px; } -.group-actions { margin-top: auto; display: flex; gap: 8px; justify-content: space-between; } -.view-button { border-radius: 20px; text-transform: none; font-size: 12px; padding: 6px 16px; background: linear-gradient(45deg, #4CAF50 30%, #45a049 90%); color: white; } -.view-button:hover { background: linear-gradient(45deg, #45a049 30%, #4CAF50 90%); } -.action-buttons { display:flex; gap:15px; justify-content:center; flex-wrap: wrap; margin-top:20px; } -.primary-button { border-radius: 25px; padding: 12px 30px; font-size:16px; font-weight:500; text-transform:none; background: linear-gradient(45deg, #2196F3 30%, #1976D2 90%); color:white; } -.home-button { border-radius:25px; padding:12px 30px; font-size:16px; font-weight:500; text-transform:none; border:2px solid #4CAF50; color:#4CAF50; background-color: transparent; } .empty-state { text-align:center; padding:60px 20px; } .loading-container { text-align:center; padding:60px 20px; } @media (max-width:800px) { .nav__links, .cta { display:none; } } diff --git a/frontend/src/Components/Pages/Css/ModerationPage.css b/frontend/src/Components/Pages/Css/ModerationPage.css index fbcc9d7..c20f3a3 100644 --- a/frontend/src/Components/Pages/Css/ModerationPage.css +++ b/frontend/src/Components/Pages/Css/ModerationPage.css @@ -73,288 +73,4 @@ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; -} - -/* Group Card */ -.group-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; -} - -.group-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(0,0,0,0.15); -} - -.group-card.pending { - border-left: 5px solid #ffc107; -} - -.group-card.approved { - border-left: 5px solid #28a745; -} - -.group-preview { - position: relative; - height: 200px; - background: #f8f9fa; -} - -.preview-image { - width: 100%; - height: 100%; - object-fit: cover; -} - -.no-preview { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - color: #6c757d; - font-style: italic; -} - -.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; -} - -.group-info { - padding: 15px; -} - -.group-info h3 { - margin: 0 0 10px 0; - color: #333; -} - -.group-meta { - color: #007bff; - font-weight: 500; - margin: 5px 0; -} - -.group-description { - color: #6c757d; - font-size: 0.9rem; - margin: 8px 0; - line-height: 1.4; -} - -.upload-date { - color: #6c757d; - font-size: 0.8rem; - margin: 10px 0 0 0; -} - -.group-actions { - padding: 15px; - background: #f8f9fa; - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -/* Buttons */ -.btn { - padding: 8px 12px; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 0.85rem; - transition: background-color 0.2s; - flex: 1; - min-width: 80px; -} - -.btn-secondary { - background: #6c757d; - color: white; -} - -.btn-secondary:hover { - background: #5a6268; -} - -.btn-success { - background: #28a745; - color: white; -} - -.btn-success:hover { - background: #218838; -} - -.btn-warning { - background: #ffc107; - color: #212529; -} - -.btn-warning:hover { - background: #e0a800; -} - -.btn-danger { - background: #dc3545; - color: white; -} - -.btn-danger:hover { - background: #c82333; -} - -.btn-sm { - padding: 4px 8px; - font-size: 0.75rem; - min-width: auto; -} - -/* Image Modal */ -.image-modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 20px; -} - -.image-modal { - background: white; - border-radius: 12px; - max-width: 90vw; - max-height: 90vh; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px; - border-bottom: 1px solid #e9ecef; - background: #f8f9fa; -} - -.modal-header h2 { - margin: 0; - color: #333; -} - -.close-btn { - background: none; - border: none; - font-size: 2rem; - cursor: pointer; - color: #6c757d; - padding: 0; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; -} - -.close-btn:hover { - color: #333; -} - -.modal-body { - padding: 20px; - overflow-y: auto; -} - -.group-details { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; - margin-bottom: 20px; -} - -.group-details p { - margin: 5px 0; -} - -.images-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 15px; -} - -.image-item { - background: #f8f9fa; - border-radius: 8px; - overflow: hidden; - position: relative; -} - -.modal-image { - width: 100%; - height: 150px; - object-fit: cover; - display: block; -} - -.image-actions { - padding: 10px; - display: flex; - justify-content: space-between; - align-items: center; - background: white; -} - -.image-name { - font-size: 0.8rem; - color: #6c757d; - flex: 1; - margin-right: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Responsive */ -@media (max-width: 768px) { - .moderation-stats { - flex-direction: column; - gap: 20px; - } - - .groups-grid { - grid-template-columns: 1fr; - } - - .group-actions { - flex-direction: column; - } - - .btn { - width: 100%; - } - - .image-modal { - max-width: 95vw; - max-height: 95vh; - } - - .images-grid { - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - } } \ No newline at end of file diff --git a/frontend/src/Components/Pages/GroupImagesPage.js b/frontend/src/Components/Pages/GroupImagesPage.js index b296f9a..2465f46 100644 --- a/frontend/src/Components/Pages/GroupImagesPage.js +++ b/frontend/src/Components/Pages/GroupImagesPage.js @@ -135,7 +135,7 @@ const GroupImagesPage = () => {
- + Gruppe bearbeiten diff --git a/frontend/src/Components/Pages/GroupsOverviewPage.js b/frontend/src/Components/Pages/GroupsOverviewPage.js index 2261955..4349ebf 100644 --- a/frontend/src/Components/Pages/GroupsOverviewPage.js +++ b/frontend/src/Components/Pages/GroupsOverviewPage.js @@ -81,7 +81,7 @@ function GroupsOverviewPage() { return (
- +
@@ -104,7 +104,7 @@ function GroupsOverviewPage() { - + {/* Header */} @@ -172,19 +172,16 @@ function GroupsOverviewPage() { - +
{groups.map((group) => ( - - + + {group.images && group.images.length > 0 && ( - +
+ {group.description +
)} - + {group.description || 'Unbenannte Slideshow'} @@ -208,7 +205,7 @@ function GroupsOverviewPage() { ))} - +
)} diff --git a/frontend/src/index.js b/frontend/src/index.js index c996bc6..e89874b 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './Components/Pages/Css/Background.css'; +import './Components/ComponentUtils/Css/main.css'; ReactDOM.render(