improved button state visualization

public/elotracker/chart-integration.js

@@ -378,11 +378,15 @@ function getColor(num) {
 function toggle_combined_chart() {
 	const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
 	const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
+	const buttons = document.querySelectorAll("button.open-general-graph");
 	if (chart.classList.contains("closed")) {
 		comb_charts.forEach(element => element.classList.add("closed"));
+		buttons.forEach(element => element.classList.remove("dropdown-open"));
 		chart.classList.remove("closed");
+		this.classList.add("dropdown-open");
 	} else {
 		chart.classList.add("closed");
+		this.classList.remove("dropdown-open");
 	}
 }
 

public/elotracker/index.php

@@ -14,8 +14,8 @@
     <div class='leaderboard'>
         <button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren <?php echo file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
         <div class='combined-charts-buttons'>
-            <button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button>
-            <button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button>
+            <button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich <?php echo file_get_contents(__DIR__."/../img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
+            <button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich <?php echo file_get_contents(__DIR__."/../img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
         </div>
         <div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
         <div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>

public/elotracker/styles.css

@@ -38,6 +38,9 @@ button[disabled] {
 button[disabled]:hover {
 	background-color: initial;
 }
+button svg {
+	transition: transform 400ms;
+}
 
 .uem-logo-header {
 	display: flex;
@@ -56,6 +59,18 @@ button.update-leaderboard {
 	align-items: center;
 	margin-bottom: 8px;
 }
+button.open-general-graph {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+	align-items: center;
+}
+button.dropdown-open {
+	background-color: #1f2931;
+}
+button.dropdown-open svg {
+	transform: rotateX(180deg);
+}
 button.progress-button {
 	position: relative;
 	overflow: hidden;
@@ -81,6 +96,12 @@ button.button-updating svg {
 	to { transform: rotate(-360deg)}
 }
 
+.combined-charts-buttons {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+}
+
 .leaderboard {
 	display: flex;
 	flex-direction: column;

public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-357.85 253.85-584 296-626.15l184 184 184-184L706.15-584 480-357.85Z"/></svg>