Use CSS grid for package tiles

This commit is contained in:
rubenwardy 2023-08-14 18:55:42 +01:00
parent 800cacb003
commit bf20177756
4 changed files with 21 additions and 15 deletions

@ -262,3 +262,21 @@ pre {
} }
@import "dracula.scss"; @import "dracula.scss";
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.gap-2 {
gap: 0.75rem;
}
.gap-3 {
gap: 1rem;
}

@ -1,11 +1,4 @@
.packagetile { .packagetile {
list-style: none;
padding: 0;
margin: 0 7px 7px 0;
min-width: 250px;
}
li.d-flex {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;

@ -16,7 +16,7 @@
{%- endif %} {%- endif %}
<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/custom.css?v=40"> <link rel="stylesheet" type="text/css" href="/static/custom.css?v=41">
<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" /> <link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
{% if noindex -%} {% if noindex -%}

@ -38,16 +38,11 @@
{% endmacro %} {% endmacro %}
{% macro render_pkggrid(packages, show_author=True) -%} {% macro render_pkggrid(packages, show_author=True) -%}
<ul class="d-flex p-0 flex-row flex-wrap justify-content-start align-content-start "> <ul class="grid-4 gap-2 p-0">
{% for p in packages %} {% for p in packages %}
{{ render_pkgtile(p, show_author) }} {{ render_pkgtile(p, show_author) }}
{% else %} {% else %}
<li class="packagetile flex-fill"><i>{{ _("No packages available") }}</i></li> <li class="packagetile"><i>{{ _("No packages available") }}</i></li>
{% endfor %} {% endfor %}
{% if packages %}
{% for i in range(4) %}
<li class="packagetile flex-fill"></li>
{% endfor %}
{% endif %}
</ul> </ul>
{% endmacro %} {% endmacro %}