view number of replies and also vastly improve css by using grid instead of flex box

3 files changed, 69 insertions, 13 deletions

diff --git a/apioforum/forum.py b/apioforum/forum.py
index f25d0da..e5d91f9 100644
--- a/apioforum/forum.py
+++ b/apioforum/forum.py
@@ -12,7 +12,14 @@ bp = Blueprint("forum", __name__, url_prefix="/")
 @bp.route("/")
 def view_forum():
     db = get_db()
-    threads = db.execute("SELECT * FROM threads ORDER BY updated DESC;").fetchall()
+    threads = db.execute(
+        """SELECT threads.id, threads.title, threads.creator, threads.created,
+        threads.updated, count(posts.id) as num_replies
+        FROM threads
+        INNER JOIN posts ON posts.thread = threads.id
+        GROUP BY threads.id
+        ORDER BY threads.updated DESC;
+        """).fetchall()
     return render_template("view_forum.html",threads=threads)
 
 @bp.route("/create_thread",methods=("GET","POST"))
diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 46d5fdb..4c00851 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -49,26 +49,71 @@ nav li:first-of-type { margin-left:0.5em }
 nav { float: right }
 nav a { color: blue; text-decoration: none }
 
-.flashmsg { border: 1px solid black; background-color: yellow; width: max-content; padding: 5px; }
+/* todo: make the navbar less bad */
+.flashmsg { border: 1px solid black; background-color: yellow; width: max-content; padding: 5px; clear: both;}
 
 .threadlisting:nth-child(even) { background-color: #eee }
 .threadlisting:nth-child(odd) { background-color: #ddd }
 
-.threadlisting { display: flex; flex-flow: row wrap; text-align: center }
-.threadlisting-part { flex: 1 0px; display: table-cell; vertical-align: middle; padding: 3px}
-.threadlisting-part-title { flex: 3 0px }
-.threadlisting-header { font-weight: bold }
-@media all and (max-width: 800px) {
-    .threadlisting-part-title { flex: 2 100%; }
-    .threadlisting { margin-bottom: 5px; }
-}
+/* wide screens */
+@media all and (min-width: 800px) {
+    .threadlisting { display: contents }
+    .threadlistings {
+        display: grid;
+        grid-template-columns: 2fr 0.4fr repeat(3, 1fr) 0.4fr;
+    }
+
+    /* borders */
+    .threadlisting-part {
+        border-left: 1px solid black;
+        border-top: 1px solid black;
+    }
+    .threadlistings {
+        border-right: 1px solid black;
+        border-bottom: 1px solid black;
+    }
 
+}
+/* very wide screens */
 @media all and (min-width: 1200px) {
-    .threadlisting { width: 1200px }
+    .threadlistings { width: 1200px }
+}
+
+/* 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;
+    }
 }
 
-.threadlisting-part-id { flex: 0.4 0px; }
-.threadlisting-part { border: 1px solid black }
+
+.threadlisting-part {
+    background-color: inherit;
+    display: table-cell;
+    vertical-align: middle;
+    padding: 3px;
+    text-align: center;
+}
+
+.threadlisting-part-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.threadlisting-header { font-weight: bold }
 
 .actionbutton::before {
     content: "[";
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 7c4b45c..30fcb64 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -23,6 +23,9 @@
     <div class="threadlisting-part threadlisting-part-updated threadlisting-header">
         last updated
     </div>
+    <div class="threadlisting-part threadlisting-part-numreplies threadlisting-header">
+        replies
+    </div>
 </div>
 {%for thread in threads%}
 <div class="threadlisting">
@@ -31,6 +34,7 @@
     <div class="threadlisting-part threadlisting-part-creator">{{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-numreplies">{{thread.num_replies}}</div>
 </div>
 {%endfor%}
 </div>