blog-browse #40
|
@ -110,7 +110,6 @@
|
|||
</div>
|
||||
<div class="row mb-5">
|
||||
<div class="container-fluid p-0 w-100 h-100">
|
||||
<div class="row gap-3">
|
||||
{% if is_empty %}
|
||||
<div class="text-center">
|
||||
<img src="/media/img/http/404.svg"
|
||||
|
@ -120,8 +119,9 @@
|
|||
<h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row gap-3 cardrow">
|
||||
{% for post in posts %}
|
||||
<div class="card col mx-auto my-2 py-2" style="min-width: 400px;">
|
||||
<div class="card col mx-auto my-2 py-2">
|
||||
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
|
||||
href=" {% url 'blog:post' post.category.slug post.slug %}">
|
||||
<img src="{{ post.thumbnail.url }}"
|
||||
|
@ -173,9 +173,9 @@
|
|||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main %}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<div class="container-lg mt-5">
|
||||
<h4 class="">{% trans "Featured" %}</h4>
|
||||
<div class="row row-cols-6 gap-1">
|
||||
<div class="row gap-1 cardrow">
|
||||
{% for post in featured_posts %}
|
||||
<div class="card col mx-auto my-2">
|
||||
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
|
||||
|
|
|
@ -58,3 +58,10 @@ document.querySelectorAll(".reset-empty-button").forEach((element) => {
|
|||
element.form.reset();
|
||||
};
|
||||
});
|
||||
|
||||
// smaller cards depending on viewport
|
||||
document.querySelectorAll(".cardrow").forEach((element) => {
|
||||
var level = Math.min(Math.floor(screen.width / 200), 6);
|
||||
console.log(level);
|
||||
element.classList.add("row-cols-" + level);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue