Split "Recordings" species list into 3 columns to take up less vertical space

scripts/play.php

@@ -325,22 +325,76 @@ if(!isset($_GET['species']) && !isset($_GET['filename'])){
 
           #By Species
   } elseif($view == "byspecies") {
-    while($results=$result->fetchArray(SQLITE3_ASSOC)){
+    $birds = array();
+    while($results=$result->fetchArray(SQLITE3_ASSOC))
+    {
       $name = $results['Com_Name'];
+      $birds[] = $name;
+    }
 
-      echo "<td>
+    if(count($birds) > 45) {
-        <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";}
+      $num_cols = 3;
+    } else {
+      $num_cols = 1;
+    }
+    $num_rows = ceil(count($birds) / $num_cols);
 
-    #Specific Date
+    for ($row = 0; $row < $num_rows; $row++) {
+      echo "<tr>";
+
+      for ($col = 0; $col < $num_cols; $col++) {
+        $index = $row + $col * $num_rows;
+
+        if ($index < count($birds)) {
+          ?>
+          <td class="spec">
+              <button type="submit" name="species" value="<?php echo $birds[$index];?>"><?php echo $birds[$index];?></button>
+          </td>
+          <?php
+        } else {
+          echo "<td></td>";
+        }
+      }
+
+      echo "</tr>";
+    }
   } elseif($view == "date") {
-    while($results=$result->fetchArray(SQLITE3_ASSOC)){
+    $birds = array();
+while($results=$result->fetchArray(SQLITE3_ASSOC))
+{
   $name = $results['Com_Name'];
   if(realpath($home."/BirdSongs/Extracted/By_Date/".$date."/".str_replace(" ", "_",$name)) !== false){
-        echo "<td>
+    $birds[] = $name;
-          <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";
+  }
+}
+
+if(count($birds) > 45) {}
+  $num_cols = 3;
+} else {
+  $num_cols = 1;
+}
+$num_rows = ceil(count($birds) / $num_cols);
+
+for ($row = 0; $row < $num_rows; $row++) {
+  echo "<tr>";
+
+  for ($col = 0; $col < $num_cols; $col++) {
+    $index = $row + $col * $num_rows;
+
+    if ($index < count($birds)) {
+      ?>
+      <td class="spec">
+          <button type="submit" name="species" value="<?php echo $birds[$index];?>"><?php echo $birds[$index];?></button>
+      </td>
+      <?php
+    } else {
+      echo "<td></td>";
     }
   }
 
+  echo "</tr>";
+}
+
     #Choose
   } else {
     echo "<td>
@@ -553,4 +607,13 @@ echo "<table>
 
       }echo "</table>";}?>
 </div>
+<style>
+td.spec {
+  width: calc(100% / <?php echo $num_cols;?>);
+}
+tr:first-child td.spec {
+  padding-top: 10px;
+}
+</style>
+
 </html>

scripts/stats.php

@@ -87,26 +87,59 @@ if(!file_exists($home."/BirdNET-Pi/scripts/disk_check_exclude.txt") || strpos(fi
       </button>
    </form>
 </div>
-<table>
+<table style="padding-top:10px">
-<?php
+  <?php
-while($results=$result2->fetchArray(SQLITE3_ASSOC))
+  $birds = array();
-{
+  while($results=$result2->fetchArray(SQLITE3_ASSOC))
-$comname = preg_replace('/ /', '_', $results['Com_Name']);
+  {
-$comname = preg_replace('/\'/', '', $comname);
+    $comname = preg_replace('/ /', '_', $results['Com_Name']);
-$filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
+    $comname = preg_replace('/\'/', '', $comname);
-?>
+    $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
-  <tr>
+    $birds[] = $results['Com_Name'];
+  }
+
+  if(count($birds) > 45) {
+    $num_cols = 3;
+  } else {
+    $num_cols = 1;
+  }
+  $num_rows = ceil(count($birds) / $num_cols);
+
+  for ($row = 0; $row < $num_rows; $row++) {
+    echo "<tr>";
+
+    for ($col = 0; $col < $num_cols; $col++) {
+      $index = $row + $col * $num_rows;
+
+      if ($index < count($birds)) {
+        ?>
+        <td>
           <form action="" method="GET">
-  <td><input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
+            <input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
             <input type="hidden" name="view" value="Species Stats">
-    <button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button>
+            <button type="submit" name="species" value="<?php echo $birds[$index];?>"><?php echo $birds[$index];?></button>
-  </td>
-<?php
-}
-?>
           </form>
-  </tr>
+        </td>
+        <?php
+      } else {
+        echo "<td></td>";
+      }
+    }
+
+    echo "</tr>";
+  }
+  ?>
 </table>
+<style>
+td {
+  padding: 0px;
+  width: calc(100% / <?php echo $num_cols;?>);
+}
+tr:first-child td {
+  padding-top: 10px;
+}
+</style>
+
 </div>
 <dialog id="attribution-dialog">
   <h1 id="modalHeading"></h1>