Used CSS flex and <nav> for ModelAdmin.date_hierarchy.

This commit is contained in:
Tom Carrick 2022-09-08 13:52:36 +02:00 committed by GitHub
parent 32536b1324
commit 0c3981eb50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 21 deletions

View File

@ -223,27 +223,24 @@
/* DATE DRILLDOWN */
.change-list ul.toplinks {
display: block;
float: left;
padding: 0;
margin: 0;
width: 100%;
}
.change-list ul.toplinks li {
padding: 3px 6px;
.change-list .toplinks {
display: flex;
padding-bottom: 5px;
flex-wrap: wrap;
gap: 3px 17px;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.change-list ul.toplinks .date-back a {
.change-list .toplinks a {
font-size: 0.8125rem;
}
.change-list .toplinks .date-back {
color: var(--body-quiet-color);
}
.change-list ul.toplinks .date-back a:focus,
.change-list ul.toplinks .date-back a:hover {
.change-list .toplinks .date-back:focus,
.change-list .toplinks .date-back:hover {
color: var(--link-hover-color);
}

View File

@ -1,16 +1,14 @@
{% if show %}
<div class="xfull">
<ul class="toplinks">
<nav class="toplinks">
{% block date-hierarchy-toplinks %}
{% block date-hierarchy-back %}
{% if back %}<li class="date-back"><a href="{{ back.link }}">&lsaquo; {{ back.title }}</a></li>{% endif %}
{% if back %}<a href="{{ back.link }}" class="date-back">&lsaquo; {{ back.title }}</a>{% endif %}
{% endblock %}
{% block date-hierarchy-choices %}
{% for choice in choices %}
<li> {% if choice.link %}<a href="{{ choice.link }}">{{ choice.title }}</a>{% else %}{{ choice.title }}{% endif %}</li>
{% if choice.link %}<a href="{{ choice.link }}">{{ choice.title }}</a>{% else %}{{ choice.title }}{% endif %}
{% endfor %}
{% endblock %}
{% endblock %}
</ul><br class="clear">
</div>
</nav>
{% endif %}