category tile styling
This commit is contained in:
parent
d07fc04e57
commit
dbd0282892
3 changed files with 50 additions and 7 deletions
12
froide_govplan/templates/adminsortable2/change_list.html
Normal file
12
froide_govplan/templates/adminsortable2/change_list.html
Normal 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 %}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue