category tile styling

This commit is contained in:
Jonas Heinrich 2025-05-14 08:00:34 +02:00
parent d07fc04e57
commit dbd0282892
3 changed files with 50 additions and 7 deletions

View file

@ -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 %}

View file

@ -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>

View file

@ -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 %}