nicer topic list layout

This commit is contained in:
rimu 2024-05-24 17:29:25 +12:00
parent 77e06b6a50
commit d40cdf08cc
3 changed files with 36 additions and 19 deletions

View file

@ -551,6 +551,15 @@ fieldset legend {
display: inline-block; display: inline-block;
} }
.topics_list {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.topics_list > li {
padding-bottom: 20px;
}
.community_header { .community_header {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;

View file

@ -123,6 +123,16 @@ html {
} }
} }
.topics_list {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(132px, 1fr));
> li {
padding-bottom: 20px;
}
}
.community_header { .community_header {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;

View file

@ -9,28 +9,26 @@
{% block app_content %} {% block app_content %}
{% if len(topics) > 0 %} {% if len(topics) > 0 %}
{% macro render_topic(topic, depth) %} {% macro render_topic(topic, depth) %}
<tr> <li>
<td nowrap="nowrap">{{ '--' * depth }} {% if depth == 0 %}<strong>{% endif %}
{% if depth == 0 %}<strong>{% endif %} <a href="/topic/{{ topic['topic'].path() }}">{{ topic['topic'].name }}</a>
<a href="/topic/{{ topic['topic'].path() }}">{{ topic['topic'].name }}</a> {% if depth == 0 %}</strong>{% endif %}
{% if depth == 0 %}</strong>{% endif %} {% if topic['children'] %}
</td> <ul>
</tr> {% for topic in topic['children'] %}
{% if topic['children'] %} {{ render_topic(topic, depth + 1)|safe }}
{% for topic in topic['children'] %} {% endfor %}
{{ render_topic(topic, depth + 1)|safe }} </ul>
{% endfor %} {% endif %}
{% endif %} </li>
{% endmacro %} {% endmacro %}
<h1>{{ _('Choose a topic') }}</h1> <h1>{{ _('Choose a topic') }}</h1>
<div class="table-responsive-md mt-4"> <div class="table-responsive-md mt-4">
<table class="communities_table table table-striped table-hover w-100"> <ul class="topics_list">
<tbody> {% for topic in topics %}
{% for topic in topics %} {{ render_topic(topic, 0)|safe }}
{{ render_topic(topic, 0)|safe }} {% endfor %}
{% endfor %} </ul>
</tbody>
</table>
</div> </div>
{% else %} {% else %}
<p>{{ _('There are no communities yet.') }}</p> <p>{{ _('There are no communities yet.') }}</p>