chore: refine map fragment card CSS

Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-04-03 18:20:50 +02:00
parent 8c90535105
commit 54420568af
2 changed files with 39 additions and 34 deletions

View file

@ -76,26 +76,8 @@ body.login header {
.demo_map .map_fragment {
height: var(--map-fragment-height);
}
.map_list .legend {
padding-top: 7px;
margin-bottom: 28px;
text-align: center;
font-size: 1.2em;
}
.map_list .legend a {
color: #222;
font-weight: bold;
}
.map_list .legend em,
.map_list .legend em a {
color: #444;
font-weight: normal;
}
.map_list hr {
display: none;
}
.map_list .wide + hr {
display: block;
.grid-container hgroup {
text-align: left;
}
.umap-features-list ul {
margin-top: 14px;
@ -189,7 +171,6 @@ h2.tabs a:hover {
display: flex;
flex-wrap: wrap;
gap: calc(var(--gutter) / 2 );
justify-content: center;
}
.tag-list li {
border: 1px solid var(--color-darkBlue);
@ -206,6 +187,27 @@ h2.tabs a:hover {
text-overflow: ellipsis;
vertical-align: middle;
}
.card {
border: 1px solid var(--color-lightGray);
border-radius: var(--border-radius);
padding: var(--box-padding);
display: flex;
flex-direction: column;
}
.card .button {
margin-bottom: 0;
}
.card hgroup {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 0;
flex-grow: 1;
gap: var(--gutter);
}
.card h3 {
margin-bottom: 0;
}
/* **************************** */
/* colors */

View file

@ -1,22 +1,25 @@
{% load umap_tags i18n %}
{% for map_inst in maps %}
<div>
<div class="card">
{% map_fragment map_inst prefix=prefix page=request.GET.p %}
<hgroup>
{% if map_inst.tags %}
<ul class="tag-list">
{% for tag, label in map_inst.get_tags_display %}
<li><a href="{% url 'search' %}?tags={{ tag }}">{{ label }}</a></li>
{% endfor %}
</ul>
{% endif %}
<h3><a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a></h3>
{% with author=map_inst.get_author %}
{% if author %}
<p>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></p>
<div>
{% if map_inst.tags %}
<ul class="tag-list">
{% for tag, label in map_inst.get_tags_display %}
<li><a href="{% url 'search' %}?tags={{ tag }}">{{ label }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<h3><a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a></h3>
{% with author=map_inst.get_author %}
{% if author %}
<p>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></p>
{% endif %}
{% endwith %}
</div>
<a class="button" href="{{ map_inst.get_absolute_url }}">{% translate "See the map" %}</a>
</hgroup>
</div>
{% endfor %}