switched CSS to flexbox
This commit is contained in:
mcguirepr89
+62
-113
@@ -74,6 +74,18 @@ button:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding-top: 1px;
|
||||
height: 8%;
|
||||
@@ -103,14 +115,6 @@ button:hover {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.italic {
|
||||
-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
||||
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
||||
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
||||
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
||||
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -120,26 +124,25 @@ button:hover {
|
||||
|
||||
.topnav {
|
||||
background-color: rgb(159, 226, 155);
|
||||
display: block;
|
||||
width: 85%;
|
||||
display: flex;
|
||||
flex: 65%;
|
||||
width: 65%;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.topnav form {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-rigth: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topnav button {
|
||||
background-color: transparent;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
float: left;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topnav button:hover {
|
||||
@@ -152,7 +155,6 @@ button:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Hide the link that should open and close the topnav on small screens */
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -166,10 +168,6 @@ button:hover {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.overview table {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.overview th {
|
||||
background-color: rgb(219, 255, 235);
|
||||
border: 2px solid black;
|
||||
@@ -181,36 +179,28 @@ button:hover {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.overview img {
|
||||
display: block;
|
||||
.overview div img {
|
||||
max-height: 100%;
|
||||
margin-left: 25%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
.overview span {
|
||||
width: auto;
|
||||
margin-right: 20%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.overview span video {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.overview span table {
|
||||
width: 50%;
|
||||
margin-right: 25%;
|
||||
}
|
||||
|
||||
.overview span td {
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
.overview span img {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.overview-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
flex: 10%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
flex: 90%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
.stats td {
|
||||
@@ -221,11 +211,6 @@ button:hover {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stats button:hover {
|
||||
color: blue;
|
||||
}
|
||||
@@ -235,10 +220,6 @@ button:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.history table,.history img {
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
@@ -334,14 +315,6 @@ button:hover {
|
||||
width:50%
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.full {
|
||||
width:100%;
|
||||
}
|
||||
@@ -365,23 +338,16 @@ button:hover {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
#body::-webkit-scrollbar {
|
||||
# display:none
|
||||
#}
|
||||
|
||||
@media screen and (max-width: 1290px) {
|
||||
.overview img {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
margin-left: 10%;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.column1,.column2,.column3,.column4 {
|
||||
height: 90%
|
||||
}
|
||||
.left {
|
||||
display: none;
|
||||
.overview {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
@@ -406,8 +372,11 @@ body::-webkit-scrollbar {
|
||||
padding: 12px;
|
||||
background-color: rgb(219, 255, 235);
|
||||
}
|
||||
.topnav {
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.topnav button {display: none;}
|
||||
.topnav button {width: 50%;}
|
||||
.topnav button.icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -416,23 +385,6 @@ body::-webkit-scrollbar {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.topnav form {
|
||||
width: 100%;
|
||||
}
|
||||
.overview span {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.overview span img,.overview span table,.overview img {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.overview img {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
margin-left: 5%;
|
||||
margin-right: auto;
|
||||
}
|
||||
.banner {
|
||||
height: auto;
|
||||
}
|
||||
@@ -452,12 +404,19 @@ body::-webkit-scrollbar {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.left {
|
||||
.overview span {
|
||||
display: none;
|
||||
}
|
||||
.right-column {
|
||||
flex: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
.column1, .column3 {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -495,8 +454,9 @@ body::-webkit-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topnav button {
|
||||
font-size: large;
|
||||
@@ -515,19 +475,8 @@ body::-webkit-scrollbar {
|
||||
.topnav.responsive button {
|
||||
display: block;
|
||||
}
|
||||
.overview span{
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.overview span img,.overview span table,.overview img {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.overview img {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
margin-left: 5%;
|
||||
margin-right: auto;
|
||||
.overview .column .left {
|
||||
display: none;
|
||||
}
|
||||
.version {display:none;}
|
||||
.left {
|
||||
|
||||
+50
-49
@@ -70,38 +70,40 @@ $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
|
||||
<title>Overview</title>
|
||||
</head>
|
||||
<div class="overview">
|
||||
<div class="column left">
|
||||
<table style="height: 80%;"><tr><td style="background-color: transparent; border:none;vertical-align: middle;">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td><?php echo $totalcount['COUNT(*)'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Today</th>
|
||||
<form action="" method="POST">
|
||||
<td><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $todaycount['COUNT(*)'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Last Hour</th>
|
||||
<td><?php echo $hourcount['COUNT(*)'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Species Detected Today</th>
|
||||
<form action="" method="POST">
|
||||
<td><button type="submit" name="view" value="Species Stats"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total Number of Species</th>
|
||||
<form action="" method="POST">
|
||||
<td><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr></table>
|
||||
<div class="overview-stats">
|
||||
<span>
|
||||
<div class="left-column">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td><?php echo $totalcount['COUNT(*)'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Today</th>
|
||||
<form action="" method="POST">
|
||||
<td><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $todaycount['COUNT(*)'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Last Hour</th>
|
||||
<td><?php echo $hourcount['COUNT(*)'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Species Detected Today</th>
|
||||
<form action="" method="POST">
|
||||
<td><button type="submit" name="view" value="Species Stats"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total Number of Species</th>
|
||||
<form action="" method="POST">
|
||||
<td><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</span>
|
||||
<div class="right-column">
|
||||
<?php
|
||||
if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
|
||||
echo "<img src=\"/Charts/$chart?nocache=time()\">";
|
||||
@@ -109,21 +111,20 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
|
||||
echo "<p>No Detections For Today</p>";
|
||||
}
|
||||
?>
|
||||
<span>
|
||||
<table>
|
||||
<h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
|
||||
<tr>
|
||||
<td>
|
||||
<form action="" method="POST">
|
||||
<input type="hidden" name="view" value="Species Stats">
|
||||
<button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
|
||||
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
|
||||
<br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
|
||||
<video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
|
||||
</form>
|
||||
</tr>
|
||||
</table>
|
||||
<h3 class="centered">Currently Analyzing</h3>
|
||||
<img class="centered" src='/spectrogram.png?nocache=<?php echo time();?>' >
|
||||
</span>
|
||||
</html>
|
||||
<table>
|
||||
<h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
|
||||
<tr>
|
||||
<td>
|
||||
<form action="" method="POST">
|
||||
<input type="hidden" name="view" value="Species Stats">
|
||||
<button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
|
||||
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
|
||||
<br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
|
||||
<video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
|
||||
</form>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Currently Analyzing</h3>
|
||||
<img src='/spectrogram.png?nocache=<?php echo time();?>' >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user