styled exclude species list settings page

This commit is contained in:
mcguirepr89
2022-03-08 15:51:15 -05:00
parent d9bddd283b
commit 78f5024235
2 changed files with 119 additions and 31 deletions
+73
View File
@@ -266,6 +266,55 @@ button:hover {
color: black; color: black;
} }
.customlabels {
float:left;
}
.customlabels table {
height: 100%;
}
.customlabels td {
border:none;
background-color: transparent;
vertical-align: middle;
}
.customlabels button {
padding: 12px;
background-color: rgb(219, 255, 235);
border: 2px solid black;
width: 100%;
}
.column1, .column3 {
width: 45%;
}
.smaller {
width: 100%;
display: none;
margin-left: auto;
margin-right: auto;
}
.column2 {
text-align: center;
width: 10%;
height: 80%;
}
.column1 form,.column3 form {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.column1 select,.column3 select {
height: 80%;
width: 100%;
}
.spectrogram { .spectrogram {
width:50% width:50%
} }
@@ -305,7 +354,28 @@ body::-webkit-scrollbar {
display:none display:none
} }
@media screen and (max-width: 1290px) {
.column1, .column3 {
height: 90%
}
}
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.customlabels form {
width: 95%;
}
.column1, .column3 {
width: 50%;
height: 100%;
}
.column1 select,.column3 select {
height: 70%;
}
.column2 {
display: none;
}
.smaller{
display: block;
}
.systemcontrols button,.servicecontrols button { .systemcontrols button,.servicecontrols button {
width: 60%; width: 60%;
padding: 12px; padding: 12px;
@@ -354,6 +424,9 @@ body::-webkit-scrollbar {
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.column1, .column3 {
width: 100%;
}
.systemcontrols button,.servicecontrols button { .systemcontrols button,.servicecontrols button {
width: 80%; width: 80%;
padding: 12px; padding: 12px;
+31 -16
View File
@@ -2,6 +2,12 @@
<style> <style>
</style> </style>
<body>
<div class="customlabels column1">
<form action="" method="POST" id="add">
<h3>All Species Labels</h3>
<select name="species[]" id="species" multiple size="auto">
<option>Choose a species below to add to the Excluded Species List</option>
<?php <?php
error_reporting(E_ALL); error_reporting(E_ALL);
ini_set('display_errors',1); ini_set('display_errors',1);
@@ -9,34 +15,43 @@ ini_set('display_errors',1);
$filename = 'scripts/labels.txt'; $filename = 'scripts/labels.txt';
$eachline = file($filename, FILE_IGNORE_NEW_LINES); $eachline = file($filename, FILE_IGNORE_NEW_LINES);
foreach($eachline as $lines){echo
"<option value='".$lines."'>$lines</option>";}
?> ?>
<body>
<h2>All Species Labels</h2>
<form action="" method="POST" id="add">
<select name="species[]" id="species" multiple size="30">
<option selected value="base">Please Select</option>
<?php
foreach($eachline as $lines){
echo "<option value='".$lines."'>$lines</option>";
}?>
</select> </select>
<input type="hidden" name="add" value="add"> <input type="hidden" name="add" value="add">
</form> </form>
<div class="customlabels smaller">
<button type="submit" name="view" value="Excluded" form="add">>>ADD>></button>
</div>
</div>
<button type="submit" name="view" value="Excluded" form="add">Add to list</button><br> <div class="customlabels column2">
<button type="submit" name="view" value="Excluded" form="del">Remove from list</button> <table><td>
<button type="submit" name="view" value="Excluded" form="add">>>ADD>></button><br>
<br>
<button type="submit" name="view" value="Excluded" form="del">REMOVE</button>
</td></table>
</div>
<h2>Excluded Species List</h2> <div class="customlabels column3">
<form action="" method="POST" id="del"> <form action="" method="POST" id="del">
<select name="species[]" id="value2" multiple size="30"> <h3>Excluded Species List</h3>
<option selected value="base">Please Select</option> <select name="species[]" id="value2" multiple size="auto">
<?php <?php
$filename = '/home/pi/BirdNET-Pi/exclude_species_list.txt'; $filename = '/home/pi/BirdNET-Pi/exclude_species_list.txt';
$eachline = file($filename, FILE_IGNORE_NEW_LINES); $eachline = file($filename, FILE_IGNORE_NEW_LINES);
foreach($eachline as $lines){ foreach($eachline as $lines){
echo "<option value='".$lines."'>$lines</option>"; echo
"<option value='".$lines."'>$lines</option>";
}?> }?>
</select>
<input type="hidden" name="del" value="del"> <input type="hidden" name="del" value="del">
</form> </form>
<div class="customlabels smaller">
<button type="submit" name="view" value="Excluded" form="del">REMOVE</button>
</div>
</div>
</body> </body>