diff --git a/public/admin.css b/public/admin.css index b851ead..788a14a 100644 --- a/public/admin.css +++ b/public/admin.css @@ -91,41 +91,6 @@ h2 { .section { margin-bottom: 40px; } -/* ----------------------------------------------------------------- - Contribution Rows - ----------------------------------------------------------------- */ -.contribution-row { - background: white; - border: 1px solid #e0e0e0; - border-radius: 8px; - padding: 16px; - margin-bottom: 12px; - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 16px; -} - -.contribution-info { flex: 1; } - -.contribution-info .title { - font-weight: 600; - font-size: 0.95rem; - margin-bottom: 4px; -} - -.contribution-info .meta { - font-size: 0.8rem; - color: #5a5a7a; - margin-bottom: 4px; -} - -.contribution-info .description { - font-size: 0.85rem; - color: #5a5a7a; - line-height: 1.4; -} - /* ----------------------------------------------------------------- Badges ----------------------------------------------------------------- */ @@ -261,11 +226,6 @@ h2 { /* ----------------------------------------------------------------- Mobile Responsive ----------------------------------------------------------------- */ -@media (max-width: 768px) { - .contribution-row { - flex-direction: column; - } - .action-buttons { width: 100%; } @@ -278,4 +238,124 @@ h2 { width: 100%; justify-content: center; } + + +/* ----------------------------------------------------------------- + Collapsible Contribution Rows + ----------------------------------------------------------------- */ +.contribution-row-collapsible { + background: white; + border: 1px solid #e0e0e0; + border-radius: 8px; + margin-bottom: 12px; + overflow: hidden; +} + +.contribution-row-header { + padding: 12px 16px; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + transition: background 150ms ease; +} + +.contribution-row-header:hover { + background: #f8f9fa; +} + +.contribution-row-summary { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + flex: 1; +} + +.contribution-row-summary .title { + font-weight: 600; + font-size: 0.95rem; +} + +.meta-inline { + font-size: 0.8rem; + color: #5a5a7a; +} + +.collapse-icon { + color: #999; + font-size: 0.8rem; + flex-shrink: 0; + transition: transform 200ms ease; +} + +/* ----------------------------------------------------------------- + Contribution Detail View (expanded) + ----------------------------------------------------------------- */ +.contribution-row-detail { + padding: 0 16px 16px 16px; + border-top: 1px solid #f0f0f0; +} + +.detail-layout { + display: flex; + gap: 16px; + margin-bottom: 12px; + margin-top: 12px; +} + +.detail-map { + width: 200px; + height: 160px; + border-radius: 6px; + border: 1px solid #e0e0e0; + flex-shrink: 0; + background: #f0f0f0; +} + +.detail-content { + flex: 1; + min-width: 0; +} + +.detail-content .description { + font-size: 0.85rem; + line-height: 1.5; + color: #5a5a7a; + margin-bottom: 8px; +} + +.detail-content .meta { + font-size: 0.8rem; + color: #999; +} + +.btn-map { + background: #1565C0; + color: white; + text-decoration: none; +} + +.btn-map:hover { + background: #0d47a1; +} + +/* ----------------------------------------------------------------- + Mobile: Detail Layout stacked + ----------------------------------------------------------------- */ +@media (max-width: 768px) { + .detail-layout { + flex-direction: column; + } + + .detail-map { + width: 100%; + height: 180px; + } + + .contribution-row-summary { + flex-direction: column; + align-items: flex-start; + gap: 4px; + } } \ No newline at end of file diff --git a/public/admin.php b/public/admin.php index 002447c..c60aa96 100644 --- a/public/admin.php +++ b/public/admin.php @@ -102,6 +102,17 @@ foreach ($stats_rows as $row) { $stats[$row['status']] = $row['count']; } +// Category Labels for German Display +$category_labels = [ + 'mobility' => '🚲 Mobilität', + 'building' => '🏗️ Bauen', + 'energy' => '⚡ Energie', + 'environment' => '🌳 Umwelt', + 'industry' => '🏭 Industrie', + 'consumption' => '🛒 Konsum', + 'other' => '📌 Sonstiges' +]; + // ----------------------------------------------------------------- // Render Main Page // ----------------------------------------------------------------- @@ -128,6 +139,7 @@ foreach ($stats_rows as $row) {