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 */ /* DATE DRILLDOWN */
.change-list ul.toplinks { .change-list .toplinks {
display: block; display: flex;
float: left; padding-bottom: 5px;
padding: 0; flex-wrap: wrap;
margin: 0; gap: 3px 17px;
width: 100%;
}
.change-list ul.toplinks li {
padding: 3px 6px;
font-weight: bold; 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); color: var(--body-quiet-color);
} }
.change-list ul.toplinks .date-back a:focus, .change-list .toplinks .date-back:focus,
.change-list ul.toplinks .date-back a:hover { .change-list .toplinks .date-back:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
} }

View File

@ -1,16 +1,14 @@
{% if show %} {% if show %}
<div class="xfull"> <nav class="toplinks">
<ul class="toplinks">
{% block date-hierarchy-toplinks %} {% block date-hierarchy-toplinks %}
{% block date-hierarchy-back %} {% 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 %} {% endblock %}
{% block date-hierarchy-choices %} {% block date-hierarchy-choices %}
{% for choice in 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 %} {% endfor %}
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}
</ul><br class="clear"> </nav>
</div>
{% endif %} {% endif %}