From 890ee95d28132b41394a8ef66317c8abdd072965 Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Mon, 9 Sep 2024 22:12:43 +0000
Subject: [PATCH 1/2] Add collapsible posts feature

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
---
 flaskr/static/collapse.js        | 24 ++++++++++++++++++++++++
 flaskr/static/style.css          |  6 ++++++
 flaskr/templates/blog/index.html |  7 ++++---
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 flaskr/static/collapse.js

diff --git a/flaskr/static/collapse.js b/flaskr/static/collapse.js
new file mode 100644
index 00000000..ea8145cd
--- /dev/null
+++ b/flaskr/static/collapse.js
@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const toggleAllButton = document.getElementById("toggle-all");
+    const postHeaders = document.querySelectorAll(".post-header");
+    const posts = document.querySelectorAll(".post");
+
+    toggleAllButton.addEventListener("click", function() {
+        posts.forEach(post => {
+            post.classList.toggle("collapsed");
+        });
+    });
+
+    postHeaders.forEach(header => {
+        header.addEventListener("click", function(event) {
+            const postId = event.currentTarget.getAttribute("onclick").match(/\d+/)[0];
+            togglePostBody(postId);
+        });
+    });
+});
+
+function togglePostBody(postId) {
+    const postBody = document.getElementById(`post-body-${postId}`);
+    const post = postBody.closest(".post");
+    post.classList.toggle("collapsed");
+}
diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index 0b22aba7..f4c1c098 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -88,6 +88,7 @@ nav ul li a, nav ul li span, header .action {
   display: flex;
   align-items: flex-end;
   font-size: 0.85em;
+  cursor: pointer;
 }
 
 .post > header > div:first-of-type {
@@ -106,6 +107,7 @@ nav ul li a, nav ul li span, header .action {
 
 .post .body {
   white-space: pre-line;
+  display: block;
 }
 
 .content:last-child {
@@ -228,3 +230,7 @@ body.dark-mode .content textarea {
   color: #e0e0e0;
   border: 1px solid #555;
 }
+
+.post.collapsed .body {
+  display: none;
+}
diff --git a/flaskr/templates/blog/index.html b/flaskr/templates/blog/index.html
index 3481b8e1..25dfd6df 100644
--- a/flaskr/templates/blog/index.html
+++ b/flaskr/templates/blog/index.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block header %}
-  <h1>{% block title %}Posts{% endblock %}</h1>
+  <h1 id="toggle-all">Posts</h1>
   {% if g.user %}
     <a class="action" href="{{ url_for('blog.create') }}">New</a>
   {% endif %}
@@ -10,7 +10,7 @@
 {% block content %}
   {% for post in posts %}
     <article class="post">
-      <header>
+      <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>
@@ -19,10 +19,11 @@
           <a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
         {% endif %}
       </header>
-      <p class="body">{{ post['body'] }}</p>
+      <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 %}

From 2d7d750d918d2cce720014461fb4c0bdca9ae101 Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Mon, 9 Sep 2024 22:25:18 +0000
Subject: [PATCH 2/2] Restrict onclick to h1 text

This change modifies the onclick event to apply only to the h1 text
within the header section of the blog index page. Previously, the
onclick event was applied to the entire header section, which could
lead to unintended behavior when users interacted with other parts
of the header. By restricting the onclick event to just the h1 text,
we ensure that only the intended element responds to user clicks,
improving the user experience and preventing potential confusion.
---
 flaskr/templates/blog/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flaskr/templates/blog/index.html b/flaskr/templates/blog/index.html
index 25dfd6df..f257bec6 100644
--- a/flaskr/templates/blog/index.html
+++ b/flaskr/templates/blog/index.html
@@ -10,9 +10,9 @@
 {% block content %}
   {% for post in posts %}
     <article class="post">
-      <header class="post-header" onclick="togglePostBody({{ post['id'] }})">
+      <header class="post-header">
         <div>
-          <h1>{{ post['title'] }}</h1>
+          <h1 onclick="togglePostBody({{ post['id'] }})">{{ 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'] %}