From 60b403f7911c1a317e7374e66a0bb71c4de7e5f9 Mon Sep 17 00:00:00 2001
From: Sebastien Plante <splante@quebecit.net>
Date: Mon, 3 Dec 2018 21:09:49 -0500
Subject: [PATCH] added some stuff to make it look better !

---
 index.php |  2 ++
 page.php  | 25 ++++++++++++++++++++++---
 style.css | 34 +++++++++++++++++++++++++++-------
 3 files changed, 51 insertions(+), 10 deletions(-)
diff --git a/index.php b/index.php
index 72f9ce7..373234c 100644
--- a/index.php
+++ b/index.php
@@ -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">
diff --git a/page.php b/page.php
index 5599fb6..1d73c31 100644
--- a/page.php
+++ b/page.php
@@ -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) {
diff --git a/style.css b/style.css
index 849b9d2..1c20de9 100644
--- a/style.css
+++ b/style.css
@@ -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%;
-
+    margin-bottom: 5px;
 }
 
-#message {
+.center500 {
+    width: 500px;
+    text-align: center;
+}
 
-    margin-bottom: 5px;
+.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;
 }
\ No newline at end of file
