Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-06-16 00:44:32 +02:00
Code Issues Projects Releases Wiki Activity

added "show more" button to posts sections

Browse source
This commit is contained in:
Ell 2024-05-21 21:49:10 +02:00
parent 5ab1a6b17d
commit 9f9a3b911a
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/_includes/devlog_category.html
View file

@ -1,10 +1,13 @@
<div class="devlogs">
<h2 class="devlog-category" id="{{ include.tag | slugify }}">{{ include.emoji }} {{ include.tag }}</h2>
{% assign slug = include.tag | slugify %}
<h2 class="devlog-category" id="{{ slug }}">{{ include.emoji }} {{ include.tag }}</h2>
<p>{{ include.description }}</p>
{%- for post in site.posts -%}
{% assign total = 0 %}
{% for post in site.posts %}
{%- if post.tags contains include.tag -%}
<div class="devlog">
{%- assign total = total | plus: 1 -%}
<div class="devlog devlog-{{ slug }}" {% if total > 6 %}hidden{% endif %}>
{%- if post.image -%}
{%- assign start = post.image | slice: 0, 4 -%}
{%- if start == "http" -%}
@ -27,5 +30,15 @@
</div>
</div>
{%- endif -%}
{%- endfor -%}
{% endfor %}
{% if total > 6 %}
<button type="button" class="btn btn-link devlog-more" id="devlog-more-{{ slug }}">Show more</button>
<script>
$("#devlog-more-{{ slug }}").on("click", function () {
$(".devlog-{{ slug }}").removeAttr("hidden");
$(this).attr("hidden", true);
});
</script>
{% endif %}
</div>

13
web/style.css
View file

@ -142,12 +142,12 @@ a:visited.wide-link {
}
.devlog {
margin-bottom: 30px;
min-width: 250px;
width: 45%;
width: calc(50% - 2px);
display: inline-block;
vertical-align: top;
margin-right: 20px;
padding-right: 20px;
padding-bottom: 30px;
}
.devlog-title {
@ -165,6 +165,13 @@ a:visited.wide-link {
margin-bottom: 10px;
}
.devlog-more {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.video-embed {
position: relative;
width: 100%;