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 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"
class="img-fluid pb-5 pt-2 darkmode-invert"
style="max-height: 650px"
alt="404" />
<h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
</div>
{% else %}
{% if is_empty %}
<div class="text-center">
<img src="/media/img/http/404.svg"
class="img-fluid pb-5 pt-2 darkmode-invert"
style="max-height: 650px"
alt="404" />
<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,8 +173,8 @@
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>

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

@ -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"

7
gawa/static/custom.js
View File

@ -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);
});