add stylings for tags, and change styles of view forum page to give us more space too

5 files changed, 38 insertions, 4 deletions

diff --git a/apioforum/db.py b/apioforum/db.py
index c24aa0e..1d7bd2b 100644
--- a/apioforum/db.py
+++ b/apioforum/db.py
@@ -65,7 +65,19 @@ CREATE TRIGGER posts_au AFTER UPDATE ON posts BEGIN
     INSERT INTO posts_fts(posts_fts, rowid, content) VALUES('delete', old.id, old.content);
     INSERT INTO posts_fts(rowid, content) VALUES (new.id, new.content);
 END;
+""",
 """
+CREATE TABLE tags (
+    id INTEGER PRIMARY KEY,
+    name TEXT NOT NULL,
+    text_colour TEXT NOT NULL,
+    bg_colour TEXT NOT NULL
+);
+CREATE TABLE thread_tags (
+    thread INTEGER NOT NULL REFERENCES threads(id),
+    tag INTEGER NOT NULL REFERENCES tags(id)
+);
+""",
 ]
 
 def init_db():
diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index df8ce7e..0672548 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -69,7 +69,7 @@ nav .links { display: flex; }
     .threadlisting { display: contents }
     .threadlistings {
         display: grid;
-        grid-template-columns: 2fr repeat(4,1fr) 0.4fr;
+        grid-template-columns: 2fr repeat(5,1fr) 0.4fr;
     }
 
     .threadlisting-part {
@@ -81,13 +81,14 @@ nav .links { display: flex; }
         border-bottom: 1px solid black;
     }
 
+
 }
 
 /* small screens */
 @media not all and (min-width: 800px) {
     .threadlisting {
         display: grid;
-        grid-template-columns: repeat(5,1fr);
+        grid-template-columns: repeat(6,1fr);
         margin-bottom: 5px;
     }
     .threadlisting-part-title {
@@ -141,6 +142,9 @@ main {
     max-width: 60ch;
     margin: auto;
 }
+main.widemain {
+    max-width: 120ch;
+}
 
 blockquote {
     margin-left: 10px;
@@ -151,3 +155,9 @@ blockquote {
 .search-form {
     display: inline-block;
 }
+
+.tag {
+    font-size: .75rem;
+    padding: 1px 3px;
+    border: 1px solid black;
+}
diff --git a/apioforum/templates/base.html b/apioforum/templates/base.html
index ba96c91..1802ee5 100644
--- a/apioforum/templates/base.html
+++ b/apioforum/templates/base.html
@@ -49,9 +49,11 @@
             <div class="flashmsg">{{ msg }}</div>
         {% endfor %}
 
+        {% block nmcontent %}
         <main>
             {%block content %}{% endblock %}
         </main>
+        {% endblock %}
     <script>/* bees */</script>
     </body>
 </html>
diff --git a/apioforum/templates/common.html b/apioforum/templates/common.html
index 33aee0b..042f8bd 100644
--- a/apioforum/templates/common.html
+++ b/apioforum/templates/common.html
@@ -26,3 +26,7 @@
 {% macro ts(dt) -%}
 <time title="{{dt.isoformat(' ')}}" datetime="{{dt.isoformat(' ')}}">{{dt | fuzzy}}</time>
 {%- endmacro %}
+
+{% macro tag(name, fg, bg) -%}
+<span class="tag" style="color: {{fg}}; background-color: {{bg}}">{{name}}</span>
+{%- endmacro %}
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index a4a1ee1..ee0e496 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -1,7 +1,8 @@
 {% extends 'base.html' %}
-{% from 'common.html' import ts %}
+{% from 'common.html' import ts, tag %}
 {% block header %}<h1>{% block title %}apioforum{%endblock%}</h1>{%endblock%}
-{%block content%}
+{%block nmcontent%}
+<main class="widemain">
 <p>welcome to the apioforum</p>
 <p>forum rules: do not be a bad person. do not do bad things.</p>
 {% if g.user %}
@@ -14,6 +15,9 @@
     <div class="threadlisting-part threadlisting-part-title threadlisting-header">
         name
     </div>
+    <div class="threadlisting-part threadlisting-part-tags threadlisting-header">
+        tags
+    </div>
     <div class="threadlisting-part threadlisting-part-creator threadlisting-header">
         creator
     </div>
@@ -33,6 +37,7 @@
 {%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></div>
+    <div class="threadlisting-part threadlisting-part-tags">{{tag("the","black","yellow")}} {{tag("bees","yellow","black")}} {{tag("excellent","black","lightsteelblue")}}</div>
     <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>
@@ -41,4 +46,5 @@
 </div>
 {%endfor%}
 </div>
+</main>
 {%endblock%}