Implemented functionality to collapse and expand posts in the main blog view. Users can now toggle the visibility of a post's body by clicking on the post header. Additionally, clicking on the "Posts" header at the top of the page will toggle the visibility of all posts simultaneously. This enhancement improves the user experience by allowing users to manage the display of content more efficiently. Fixes #FLAS-32
29 lines
944 B
HTML
29 lines
944 B
HTML
{% extends 'base.html' %}
|
|
|
|
{% block header %}
|
|
<h1 id="toggle-all">Posts</h1>
|
|
{% if g.user %}
|
|
<a class="action" href="{{ url_for('blog.create') }}">New</a>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% for post in posts %}
|
|
<article class="post">
|
|
<header class="post-header" onclick="togglePostBody({{ post['id'] }})">
|
|
<div>
|
|
<h1>{{ post['title'] }}</h1>
|
|
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
|
|
</div>
|
|
{% if g.user['id'] == post['author_id'] %}
|
|
<a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
|
|
{% endif %}
|
|
</header>
|
|
<p class="body" id="post-body-{{ post['id'] }}">{{ post['body'] }}</p>
|
|
</article>
|
|
{% if not loop.last %}
|
|
<hr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<script src="{{ url_for('static', filename='collapse.js') }}"></script>
|
|
{% endblock %}
|