make tags less annoying to look at on small screens (i think)tags

2 files changed, 17 insertions, 5 deletions

diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 66f7faa..935bde1 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -95,6 +95,8 @@ nav .links { display: flex; }
         border-bottom: 1px solid black;
     }
 
+    .only-small { display: none !important }
+
 
 }
 
@@ -102,7 +104,7 @@ nav .links { display: flex; }
 @media not all and (min-width: 800px) {
     .threadlisting {
         display: grid;
-        grid-template-columns: repeat(6,1fr);
+        grid-template-columns: repeat(5,1fr);
         margin-bottom: 5px;
     }
     .threadlisting-part-title {
@@ -116,6 +118,8 @@ nav .links { display: flex; }
         border-right: 1px solid black;
         border-bottom: 1px solid black;
     }
+
+    .only-big { display: none !important }
 }
 
 
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 6958c20..22f24c1 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -13,9 +13,9 @@
 <div class="threadlistings">
 <div class="threadlisting">
     <div class="threadlisting-part threadlisting-part-title threadlisting-header">
-        name
+        name<span class="only-small"> &amp; tags</span>
     </div>
-    <div class="threadlisting-part threadlisting-part-tags threadlisting-header">
+    <div class="threadlisting-part threadlisting-part-tags threadlisting-header only-big">
         tags
     </div>
     <div class="threadlisting-part threadlisting-part-creator threadlisting-header">
@@ -36,8 +36,16 @@
 </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></div>
-    <div class="threadlisting-part threadlisting-part-tags">
+    <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 %}