From dbd02828928621d147c07228c85f96c9765f8e8e Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 14 May 2025 08:00:34 +0200
Subject: [PATCH] category tile styling

---
 .../templates/adminsortable2/change_list.html | 12 ++++++
 froide_govplan/templates/cms/mypage.html      |  4 ++
 .../froide_govplan/plugins/sections.html      | 41 +++++++++++++++----
 3 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 froide_govplan/templates/adminsortable2/change_list.html

diff --git a/froide_govplan/templates/adminsortable2/change_list.html b/froide_govplan/templates/adminsortable2/change_list.html
new file mode 100644
index 0000000..727bba3
--- /dev/null
+++ b/froide_govplan/templates/adminsortable2/change_list.html
@@ -0,0 +1,12 @@
+{% extends "admin/change_list.html" %}
+{% load i18n %}
+{% block result_list %}
+    <ul>
+        <li>{% trans "Distinct users:" %} {{ cl.user_count }}</li>
+        <li>{% trans "Distinct public bodies:" %} {{ cl.publicbody_count }}</li>
+        <li>{% trans "Distinct jurisdictions:" %} {{ cl.jurisdiction_count }}</li>
+        <li>{% trans "Distinct campaigns:" %} {{ cl.campaign_count }}</li>
+    </ul>
+    {{ block.super }}
+{% endblock result_list %}
+
diff --git a/froide_govplan/templates/cms/mypage.html b/froide_govplan/templates/cms/mypage.html
index f707432..ed54fbe 100644
--- a/froide_govplan/templates/cms/mypage.html
+++ b/froide_govplan/templates/cms/mypage.html
@@ -187,6 +187,7 @@
 
   .carousel-inner .card {
     margin-right: 1rem;
+    height: 360px;
   }
 
   .carousel-inner .col-md-4 {
@@ -224,6 +225,9 @@
   header {
     justify-content: center;
   }
+  header img {
+    height: 40px !important;
+  }
 }
 
     </style>
diff --git a/froide_govplan/templates/froide_govplan/plugins/sections.html b/froide_govplan/templates/froide_govplan/plugins/sections.html
index 609fde3..1548698 100644
--- a/froide_govplan/templates/froide_govplan/plugins/sections.html
+++ b/froide_govplan/templates/froide_govplan/plugins/sections.html
@@ -4,13 +4,40 @@
 <style>
   {% for section in sections %}
   {% if section.image %}
-  #govsection-{{ section.pk }}::after {
-    background-image: url('{% thumbnail section.image 350x150 crop subject_location=section.image.subject_location %}');
+  #govsection-{{ section.pk }} .card-img-top {
+    background-image: url('{% thumbnail section.image 600x300 crop subject_location=section.image.subject_location %}');
+    background-size: cover;
+    background-position: center;
+    height: 225px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  #govsection-{{ section.pk }} .card-img-top::before {
+    content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.4); /* Abdunkelung */
+    z-index: 1;
   }
   {% endif %}
   {% endfor %}
+
+  .card-title-overlay {
+    z-index: 2;
+    color: white;
+    font-size: 1.75rem;
+    font-weight: bold;
+    text-align: center;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
+    padding: 0 15px;
+  }
 </style>
 
+
 <div class="album py-5">
 
   <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
@@ -18,12 +45,12 @@
     {% for section in sections %}
     <div class="col">
       <a href="{{ section.get_absolute_url }}" class="text-decoration-none text-reset">
-      <div class="card shadow-sm">
-        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/>
-          <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+      <div class="card shadow-sm" id="govsection-{{ section.pk }}">
+        <div class="card-img-top">
+          <div class="card-title-overlay">
             {{ section.title }}
-          </text>
-        </svg>
+          </div>
+        </div>
         <div class="card-body">
           <p class="card-text">
             {% if section.icon %}