summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--apioforum/forum.py9
-rw-r--r--apioforum/static/style.css69
-rw-r--r--apioforum/templates/view_forum.html4
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>