styled custom labels pages

This commit is contained in:
mcguirepr89
2022-03-09 13:04:08 -05:00
parent 8a6f67ff75
commit 9a1eb093a2
3 changed files with 61 additions and 36 deletions
+13 -7
View File
@@ -119,7 +119,7 @@ button:hover {
} }
.topnav, .topnav form { .topnav, .topnav form {
background-color: rgb( 159, 226, 155); background-color: rgb(159, 226, 155);
display: block; display: block;
width: 85%; width: 85%;
margin-left: auto; margin-left: auto;
@@ -266,7 +266,7 @@ button:hover {
color: black; color: black;
} }
.customlabels { .customlabels,.customlabels2 {
float:left; float:left;
} }
@@ -274,13 +274,13 @@ button:hover {
height: 100%; height: 100%;
} }
.customlabels td { .customlabels td,.customlabels2 td {
border:none; border:none;
background-color: transparent; background-color: transparent;
vertical-align: middle; vertical-align: middle;
} }
.customlabels button { .customlabels button,.customlabels2 button {
padding: 12px; padding: 12px;
background-color: rgb(219, 255, 235); background-color: rgb(219, 255, 235);
border: 2px solid black; border: 2px solid black;
@@ -304,6 +304,12 @@ button:hover {
height: 80%; height: 80%;
} }
.column4 {
text-align: justify;
width: 10%;
height: 50%;
}
.column1 form,.column3 form { .column1 form,.column3 form {
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
@@ -355,12 +361,12 @@ body::-webkit-scrollbar {
} }
@media screen and (max-width: 1290px) { @media screen and (max-width: 1290px) {
.column1, .column3 { .column1,.column2,.column3,.column4 {
height: 90% height: 90%
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.customlabels form { .customlabels form,.customlabels2 form {
width: 95%; width: 95%;
} }
.column1, .column3 { .column1, .column3 {
@@ -370,7 +376,7 @@ body::-webkit-scrollbar {
.column1 select,.column3 select { .column1 select,.column3 select {
height: 70%; height: 70%;
} }
.column2 { .column2,.column4 {
display: none; display: none;
} }
.smaller{ .smaller{
+2 -2
View File
@@ -28,8 +28,8 @@
<div class="customlabels column2"> <div class="customlabels column2">
<table><td> <table><td>
<button type="submit" name="view" value="Excluded" form="add">>>ADD>></button><br> <button type="submit" name="view" value="Excluded" form="add">>>ADD>></button>
<br> <br><br>
<button type="submit" name="view" value="Excluded" form="del">REMOVE</button> <button type="submit" name="view" value="Excluded" form="del">REMOVE</button>
</td></table> </td></table>
</div> </div>
+46 -27
View File
@@ -11,33 +11,52 @@ $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
?> ?>
<body> <div class="customlabels smaller">
<h2>All Species Labels</h2> <br>
<form action="" method="POST" id="add"> </div>
<select name="species[]" id="species" multiple size="30"> <body style="height: 90%;">
<option selected value="base">Please Select</option> <p>Warning!<br>If this list contains ANY species, the system will ONLY recognize those species. Keep this list EMPTY unless you are ONLY interested in detecting specific species.</p>
<?php <div class="customlabels2 column1">
foreach($eachlines as $lines){ <form action="" method="POST" id="add">
echo "<option value='".$lines."'>$lines</option>"; <h2>All Species Labels</h2>
}?> <select name="species[]" id="species" multiple size="30">
</select> <option selected value="base">Please Select</option>
<input type="hidden" name="add" value="add"> <?php
</form> foreach($eachlines as $lines){echo
"<option value='".$lines."'>$lines</option>";}
?>
</select>
<input type="hidden" name="add" value="add">
</form>
<div class="customlabels2 smaller">
<button type="submit" name="view" value="Included" form="add">>>ADD>></button>
</div>
</div>
<button type="submit" name="view" value="Included" form="add">Add to list</button><br> <div class="customlabels2 column4">
<button type="submit" name="view" value="Included" form="del">Remove from list</button> <table><td>
<button type="submit" name="view" value="Included" form="add">>>ADD>></button>
<br><br>
<button type="submit" name="view" value="Included" form="del">REMOVE</button>
</td></table>
</div>
<h2>Custom Species List</h2> <div class="customlabels2 column3">
<p>Warning!<br>If this list contains ANY species, the system will ONLY recognize those species. Keep this list EMPTY unless you are ONLY interested in detecting specific species.<br>You have been warned!</p> <form action="" method="POST" id="del">
<form action="" method="POST" id="del"> <h2>Custom Species List</h2>
<select name="species[]" id="value2" multiple size="30"> <select name="species[]" id="value2" multiple size="30">
<option selected value="base">Please Select</option> <option selected value="base">Please Select</option>
<?php <?php
$filename = '/home/pi/BirdNET-Pi/include_species_list.txt'; $filename = '/home/pi/BirdNET-Pi/include_species_list.txt';
$eachlines = file($filename, FILE_IGNORE_NEW_LINES); $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
foreach($eachlines as $lines){ foreach($eachlines as $lines){echo
echo "<option value='".$lines."'>$lines</option>"; "<option value='".$lines."'>$lines</option>";}
}?> ?>
<input type="hidden" name="del" value="del"> </select>
</form> <input type="hidden" name="del" value="del">
</form>
<div class="customlabels2 smaller">
<button type="submit" name="view" value="Included" form="del">REMOVE</button>
</div>
</div>
</body> </body>