diff options
| -rw-r--r-- | apioforum/forum.py | 9 | ||||
| -rw-r--r-- | apioforum/static/style.css | 69 | ||||
| -rw-r--r-- | apioforum/templates/view_forum.html | 4 |
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> |