PlexSheep
/
gawa
1
0
Fork 0
Code Issues 27 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

card view is now usable on mobile

This commit is contained in:
Christoph J. Scherr 2023-10-08 13:49:19 +02:00
parent 1f2e66b1ef
commit 917e6b6167
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
gawa/blog/templates/blog/browse.html
View File

@ -110,18 +110,18 @@
</div> </div>
<div class="row mb-5"> <div class="row mb-5">
<div class="container-fluid p-0 w-100 h-100"> <div class="container-fluid p-0 w-100 h-100">
<div class="row gap-3"> {% if is_empty %}
{% if is_empty %} <div class="text-center">
<div class="text-center"> <img src="/media/img/http/404.svg"
<img src="/media/img/http/404.svg" class="img-fluid pb-5 pt-2 darkmode-invert"
class="img-fluid pb-5 pt-2 darkmode-invert" style="max-height: 650px"
style="max-height: 650px" alt="404" />
alt="404" /> <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
<h2 class="display-5">{% trans "No posts found for your filters." %}</h2> </div>
</div> {% else %}
{% else %} <div class="row gap-3 cardrow">
{% for post in posts %} {% 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" <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
href=" {% url 'blog:post' post.category.slug post.slug %}"> href=" {% url 'blog:post' post.category.slug post.slug %}">
<img src="{{ post.thumbnail.url }}" <img src="{{ post.thumbnail.url }}"
@ -173,8 +173,8 @@
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
{% endif %} </div>
</div> {% endif %}
</div> </div>
</div> </div>
</div> </div>

2
gawa/blog/templates/blog/featured.html
View File

@ -3,7 +3,7 @@
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
<div class="container-lg mt-5"> <div class="container-lg mt-5">
<h4 class="">{% trans "Featured" %}</h4> <h4 class="">{% trans "Featured" %}</h4>
<div class="row row-cols-6 gap-1"> <div class="row gap-1 cardrow">
{% for post in featured_posts %} {% for post in featured_posts %}
<div class="card col mx-auto my-2"> <div class="card col mx-auto my-2">
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0" <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"

7
gawa/static/custom.js
View File

@ -58,3 +58,10 @@ document.querySelectorAll(".reset-empty-button").forEach((element) => {
element.form.reset(); 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);
});