centered history

2022-03-01 11:45:13 -05:00
parent 3b704932d8
commit 500eade8ce
2 changed files with 30 additions and 7 deletions
@@ -21,6 +21,19 @@
  margin-right: auto;
 }

+.banner img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+}
+
+.banner a {
+  text-decoration: none;
+  color: black;
+  font-size: x-large;
+}
+
 .topbar {
  display: block;
  width: auto;
@@ -57,12 +70,14 @@
 }

 .play table {
+  display: block;
  width:50%;
  margin-right: auto;
  margin-left: auto;
 }

 .overview td {
+  vertical-align:middle;
  width:20%;
 }

@@ -71,7 +86,17 @@
 }

 .stats table {
-  width: 100%;
+  width: 75%;
+}
+
+.stats td {
+  vertical-align: middle;
+}
+
+.history table,.history img {
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
 }

 a {
@@ -98,7 +123,6 @@ table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
-/*  border: 1px solid black;*/
 }

 td {
@@ -179,7 +203,7 @@ body::-webkit-scrollbar {
 }

@media screen and (max-width: 600px) {
-  .play table,.overview table {
+  .play table,.overview table,.stats table {
    width: 100%;
  }
  .topnav button { 
@@ -196,7 +220,7 @@ body::-webkit-scrollbar {
 }

@media screen and (max-width: 600px) {
-  .play table,.overview table {
+  .play table,.overview table,.stats table {
    width: 100%;
  }
  .topnav button {
@@ -26,19 +26,17 @@ $totalcount = $result1->fetchArray(SQLITE3_ASSOC);
 </style>
 </head>
 <body>
+<div class="history centered">
 <form action="" method="POST">
  <input type="date" name="date" value="<?php echo $theDate;?>">
  <button type="submit" name="view" value="Daily Charts">Submit Date</button>
 </form>
-<div>
 		<table>
 			<tr>
 				<th>Total Detections For The Day</th>
 				<td><?php echo $totalcount['COUNT(*)'];?></td>
 			</tr>
 		</table>
-</div>
-
 <?php
 if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
  echo "<img src=\"/Charts/$chart?nocache=time()\" >";
@@ -51,4 +49,5 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart2)) {
 } else {
  echo "<p>No Charts For $theDate</p>";
 }?>
+</div>
 </html>