From a77fdfaaf8eb4a9b045f4016af22382076aea1f4 Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Fri, 22 Apr 2022 13:27:44 -0400
Subject: [PATCH] Sorting: Improvements to last commit

---
 homepage/images/sort_abc.svg | 13 ++++++++++++
 homepage/images/sort_occ.svg | 19 ++++++++++++++++++
 homepage/style.css           |  7 +++++++
 scripts/play.php             | 38 ++++--------------------------------
 scripts/stats.php            | 38 ++++--------------------------------
 5 files changed, 47 insertions(+), 68 deletions(-)
 create mode 100644 homepage/images/sort_abc.svg
 create mode 100644 homepage/images/sort_occ.svg

diff --git a/homepage/images/sort_abc.svg b/homepage/images/sort_abc.svg
new file mode 100644
index 0000000..09f1be3
--- /dev/null
+++ b/homepage/images/sort_abc.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            width="35px" height="35px" viewBox="0 0 381.404 381.404" style="enable-background:new 0 0 35 35;"
+            xml:space="preserve">
+            <g>
+               <path d="M34.249,246.497l63.655,25.155V5.1c0-2.818,2.29-5.094,5.103-5.1h51.022c2.811,0.006,5.096,2.282,5.096,5.094v266.559
+                  l63.658-25.155c2.134-0.824,4.569-0.147,5.943,1.675c1.39,1.839,1.378,4.36-0.022,6.178l-96.136,125.057
+                  c-0.971,1.261-2.466,1.994-4.053,1.998c-1.573,0-3.074-0.737-4.041-1.998L28.333,254.35c-0.705-0.92-1.058-2.019-1.053-3.106
+                  c0-1.063,0.336-2.157,1.021-3.082C29.682,246.35,32.115,245.66,34.249,246.497z M354.125,244.402h-21.907l-12.364-29.736h-37.228
+                  l-12.027,29.736h-21.407l41.452-99.561h21.861L354.125,244.402z M314.653,200.095l-9.91-23.779
+                  c-1.412-3.374-2.571-6.58-3.599-9.677c-1.144,3.429-2.266,6.528-3.405,9.476l-9.948,23.974h26.862V200.095z M340.509,267.006
+                  h-83.718V282.3h56.287l-61.786,73.763v10.518h90.071v-15.289h-62.305l61.438-73.472v-10.813H340.509z"/>
+            </g>
+         </svg>
\ No newline at end of file
diff --git a/homepage/images/sort_occ.svg b/homepage/images/sort_occ.svg
new file mode 100644
index 0000000..bf6dd7e
--- /dev/null
+++ b/homepage/images/sort_occ.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            width="35px" height="35px" viewBox="0 0 96.55 96.55" style="enable-background:new 0 0 35 35;" xml:space="preserve"
+            >
+            <g>
+               <g>
+                  <path d="M73.901,56.376h-26.76c-0.652,0-1.182,0.526-1.182,1.181v14.065c0,0.651,0.529,1.18,1.182,1.18h26.76
+                     c0.654,0,1.184-0.526,1.184-1.18V57.555C75.084,56.902,74.555,56.376,73.901,56.376z"/>
+                  <path d="M62.262,80.001H47.141c-0.652,0-1.182,0.528-1.182,1.183v14.063c0,0.653,0.529,1.182,1.182,1.182h15.122
+                     c0.652,0,1.182-0.526,1.182-1.182V81.182C63.444,80.529,62.916,80.001,62.262,80.001z"/>
+                  <path d="M84.122,28.251h-36.98c-0.652,0-1.182,0.527-1.182,1.18v14.063c0,0.652,0.529,1.182,1.182,1.182h36.98
+                     c0.651,0,1.181-0.529,1.181-1.182V29.43C85.301,28.778,84.773,28.251,84.122,28.251z"/>
+                  <path d="M94.338,0.122H47.141c-0.652,0-1.182,0.529-1.182,1.182v14.063c0,0.654,0.529,1.182,1.182,1.182h47.198
+                     c0.652,0,1.181-0.527,1.181-1.182V1.303C95.519,0.651,94.992,0.122,94.338,0.122z"/>
+                  <path d="M39.183,65.595h-8.011V2c0-1.105-0.896-2-2-2h-16.13c-1.104,0-2,0.895-2,2v63.595h-8.01c-0.771,0-1.472,0.443-1.804,1.138
+                     C0.895,67.427,0.99,68.25,1.472,68.85l18.076,26.954c0.38,0.474,0.953,0.746,1.559,0.746s1.178-0.272,1.558-0.746L40.741,68.85
+                     c0.482-0.601,0.578-1.423,0.245-2.117C40.654,66.039,39.954,65.595,39.183,65.595z"/>
+               </g>
+            </g>
+         </svg>
\ No newline at end of file
diff --git a/homepage/style.css b/homepage/style.css
index 3c1e680..764d0e8 100644
--- a/homepage/style.css
+++ b/homepage/style.css
@@ -509,4 +509,11 @@ button:hover {
 }
 .relative {
   position:relative;
+}
+.sortbutton {
+  margin-top:10px;
+  font-size:x-large;
+  background:#dbffeb;
+  padding:5px;
+  border: 2px solid black;
 }
\ No newline at end of file
diff --git a/scripts/play.php b/scripts/play.php
index d24cd39..ad869be 100644
--- a/scripts/play.php
+++ b/scripts/play.php
@@ -101,41 +101,11 @@ if(!isset($_GET['species']) && !isset($_GET['filename'])){
    <form action="" method="GET">
       <input type="hidden" name="view" value="Recordings">
       <input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
-      <button style="margin-top:10px;font-size:x-large;background:#dbffeb;padding:5px;border: 2px solid black;" type="submit" name="sort" value="alphabetical">
-         <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-            width="35px" height="35px" viewBox="0 0 381.404 381.404" style="enable-background:new 0 0 35 35;"
-            xml:space="preserve">
-            <g>
-               <path d="M34.249,246.497l63.655,25.155V5.1c0-2.818,2.29-5.094,5.103-5.1h51.022c2.811,0.006,5.096,2.282,5.096,5.094v266.559
-                  l63.658-25.155c2.134-0.824,4.569-0.147,5.943,1.675c1.39,1.839,1.378,4.36-0.022,6.178l-96.136,125.057
-                  c-0.971,1.261-2.466,1.994-4.053,1.998c-1.573,0-3.074-0.737-4.041-1.998L28.333,254.35c-0.705-0.92-1.058-2.019-1.053-3.106
-                  c0-1.063,0.336-2.157,1.021-3.082C29.682,246.35,32.115,245.66,34.249,246.497z M354.125,244.402h-21.907l-12.364-29.736h-37.228
-                  l-12.027,29.736h-21.407l41.452-99.561h21.861L354.125,244.402z M314.653,200.095l-9.91-23.779
-                  c-1.412-3.374-2.571-6.58-3.599-9.677c-1.144,3.429-2.266,6.528-3.405,9.476l-9.948,23.974h26.862V200.095z M340.509,267.006
-                  h-83.718V282.3h56.287l-61.786,73.763v10.518h90.071v-15.289h-62.305l61.438-73.472v-10.813H340.509z"/>
-            </g>
-         </svg>
+      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
+         <img src="images/sort_abc.svg" alt="Sort by alphabetical">
       </button>
-      <button style="margin-top:10px;font-size:x-large;background:#dbffeb;padding:5px;border: 2px solid black;" type="submit" name="sort" value="occurrences">
-         <svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-            width="35px" height="35px" viewBox="0 0 96.55 96.55" style="enable-background:new 0 0 35 35;" xml:space="preserve"
-            >
-            <g>
-               <g>
-                  <path d="M73.901,56.376h-26.76c-0.652,0-1.182,0.526-1.182,1.181v14.065c0,0.651,0.529,1.18,1.182,1.18h26.76
-                     c0.654,0,1.184-0.526,1.184-1.18V57.555C75.084,56.902,74.555,56.376,73.901,56.376z"/>
-                  <path d="M62.262,80.001H47.141c-0.652,0-1.182,0.528-1.182,1.183v14.063c0,0.653,0.529,1.182,1.182,1.182h15.122
-                     c0.652,0,1.182-0.526,1.182-1.182V81.182C63.444,80.529,62.916,80.001,62.262,80.001z"/>
-                  <path d="M84.122,28.251h-36.98c-0.652,0-1.182,0.527-1.182,1.18v14.063c0,0.652,0.529,1.182,1.182,1.182h36.98
-                     c0.651,0,1.181-0.529,1.181-1.182V29.43C85.301,28.778,84.773,28.251,84.122,28.251z"/>
-                  <path d="M94.338,0.122H47.141c-0.652,0-1.182,0.529-1.182,1.182v14.063c0,0.654,0.529,1.182,1.182,1.182h47.198
-                     c0.652,0,1.181-0.527,1.181-1.182V1.303C95.519,0.651,94.992,0.122,94.338,0.122z"/>
-                  <path d="M39.183,65.595h-8.011V2c0-1.105-0.896-2-2-2h-16.13c-1.104,0-2,0.895-2,2v63.595h-8.01c-0.771,0-1.472,0.443-1.804,1.138
-                     C0.895,67.427,0.99,68.25,1.472,68.85l18.076,26.954c0.38,0.474,0.953,0.746,1.559,0.746s1.178-0.272,1.558-0.746L40.741,68.85
-                     c0.482-0.601,0.578-1.423,0.245-2.117C40.654,66.039,39.954,65.595,39.183,65.595z"/>
-               </g>
-            </g>
-         </svg>
+      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
+         <img src="images/sort_occ.svg" alt="Sort by occurrences">
       </button>
    </form>
 </div>
diff --git a/scripts/stats.php b/scripts/stats.php
index e69de9d..181d2ba 100644
--- a/scripts/stats.php
+++ b/scripts/stats.php
@@ -71,41 +71,11 @@ if(isset($_GET['species'])){
    text-align: center">
    <form action="" method="GET">
       <input type="hidden" name="view" value="Species Stats">
-      <button style="margin-top:10px;font-size:x-large;background:#dbffeb;padding:5px;border: 2px solid black;" type="submit" name="sort" value="alphabetical">
-         <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-            width="35px" height="35px" viewBox="0 0 381.404 381.404" style="enable-background:new 0 0 35 35;"
-            xml:space="preserve">
-            <g>
-               <path d="M34.249,246.497l63.655,25.155V5.1c0-2.818,2.29-5.094,5.103-5.1h51.022c2.811,0.006,5.096,2.282,5.096,5.094v266.559
-                  l63.658-25.155c2.134-0.824,4.569-0.147,5.943,1.675c1.39,1.839,1.378,4.36-0.022,6.178l-96.136,125.057
-                  c-0.971,1.261-2.466,1.994-4.053,1.998c-1.573,0-3.074-0.737-4.041-1.998L28.333,254.35c-0.705-0.92-1.058-2.019-1.053-3.106
-                  c0-1.063,0.336-2.157,1.021-3.082C29.682,246.35,32.115,245.66,34.249,246.497z M354.125,244.402h-21.907l-12.364-29.736h-37.228
-                  l-12.027,29.736h-21.407l41.452-99.561h21.861L354.125,244.402z M314.653,200.095l-9.91-23.779
-                  c-1.412-3.374-2.571-6.58-3.599-9.677c-1.144,3.429-2.266,6.528-3.405,9.476l-9.948,23.974h26.862V200.095z M340.509,267.006
-                  h-83.718V282.3h56.287l-61.786,73.763v10.518h90.071v-15.289h-62.305l61.438-73.472v-10.813H340.509z"/>
-            </g>
-         </svg>
+      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
+         <img src="images/sort_abc.svg" alt="Sort by alphabetical">
       </button>
-      <button style="margin-top:10px;font-size:x-large;background:#dbffeb;padding:5px;border: 2px solid black;" type="submit" name="sort" value="occurrences">
-         <svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-            width="35px" height="35px" viewBox="0 0 96.55 96.55" style="enable-background:new 0 0 35 35;" xml:space="preserve"
-            >
-            <g>
-               <g>
-                  <path d="M73.901,56.376h-26.76c-0.652,0-1.182,0.526-1.182,1.181v14.065c0,0.651,0.529,1.18,1.182,1.18h26.76
-                     c0.654,0,1.184-0.526,1.184-1.18V57.555C75.084,56.902,74.555,56.376,73.901,56.376z"/>
-                  <path d="M62.262,80.001H47.141c-0.652,0-1.182,0.528-1.182,1.183v14.063c0,0.653,0.529,1.182,1.182,1.182h15.122
-                     c0.652,0,1.182-0.526,1.182-1.182V81.182C63.444,80.529,62.916,80.001,62.262,80.001z"/>
-                  <path d="M84.122,28.251h-36.98c-0.652,0-1.182,0.527-1.182,1.18v14.063c0,0.652,0.529,1.182,1.182,1.182h36.98
-                     c0.651,0,1.181-0.529,1.181-1.182V29.43C85.301,28.778,84.773,28.251,84.122,28.251z"/>
-                  <path d="M94.338,0.122H47.141c-0.652,0-1.182,0.529-1.182,1.182v14.063c0,0.654,0.529,1.182,1.182,1.182h47.198
-                     c0.652,0,1.181-0.527,1.181-1.182V1.303C95.519,0.651,94.992,0.122,94.338,0.122z"/>
-                  <path d="M39.183,65.595h-8.011V2c0-1.105-0.896-2-2-2h-16.13c-1.104,0-2,0.895-2,2v63.595h-8.01c-0.771,0-1.472,0.443-1.804,1.138
-                     C0.895,67.427,0.99,68.25,1.472,68.85l18.076,26.954c0.38,0.474,0.953,0.746,1.559,0.746s1.178-0.272,1.558-0.746L40.741,68.85
-                     c0.482-0.601,0.578-1.423,0.245-2.117C40.654,66.039,39.954,65.595,39.183,65.595z"/>
-               </g>
-            </g>
-         </svg>
+      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
+         <img src="images/sort_occ.svg" alt="Sort by occurrences">
       </button>
    </form>
 </div>