added some stuff to make it look better !

This commit is contained in:
2018-12-03 21:09:49 -05:00
parent 88c03dee28
commit 60b403f791
3 changed files with 51 additions and 10 deletions

View File

@@ -14,7 +14,9 @@ $details = isset($_GET['details']) ? $_GET['details'] : "";
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.80, maximum-scale=3, minimum-scale=0.80">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="updatethumbnail.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

View File

@@ -12,10 +12,29 @@ $details = isset($_GET['details']) ? $_GET['details'] : "";
?>
<strong>Last Updated : </strong> <?php echo date(DATE_RFC2822) ?><br/><br/>
<div class="center500 padding-bottom-10">
<strong>Last refresh : </strong> <?php echo date(DATE_RFC2822) ?>
</div>
Order by (<?php echo $orderby; ?>) : Total Time <a href="<?php echo $rootpage ?>?orderby=totaltime_asc">ASC</a> <a href="<?php echo $rootpage ?>?orderby=totaltime_desc">DESC</a> - First Played <a href="<?php echo $rootpage ?>?orderby=firstplayed_asc">ASC</a> <a href="<?php echo $rootpage ?>?orderby=firstplayed_desc">DESC</a> - Last Played <a href="<?php echo $rootpage ?>?orderby=lastplayed_asc">ASC</a> <a href="<?php echo $rootpage ?>?orderby=lastplayed_desc">DESC</a>
<br/><br/>
<div class="center500 padding-bottom-3">
<div class="orderby">
<a href="<?php echo $rootpage ?>?orderby=totaltime_asc"><i class="material-icons md-arrow <?php if ($orderby == "totaltime_asc") { echo "md-active"; } ?> vertical-align-middle padding-bottom-3">arrow_drop_up</i></a>
Total Time
<a href="<?php echo $rootpage ?>?orderby=totaltime_desc"><i class="material-icons md-arrow <?php if ($orderby == "totaltime_desc") { echo "md-active"; } ?> vertical-align-middle padding-bottom-3">arrow_drop_down</i></a>
</div>
<div class="orderby">
<a href="<?php echo $rootpage ?>?orderby=firstplayed_asc"><i class="material-icons md-arrow <?php if ($orderby == "firstplayed_asc") { echo "md-active"; } ?> vertical-align-middle padding-bottom-3">arrow_drop_up</i></a>
First Played
<a href="<?php echo $rootpage ?>?orderby=firstplayed_desc"><i class="material-icons md-arrow <?php if ($orderby == "firstplayed_desc") { echo "md-active"; } ?> vertical-align-middle padding-bottom-3">arrow_drop_down</i></a>
</div>
<div class="orderby">
<a href="<?php echo $rootpage ?>?orderby=lastplayed_asc"><i class="material-icons md-arrow <?php if ($orderby == "lastplayed_asc") { echo "md-active"; } ?> vertical-align-middle padding-bottom-3">arrow_drop_up</i></a>
Last Played
<a href="<?php echo $rootpage ?>?orderby=lastplayed_desc"><i class="material-icons md-arrow vertical-align-middle padding-bottom-3 <?php if ($orderby == "lastplayed_desc") { echo "md-active"; } ?>">arrow_drop_down</i></a>
</div>
</div>
<?php
if ($result->num_rows > 0) {

View File

@@ -23,27 +23,47 @@ body{
}
.game{
width: 600px;
width: 500px;
background: #00b0bc;
border: 1px solid #027c84;
border-radius: 2px;
margin-bottom: 10px;
margin-top: 10px;
display: block;
overflow: auto;
}
#message {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#message {
margin-bottom: 5px;
}
.center500 {
width: 500px;
text-align: center;
}
.orderby {
align-content: center;
display: inline-block;
background-color: #B7B7B7;
border: 1px solid #333333;
border-radius: 2px;
}
.material-icons.md-arrow {
color: #848484;
}
.material-icons.md-arrow.md-active { color: #027c84; }
.vertical-align-middle {
vertical-align: middle;
}
.padding-bottom-3 {
padding-bottom: 3px;
}
.padding-bottom-10 {
padding-bottom: 10px;
}