Merge pull request #20 from Sagittal-ai/feature/FLAS-32-Collapse-expand-post-in-list

FLAS-32: Implement Collapse/Expand Functionality for Blog Posts

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");
+}

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;
+}

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,19 +10,20 @@
 {% block content %}
   {% for post in posts %}
     <article class="post">
-      <header>
+      <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'] %}
           <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 %}