onny/verwaltungstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

category tile styling

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

41
froide_govplan/templates/froide_govplan/plugins/sections.html
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 %}