From 059ad172d2376ecd1eeb7551c6321bd13d3314f0 Mon Sep 17 00:00:00 2001
From: citrons <citrons@mondecitronne.com>
Date: Tue, 17 Jun 2025 00:51:31 -0500
Subject: better, fancier more button

it respects the alternating color scheme
---
 apioforum/static/style.css          | 21 ++++++++++++++++++---
 apioforum/templates/view_forum.html | 10 ++++------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index b1d7827..3cf825c 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -25,6 +25,8 @@ body {
 a { color: var(--blue) }
 a:visited { color: var(--visited); }
 
+summary { user-select: none; }
+
 .post { margin: 0px; }
 .post:nth-child(even) { background-color: var(--alternating-colour-even) }
 .post:nth-child(odd)  { background-color: var(--alternating-colour-odd) }
@@ -211,8 +213,8 @@ nav.pages .pageno { align-self: center; }
 /* todo: make the navbar less bad */
 .flashmsg { border: 1px solid var(--border-colour); background-color: yellow; max-width: max-content; padding: 5px; clear: both; color: black}
 
-.listing:nth-child(even) { background-color: var(--alternating-colour-even) }
-.listing:nth-child(odd) { background-color: var(--alternating-colour-odd) }
+.listing:nth-of-type(even) { background-color: var(--alternating-colour-even) }
+.listing:nth-of-type(odd) { background-color: var(--alternating-colour-odd) }
 
 .listing {
 	border-left: 1px solid var(--border-colour);
@@ -252,13 +254,26 @@ nav.pages .pageno { align-self: center; }
 	padding: 2px 10px 2px 10px;
 	text-align: center;
 	color: var(--dark-colour);
+}
+
+.listing-header, .listing-box {
 	background-color: var(--grayish);
 }
 
+.more-subforums:nth-child(even) {
+	background-color: var(--alternating-colour-even)
+}
+.more-subforums:nth-child(odd) {
+	background-color: var(--alternating-colour-odd)
+}
+.more-subforums summary:hover { background-color: hsl(0, 0%, 100%, 0.8); }
 .more-subforums summary {
-	background-color: var(--alternating-colour-even);
+	padding: 8px;
 }
 
+details:not([open]).more-subforums ~ .hidden-subforum { display: none; }
+details[open].more-subforums { display: none; }
+
 .listing-message {
 	margin: 0;
 	padding: 20px;
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 94238a7..2bdb5a4 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -105,8 +105,8 @@ you do not have permission to create threads in this forum
 
 {{ pagination_nav(page,max_pageno,'forum.view_forum',forum_id=forum.id) }}
 
-{% macro subforum_listing(subforum) %}
-	<div class="listing">
+{% macro subforum_listing(subforum,hidden=False) %}
+	<div class="listing {%if hidden%}hidden-subforum{%endif%}">
 		<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)}}">
@@ -131,12 +131,10 @@ you do not have permission to create threads in this forum
 		{{subforum_listing(subforum)}}
 	{% endfor %}
 	{% if hidden_subforums %}
-		<details class="more-subforums">
-		<summary>more...</summary>
+		<details class="more-subforums"><summary>more...</summary></details>
 		{% for subforum in hidden_subforums %}
-			{{subforum_listing(subforum)}}
+			{{subforum_listing(subforum,hidden=True)}}
 		{% endfor %}
-		</details>
 	{% endif %}
 </div>
 <h2 class="listing-header">threads</h2>
-- 
cgit v1.2.3