do the

3 files changed, 98 insertions, 90 deletions

diff --git a/apioforum/forum.py b/apioforum/forum.py
index defc5b1..fa6fcc8 100644
--- a/apioforum/forum.py
+++ b/apioforum/forum.py
@@ -26,6 +26,7 @@ def view_forum():
         ORDER BY threads.updated DESC;
         """).fetchall()
     thread_tags = {}
+    preview_post = {}
     #todo: somehow optimise this
     for thread in threads:
         thread_tags[thread['id']] = db.execute(
@@ -34,7 +35,15 @@ def view_forum():
             WHERE thread_tags.thread = ?
             ORDER BY tags.id;
             """,(thread['id'],)).fetchall()
-    return render_template("view_forum.html",threads=threads,thread_tags=thread_tags)
+        preview_post[thread['id']]  = db.execute(
+            """SELECT * FROM posts WHERE thread = ?
+            ORDER BY created DESC;
+            """,(thread['id'],)).fetchone()
+    return render_template("view_forum.html",
+            threads=threads,
+            thread_tags=thread_tags,
+            preview_post=preview_post
+            )
 
 @bp.route("/create_thread",methods=("GET","POST"))
 def create_thread():
diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 07936d2..04b4114 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -88,53 +88,63 @@ nav .links { display: flex; }
 /* todo: make the navbar less bad */
 .flashmsg { border: 1px solid black; background-color: yellow; max-width: max-content; padding: 5px; clear: both;}
 
-.threadlisting:nth-child(even) { background-color: var(--alternating-colour-even) }
-.threadlisting:nth-child(odd) { background-color: var(--alternating-colour-odd) }
-
+.thread-listing:nth-child(even) { background-color: var(--alternating-colour-even) }
+.thread-listing:nth-child(odd) { background-color: var(--alternating-colour-odd) }
 
+.thread-listing {
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    border-top: 1px solid black;
+	padding: 10px;
+}
+.thread-listing:last-of-type { border-bottom: 1px solid black; }
+.thread-listing-main { 
+	display: flex; 
+	align-items: center;
+}
+.thread-listing-title { 
+	overflow: hidden;
+	font-size: larger; 
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	flex-grow: 1;
+}
+.thread-listing-tags { 
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
+}
+.thread-listing-tags .tag { margin-left: 5px; }
+.thread-listing-creation { 
+	display: flex; 
+	margin-left: 5px; 
+	flex-wrap: nowrap; 
+}
+.thread-listing-creator { margin-right: 5px; }
+.thread-preview { 
+	overflow: hidden;
+	font-size: smaller; 
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-top: 10px;
+}
+.thread-preview a, .thread-preview a:visited { color: black; text-decoration: none; }
+.thread-preview-post { font-style: italic; }
+.thread-preview-ts { font-weight: bold; }
 
 /* wide screens */
-@media all and (min-width: 800px) {
-    .threadlisting { display: contents }
-    .threadlistings {
-        display: grid;
-        grid-template-columns: 2fr repeat(5,1fr) 0.4fr;
-    }
-
-    .threadlisting-part {
-        border-left: 1px solid black;
-        border-top: 1px solid black;
-    }
-    .threadlistings {
-        border-right: 1px solid black;
-        border-bottom: 1px solid black;
-    }
-
-    .only-small { display: none !important }
-
-
-}
+@media all and (min-width: 600px) { }
 
 /* small screens */
-@media not all and (min-width: 800px) {
-    .threadlisting {
-        display: grid;
-        grid-template-columns: repeat(5,1fr);
-        margin-bottom: 5px;
-    }
-    .threadlisting-part-title {
-        grid-column: 1 / -1;
-    }
-    .threadlisting-part {
-        border-left: 1px solid black;
-        border-top: 1px solid black;
-    }
-    .threadlisting {
-        border-right: 1px solid black;
-        border-bottom: 1px solid black;
-    }
-
-    .only-big { display: none !important }
+@media not all and (min-width: 600px) {
+	.thread-listing-creation { font-size: small; }
+	.thread-listing-creator {
+		max-width: 75px; 
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
 }
 
 
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 59c594b..99b8f0e 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -10,53 +10,42 @@
 {% else %}
 <p>please log in to create a new thread</p>
 {% endif %}
-<div class="threadlistings">
-<div class="threadlisting">
-    <div class="threadlisting-part threadlisting-part-title threadlisting-header">
-        name<span class="only-small"> &amp; tags</span>
-    </div>
-    <div class="threadlisting-part threadlisting-part-tags threadlisting-header only-big">
-        tags
-    </div>
-    <div class="threadlisting-part threadlisting-part-creator threadlisting-header">
-        creator
-    </div>
-    <div class="threadlisting-part threadlisting-part-created threadlisting-header">
-        created
-    </div>
-    <div class="threadlisting-part threadlisting-part-updated threadlisting-header">
-        last updated
-    </div>
-    <div class="threadlisting-part threadlisting-part-lastactivityby threadlisting-header">
-        last post by
-    </div>
-    <div class="threadlisting-part threadlisting-part-numreplies threadlisting-header">
-        posts
-    </div>
-</div>
-{%for thread in threads%}
-<div class="threadlisting">
-    <div class="threadlisting-part threadlisting-part-title"><a href="{{url_for('thread.view_thread',thread_id=thread.id)}}">{{thread.title}}</a>
-        {% if thread_tags[thread.id]|length > 0 %}
-            <span class="only-small">
-                {% for the_tag in thread_tags[thread.id] %}
-                    {{tag(the_tag)}}
-                {% endfor %}
-            </span>
-        {%endif%}
-    </div>
-    <div class="threadlisting-part threadlisting-part-tags only-big">
-        {% for the_tag in thread_tags[thread.id] %}
-            {{tag(the_tag)}}
-        {% endfor %}
-    </div>
-    <div class="threadlisting-part threadlisting-part-creator">{{disp_user(thread.creator)}}</div>
-    <div class="threadlisting-part threadlisting-part-created">{{ts(thread.created)}}</div>
-    <div class="threadlisting-part threadlisting-part-updated">{{ts(thread.updated)}}</div>
-    <div class="threadlisting-part threadlisting-part-lastactivityby">{{disp_user(thread.last_user)}}</div>
-    <div class="threadlisting-part threadlisting-part-numreplies">{{thread.num_replies}}</div>
-</div>
-{%endfor%}
+<div class="thread-list">
+	{%for thread in threads%}
+		<div class="thread-listing">
+			<div class="thread-listing-main">
+				<div class="thread-listing-title">
+					<a href="{{url_for('thread.view_thread',thread_id=thread.id)}}">
+						{{- thread.title -}}
+					</a>
+				</div>
+				<div class="thread-listing-tags">
+					{% for the_tag in thread_tags[thread.id] %}
+						{{tag(the_tag)}}
+					{% endfor %}
+				</div>
+				<div class="thread-listing-creation">
+					<div class="thread-listing-creator">
+						{{ disp_user(thread.creator) }} 
+					</div>
+					{{ ts(thread.created) }}
+				</div>
+			</div>
+			{% if preview_post[thread.id] %}
+				<div class="thread-preview">
+					{{ disp_user(preview_post[thread.id].author) }}
+					<span class="thread-preview-ts">
+						{{ ts(preview_post[thread.id].created) }}
+					</span>
+					<span class="thread-preview-post">
+						<a href="{{url_for('thread.view_thread', thread_id=thread.id)}}#post_{{preview_post[thread.id].id}}">
+							{{ preview_post[thread.id].content[:500]|e }}
+						</a>
+					</span>
+				</div>
+			{% endif %}
+		</div>
+	{%endfor%}
 </div>
 </main>
 {%endblock%}