CSS Cleanup
This commit is contained in:
parent
03a7e91d2b
commit
237c776ddc
|
|
@ -1,61 +1,133 @@
|
|||
.cardContainer {
|
||||
/* Main shared styles for cards, buttons, modals used across pages */
|
||||
|
||||
/* Page-specific styles for GroupsOverviewPage */
|
||||
.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; }
|
||||
@media (max-width:800px) { .nav__links, .cta { display:none; } }
|
||||
|
||||
/* Page-specific styles for ModerationPage */
|
||||
.moderation-page { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||||
.moderation-page h1 { text-align:center; color:#333; margin-bottom:30px; }
|
||||
.moderation-loading, .moderation-error { text-align:center; padding:50px; font-size:18px; }
|
||||
.moderation-error { color:#dc3545; }
|
||||
|
||||
.moderation-stats { display:flex; justify-content:center; gap:40px; margin-bottom:40px; padding:20px; background:#f8f9fa; border-radius:12px; }
|
||||
.stat-item { text-align:center; }
|
||||
.stat-number { display:block; font-size:2.5rem; font-weight:bold; color:#007bff; }
|
||||
.stat-label { display:block; font-size:0.9rem; color:#6c757d; margin-top:5px; }
|
||||
|
||||
.moderation-section { margin-bottom:50px; }
|
||||
.moderation-section h2 { color:#333; border-bottom:2px solid #e9ecef; padding-bottom:10px; margin-bottom:25px; }
|
||||
.no-groups { text-align:center; color:#6c757d; font-style:italic; padding:30px; }
|
||||
|
||||
|
||||
/* Background */
|
||||
.allContainer {
|
||||
/*background: url(../../../Images/background.svg) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;*/
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin-top: 20vh;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 43%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
.allContainerNoBackground {
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
body {
|
||||
zoom: 90%;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
body {
|
||||
zoom: 85%;
|
||||
}
|
||||
/* 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)); }
|
||||
}
|
||||
|
||||
@media screen and (max-height: 650px) {
|
||||
body {
|
||||
zoom: 80%;
|
||||
}
|
||||
}
|
||||
/* Standard groups grid used by moderation and overview pages */
|
||||
.groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
|
||||
@media screen and (max-height: 600px) {
|
||||
body {
|
||||
zoom: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 550px) {
|
||||
body {
|
||||
zoom: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 500px) {
|
||||
body {
|
||||
zoom: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
body {
|
||||
zoom: 60%;
|
||||
}
|
||||
}
|
||||
/* Common CTA / page-level utilities (moved from page CSS) */
|
||||
.view-button { border-radius: 20px; text-transform: none; font-size: 12px; padding: 6px 16px; background: linear-gradient(45deg, #4CAF50 30%, #45a049 90%); color: white; border: none; cursor: pointer; }
|
||||
.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; border:none; cursor:pointer; }
|
||||
.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; cursor:pointer; }
|
||||
.empty-state { text-align:center; padding:60px 20px; }
|
||||
.loading-container { text-align:center; padding:60px 20px; }
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
|
||||
.allContainer {
|
||||
/*background: url(../../../Images/background.svg) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;*/
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.allContainerNoBackground {
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
1
frontend/src/Components/ComponentUtils/Css/GroupCard.css
Normal file
1
frontend/src/Components/ComponentUtils/Css/GroupCard.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
#TODO: move GroudCars styles into this file
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/* Page-specific styles for GroupImagesPage */
|
||||
.group-images-container { padding-top: 20px; padding-bottom: 40px; min-height: 80vh; }
|
||||
.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; }
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/* Page-specific styles for GroupsOverviewPage */
|
||||
.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; }
|
||||
@media (max-width:800px) { .nav__links, .cta { display:none; } }
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
/* 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; }
|
||||
|
||||
/* Common CTA / page-level utilities (moved from page CSS) */
|
||||
.view-button { border-radius: 20px; text-transform: none; font-size: 12px; padding: 6px 16px; background: linear-gradient(45deg, #4CAF50 30%, #45a049 90%); color: white; border: none; cursor: pointer; }
|
||||
.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; border:none; cursor:pointer; }
|
||||
.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; cursor:pointer; }
|
||||
.empty-state { text-align:center; padding:60px 20px; }
|
||||
.loading-container { text-align:center; padding:60px 20px; }
|
||||
|
|
@ -5,7 +5,7 @@ import './Css/Footer.css'
|
|||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<p className="copyright">Made by <a href="https://github.com/vallezw" target="_blank">Valentin Zwerschke</a> | <a href="https://github.com/vallezw/Image-Uploader" target="_blank" >vallezw/Image-Uploader</a></p>
|
||||
{/*<p className="copyright">Made by <a href="https://github.com/vallezw" target="_blank">Valentin Zwerschke</a> | <a href="https://github.com/vallezw/Image-Uploader" target="_blank" >vallezw/Image-Uploader</a></p>*/}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Css/main.css';
|
||||
|
||||
|
||||
const GroupCard = ({ group, onApprove, onViewImages, onDelete, isPending, showActions = true }) => {
|
||||
let previewUrl = null;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function FZF() {
|
|||
<svg class="page404" viewBox="0 0 5059 4833" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
|
||||
<g id="404" transform="translate(20.000000, 20.000000)">
|
||||
<path d="M2534,4063 C2534,4465.61629 2209.36983,4792 1808.91667,4792 L1291,4792 M3984,4063 C3984,4465.61629 4308.369,4792 4708.5,4792 L5019,4792 M293,625 L293,677.0625 C293,1108.34825 640.739556,1458 1069.66667,1458 L1225,1458 M1083,937 C1083,1454.43222 1500.39286,1874 2015.14286,1874 L2533,1874 M5019,1042 C5019,1502.2325 4648.056,1875 4191,1875 L3984,1875 M2534,4063 L2534,1042 M3984,4063 L3984,1042 M2845,677 C2845,907.184 3030.472,1094 3259,1094 C3487.735,1094 3673,907.184 3673,677 M2845,625 C2845,855.184 2659.556,1042 2430.6,1042 L2327,1042 M3673,625 C3673,855.184 3858.6512,1042 4087.4,1042 L4191,1042" id="tree" stroke="#000000" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M2534,4063 C2534,4465.61629 2209.36983,4792 1808.91667,4792 L1291,4792 M3984,4063 C3984,4465.61629 4308.369,4792 4708.5,4792 L5019,4792 M293,625 L293,677.0625 C293,1108.34825 640.739556,1458 1069.66667,1458 L1225,1458 M1083,937 C1083,1454.43222 1500.39286,1874 2015.14286,1874 L2533,1874 M5019,1042 C5019,1502.2325 4648.056,1875 4191,1875 L3984,1875 M2534,4063 L2534,1042 M3984,4063 L3984,1042 M2845,677 C2845,907.184 3030.472,1094 3259,1094 C3487.735,1094 3673,907.184 3673,677 M2845,625 C2845,855.184 2659.556,1042 2430.6,1042 L2327,1042 M3673,625 C3673,855.184 3858.6512,1042 4087.4,1042 L4191,1042" id="tree" stroke="#000000" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M1083,0 L1083,312" id="leaf" stroke="#000000" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M1912,521 L1912,833" id="leaf" stroke="#000000" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M3155,0 L3155,312" id="leaf" stroke="#000000" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
/* Shared base styles used by all pages */
|
||||
/* Reset browser default margins so header spans full width */
|
||||
html, body, #root { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, Arial, sans-serif; background: #fff; }
|
||||
|
||||
/* Page layout wrapper used across pages */
|
||||
.allContainer { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
.footerContainer { margin-top: auto; }
|
||||
|
||||
.moderation-loading, .moderation-error { padding: 40px; text-align: center; }
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import '../../ComponentUtils/Css/main.css';
|
||||
|
||||
/* Page-specific styles for group images edit page */
|
||||
.header-text { font-weight: 400; font-size: 28px; text-align: center; margin-bottom: 10px; color:#333333; }
|
||||
.subheader-text { 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; }
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import '../../ComponentUtils/Css/main.css';
|
||||
|
||||
/* Page-specific rules for GroupsOverviewPage */
|
||||
.header-card { margin-bottom: 30px; text-align: center; padding: 20px; }
|
||||
.header-title { font-weight: 500; font-size: 28px; color: #333333; margin-bottom: 10px; }
|
||||
.header-subtitle { font-size: 16px; color: #666666; margin-bottom: 20px; }
|
||||
|
||||
@media (max-width:800px) { .nav__links, .cta { display:none; } }
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@import '../../ComponentUtils/Css/main.css';
|
||||
|
||||
/* Page-specific moderation styles */
|
||||
.moderation-page { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||||
.moderation-page h1 { text-align:center; color:#333; margin-bottom:30px; }
|
||||
.moderation-loading, .moderation-error { text-align:center; padding:50px; font-size:18px; }
|
||||
.moderation-error { color:#dc3545; }
|
||||
|
||||
.moderation-stats { display:flex; justify-content:center; gap:40px; margin-bottom:40px; padding:20px; background:#f8f9fa; border-radius:12px; }
|
||||
.stat-item { text-align:center; }
|
||||
.stat-number { display:block; font-size:2.5rem; font-weight:bold; color:#007bff; }
|
||||
.stat-label { display:block; font-size:0.9rem; color:#6c757d; margin-top:5px; }
|
||||
|
||||
.moderation-section { margin-bottom:50px; }
|
||||
.moderation-section h2 { color:#333; border-bottom:2px solid #e9ecef; padding-bottom:10px; margin-bottom:25px; }
|
||||
.no-groups { text-align:center; color:#6c757d; font-style:italic; padding:30px; }
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import '../Pages/Css/GroupsOverviewPage.css';
|
||||
import {
|
||||
Container,
|
||||
Card,
|
||||
|
|
@ -144,19 +143,17 @@ function GroupsOverviewPage() {
|
|||
📊 {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<div className="groups-grid">
|
||||
{groups.map((group) => (
|
||||
<div key={group.groupId} className="grid-item-stretch">
|
||||
<GroupCard
|
||||
group={group}
|
||||
onApprove={() => { /* no-op on public page */ }}
|
||||
onViewImages={() => handleViewSlideshow(group.groupId)}
|
||||
onDelete={() => { /* no-op on public page */ }}
|
||||
isPending={false}
|
||||
showActions={false}
|
||||
/>
|
||||
</div>
|
||||
<GroupCard
|
||||
key={group.groupId}
|
||||
group={group}
|
||||
onApprove={() => { /* no-op on public page */ }}
|
||||
onViewImages={() => handleViewSlideshow(group.groupId)}
|
||||
onDelete={() => { /* no-op on public page */ }}
|
||||
isPending={false}
|
||||
showActions={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import ImagePreviewGallery from '../ComponentUtils/MultiUpload/ImagePreviewGalle
|
|||
import DescriptionInput from '../ComponentUtils/MultiUpload/DescriptionInput';
|
||||
|
||||
|
||||
import '../Pages/Css/GroupImagesPage.css';
|
||||
|
||||
|
||||
const ModerationGroupImagesPage = () => {
|
||||
const { groupId } = useParams();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
|
|||
import { Helmet } from 'react-helmet';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Container } from '@material-ui/core';
|
||||
import './Css/ModerationPage.css';
|
||||
import Navbar from '../ComponentUtils/Headers/Navbar';
|
||||
import Footer from '../ComponentUtils/Footer';
|
||||
import GroupCard from '../ComponentUtils/GroupCard';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Navbar from '../ComponentUtils/Headers/Navbar';
|
|||
import Footer from '../ComponentUtils/Footer';
|
||||
import GroupCard from '../ComponentUtils/GroupCard';
|
||||
import ImagePreviewGallery from '../ComponentUtils/MultiUpload/ImagePreviewGallery';
|
||||
import '../Pages/Css/GroupImagesPage.css';
|
||||
|
||||
|
||||
const PublicGroupImagesPage = () => {
|
||||
const { groupId } = useParams();
|
||||
|
|
|
|||
|
|
@ -1,8 +1,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';
|
||||
import './App.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user