From 90237e0a0ade065e7ccc40e99b6e1251a69872fa Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair3149@users.noreply.github.com>
Date: Tue, 2 Mar 2021 20:55:13 -0500
Subject: [PATCH] feat: make whole header toggleable

---
 .../sections.js                               | 12 +--
 .../skins.citizen.styles.sections.less        | 94 +++++++++++--------
 2 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/resources/skins.citizen.scripts.sections/sections.js b/resources/skins.citizen.scripts.sections/sections.js
index 6be1767a..7f39b64e 100644
--- a/resources/skins.citizen.scripts.sections/sections.js
+++ b/resources/skins.citizen.scripts.sections/sections.js
@@ -1,18 +1,18 @@
-function bindClick( collToggle, collSection, i, j ) {
+function bindClick( collHeading, collSection, i, j ) {
 	return function () {
 		j = i + 1;
-		this.classList.toggle( 'section-toggle--collapsed' );
+		this.classList.toggle( 'section-heading--collapsed' );
 		collSection[ j ].classList.toggle( 'section-collapsible--collapsed' );
 	};
 }
 
 function main() {
-	var collSection = document.getElementsByClassName( 'section-collapsible' ),
-		collToggle = document.getElementsByClassName( 'section-toggle' ),
+	var collHeading = document.getElementsByClassName( 'section-heading' ),
+		collSection = document.getElementsByClassName( 'section-collapsible' ),
 		i, j;
 
-	for ( i = 0; i < collToggle.length; i++ ) {
-		collToggle[ i ].addEventListener( 'click', bindClick( collToggle, collSection, i, j ) );
+	for ( i = 0; i < collHeading.length; i++ ) {
+		collHeading[ i ].addEventListener( 'click', bindClick( collHeading, collSection, i, j ) );
 	}
 }
 
diff --git a/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less b/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less
index 9f83394c..6eedbc8f 100644
--- a/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less
+++ b/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less
@@ -1,51 +1,67 @@
 @import '../variables.less';
 
-.section {
-	&-toggle {
-		width: 18px;
-		height: 18px;
-		padding: 5px;
-		margin-right: 10px;
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: 18px;
-		cursor: pointer;
-		opacity: var( --opacity-icon-base );
-		transition: @transition-opacity-quick, @transition-transform-quick;
+.client-js {
+	.section {
+		&-heading {
+			cursor: pointer;
+			// So that double clicking won't highlight everything
+			user-select: none;
 
-		&:hover {
-			opacity: var( --opacity-icon-base--hover );
-		}
+			&--collapsed {
+				.section-toggle {
+					transform: rotate3d( 1, 0, 0, 180deg );
+				}
 
-		&:active {
-			opacity: var( --opacity-icon-base--active );
-		}
+				.mw-headline {
+					opacity: var( --opacity-icon-base );
+				}
+			}
 
-		&--collapsed {
-			transform: rotate3d( 1, 0, 0, 180deg );
+			.mw-headline {
+				transition: @transition-opacity-quick;
 
-			~ .mw-headline {
-				color: var( --color-base );
+				&:hover {
+					opacity: var( --opacity-icon-base--hover );
+				}
+
+				&:active {
+					opacity: var( --opacity-icon-base--active );
+				}
 			}
 		}
-	}
 
-	&-heading {
-		.mw-headline {
-			transition: @transition-color-quick;
+		&-toggle {
+			width: 18px;
+			height: 18px;
+			padding: 5px;
+			margin-right: 10px;
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: 18px;
+			cursor: pointer;
+			opacity: var( --opacity-icon-base );
+			transition: @transition-opacity-quick, @transition-transform-quick;
+
+			&:hover {
+				opacity: var( --opacity-icon-base--hover );
+			}
+
+			&:active {
+				opacity: var( --opacity-icon-base--active );
+			}
 		}
-	}
 
-	// Fix button alignment
-	&-heading,
-	&-subheading {
-		display: flex;
-		align-items: center;
-	}
+		// Fix button alignment
+		&-heading,
+		&-subheading {
+			display: flex;
+			align-items: center;
+		}
 
-	&-collapsible {
-		&--collapsed {
-			display: none;
+		&-collapsible {
+			&--collapsed {
+				display: none;
+			}
 		}
 	}
 }
@@ -58,7 +74,9 @@
 
 // Hide toggle when client is noscript
 .client-nojs {
-	.section-toggle {
-		display: none;
+	.section {
+		&-toggle {
+			display: none;
+		}
 	}
 }