From 218b5ea6195560d2c92398ca22c3c42fad8b16c2 Mon Sep 17 00:00:00 2001
From: Alexandre <44178713+alexbelgium@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:07:39 +0200
Subject: [PATCH] Use css for sortbuttons style

Thanks #hiemstra87 https://github.com/Nachtzuster/BirdNET-Pi/pull/115

Co-Authored-By: Hiemstra87 <145980686+hiemstra87@users.noreply.github.com>
---
 homepage/static/dark-style.css | 10 ++++++++++
 homepage/style.css             | 10 ++++++++++
 scripts/play.php               | 10 +++++-----
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/homepage/static/dark-style.css b/homepage/static/dark-style.css
index e9cd265..e1322e2 100644
--- a/homepage/static/dark-style.css
+++ b/homepage/static/dark-style.css
@@ -669,6 +669,16 @@ button:hover {
   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
 }
 
+.sortbutton button:hover {
+  background-color: #2b2b2b;
+  color: white;
+}
+
+.sortbutton button.active {
+  background-color: #2b2b2b;
+  color: white;
+}
+
 button.legacyview {
   display: none;
   color:gray;
diff --git a/homepage/style.css b/homepage/style.css
index 7eaaa20..b039cbd 100644
--- a/homepage/style.css
+++ b/homepage/style.css
@@ -641,6 +641,16 @@ button:hover {
   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
 }
 
+.sortbutton button:hover {
+  background-color: #77c487;
+  color: white;
+}
+
+.sortbutton button.active {
+  background-color: #77c487;
+  color: white;
+}
+
 button.legacyview {
   display: none;
   color:gray;
diff --git a/scripts/play.php b/scripts/play.php
index dc9286f..88223d4 100644
--- a/scripts/play.php
+++ b/scripts/play.php
@@ -400,14 +400,14 @@ if(!isset($_GET['species']) && !isset($_GET['filename'])){
 <div class="play">
 <?php if($view == "byspecies" || $view == "date") { ?>
 <div style="width: auto;
-   text-align: center">
+   text-align: center"> 
    <form action="views.php" method="GET">
       <input type="hidden" name="view" value="Recordings">
       <input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
-      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
+      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='sortbutton active !important;'"; }?> type="submit" name="sort" value="alphabetical">
          <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
       </button>
-      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
+      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='sortbutton active !important;'"; }?> type="submit" name="sort" value="occurrences">
          <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
       </button>
    </form>
@@ -517,10 +517,10 @@ if(isset($_GET['species'])){ ?>
       <input type="hidden" name="view" value="Recordings">
       <input type="hidden" name="species" value="<?php echo $_GET['species']; ?>">
       <input type="hidden" name="sort" value="<?php echo $_GET['sort']; ?>">
-      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="date">
+      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="date">
          <img width=35px src="images/sort_date.svg" title="Sort by date" alt="Sort by date">
       </button>
-      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="confidence">
+      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="confidence">
          <img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
       </button><br>
       <input style="margin-top:10px" <?php if(isset($_GET['only_excluded'])){ echo "checked"; }?> type="checkbox" name="only_excluded" onChange="submit()">