integrated subforum list

the UI is more compact and aesthetically pleasing, and it allows seeing
activity in subforae more easily. as it stands, all subforae are hidden
away, so no one sees anything that anyone posts in them! this UI
implicitly shows up to four unread subforae.

3 files changed, 77 insertions, 32 deletions

diff --git a/apioforum/forum.py b/apioforum/forum.py
index ce90853..c0c0ba4 100644
--- a/apioforum/forum.py
+++ b/apioforum/forum.py
@@ -216,16 +216,27 @@ def view_forum(forum,page=1):
 			LEFT OUTER JOIN threads ON threads.forum=forums.id 
 			WHERE parent = ? AND unlisted = 0
 			GROUP BY forums.id
-			ORDER BY name ASC
+			ORDER BY forums.updated DESC
 			""",(forum['id'],)).fetchall()
-	subforums = []
+	unread_subforums = []
+	read_subforums = []
 	for s in subforums_rows:
 		a={}
 		a.update(s)
 		if a['updated'] is not None:
 			a['updated'] = datetime.datetime.fromisoformat(a['updated'])
 		if has_permission(a['id'],g.user,"p_view_forum",login_required=False):
-			subforums.append(a)
+			if not read.is_read('forum', a['id']):
+				unread_subforums.append(a)
+			else:
+				read_subforums.append(a)
+
+	shown_subforums = unread_subforums[:4]
+	if len(shown_subforums) > 0:
+		hidden_subforums = unread_subforums[4:] + read_subforums
+	else:
+		shown_subforums = read_subforums[:1]
+		hidden_subforums = read_subforums[1:]
 
 	bureaucrats = db.execute("""
 			SELECT user FROM role_assignments
@@ -242,7 +253,8 @@ def view_forum(forum,page=1):
 		
 	return render_template("view_forum.html",
 			forum=forum,
-			subforums=subforums,
+			shown_subforums=shown_subforums,
+			hidden_subforums=hidden_subforums,
 			threads=threads,
 			thread_tags=thread_tags,
 			bureaucrats=bureaucrats,
diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 63c7347..2ca0e51 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -7,6 +7,7 @@ body { font-family: sans-serif; word-wrap: break-word; }
 	--gray: darkgray;
 	--light-colour: white;
 	--username-colour: hsl(0, 0%, 25%);
+	--grayish: hsl(0, 0%, 80%);
 	--read-colour: hsl(0, 0%, 30%);
 	--red: red;
 	--yellow: yellow;
@@ -198,6 +199,7 @@ nav#pages .pageno { align-self: center; }
 	border-left: 1px solid var(--dark-colour);
 	border-right: 1px solid var(--dark-colour);
 	border-top: 1px solid var(--dark-colour);
+	margin-top: -1px;
 	padding: 10px;
 }
 .listing:last-of-type { border-bottom: 1px solid var(--dark-colour); }
@@ -222,6 +224,24 @@ nav#pages .pageno { align-self: center; }
 	color: var(--dark-colour);
 }
 
+.listing-header, .more-subforums summary {
+	font-weight: normal;
+	font-size: smaller;
+	border-left: 1px solid var(--dark-colour);
+	border-right: 1px solid var(--dark-colour);
+	border-top: 1px solid var(--dark-colour);
+	margin-top: -1px;
+	margin-bottom: 0;
+	padding: 2px 10px 2px 10px;
+	text-align: center;
+	color: var(--dark-colour);
+	background-color: var(--grayish);
+}
+
+.more-subforums summary {
+	background-color: var(--alternating-colour-even);
+}
+
 .thread-listing-tags { 
 	display: flex;
 	align-items: center;
@@ -368,6 +388,7 @@ textarea {
 		--alternating-colour-odd: hsl(0, 0%, 15%);
 		--dark-colour: white;
 		--gray: lightgray;
+		--grayish: hsl(0, 0%, 20%);
 		--light-colour: black;
 		--username-colour: hsl(0, 0%, 80%);
 		--read-colour: hsl(0, 0%, 70%);
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 7732b21..7640439 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -42,34 +42,6 @@
 	{% endif %}
 </p>
 
-{% if subforums %}
-<h2>subforæ</h2>
-<details>
-<summary>show subforæ</summary>
-<div class="forum-list">
-	{% for subforum in subforums %}
-		<div class="listing">
-			<div class="listing-main {% if not is_read('forum', subforum.id) %}unread{% endif %}">
-				<div class="listing-title">
-					<a href="{{url_for('forum.view_forum',forum_id=subforum.id)}}">
-						{{- subforum.name -}}
-					</a>
-				</div>
-			</div>
-			<div class="listing-caption">
-				{% if subforum.updated %}
-					last activity {{ts(subforum.updated)}} ago
-				{% else %}
-					no threads
-				{% endif %}
-			</div>
-		</div>
-	{% endfor %}
-</div>
-</details>
-{% endif %}
-
-<h2>threads</h2>
 <p>
 {% if has_permission(forum.id, g.user, "p_create_threads") %}
 <a class="actionbutton" href="{{url_for('forum.create_thread',forum_id=forum.id)}}">create new thread</a>
@@ -126,7 +98,47 @@ you do not have permission to create threads in this forum
 </details>
 </p>
 
+
+
 {{ pagination_nav(page,max_pageno,'forum.view_forum',forum_id=forum.id) }}
+
+{% macro subforum_listing(subforum) %}
+	<div class="listing">
+		<div class="listing-main {% if not is_read('forum', subforum.id) %}unread{% endif %}">
+			<div class="listing-title">
+				<a href="{{url_for('forum.view_forum',forum_id=subforum.id)}}">
+					{{- subforum.name -}}
+				</a>
+			</div>
+		</div>
+		<div class="listing-caption">
+			{% if subforum.updated %}
+				last activity {{ts(subforum.updated)}} ago
+			{% else %}
+				no threads
+			{% endif %}
+		</div>
+	</div>
+{% endmacro %}
+
+{% if page == 1 and shown_subforums %}
+<h2 class="listing-header">subforæ</h2>
+<div class="forum-list">
+	{% for subforum in shown_subforums %}
+		{{subforum_listing(subforum)}}
+	{% endfor %}
+	{% if hidden_subforums %}
+		<details class="more-subforums">
+		<summary>more...</summary>
+		{% for subforum in hidden_subforums %}
+			{{subforum_listing(subforum)}}
+		{% endfor %}
+		</details>
+	{% endif %}
+</div>
+<h2 class="listing-header">threads</h2>
+{% endif %}
+
 <div class="thread-list">
 	{%for thread in threads%}
 		<div class="listing">