From ce0164f3ab726c168e68da1be0e6c3a1db1200f8 Mon Sep 17 00:00:00 2001
From: Keplyx <keplyx@gmail.com>
Date: Mon, 27 Aug 2018 08:39:38 +0200
Subject: [PATCH] Improved stats page

---
 assets/css/stats.css         | 133 ++++++++++++++++++++++++-----------
 edit_score/edit_template.php |   2 +-
 stats.php                    | 105 +++++++++++++++++++++------
 3 files changed, 176 insertions(+), 64 deletions(-)

diff --git a/assets/css/stats.css b/assets/css/stats.css
index 8ff3d49..9bef0ca 100755
--- a/assets/css/stats.css
+++ b/assets/css/stats.css
@@ -1,19 +1,65 @@
 #stats-container {
-    display: inline-flex;
+    display: block;
     width: 100%;
 }
 
 .stats-table {
-    width: 48%;
+    width: 100%;
     border: none;
-    margin: 1% 1% 1% 1%;
 }
 
-.stats-table th{
+
+.stats-table tr:nth-child(even) {
+    background-color: #2d2d2d;
+}
+
+.stats-table.stats-usa tr:hover {
+    background-color: #284550;
+}
+
+.stats-table.stats-urss tr:hover {
+    background-color: #620f12;
+}
+
+.stats-toggle, .edit-stats th {
     border-radius: 10px 10px 0 0;
+    font-size: 20px;
     font-family: 'Russo One', sans-serif;
+    color: #fff;
+    cursor: pointer;
 }
 
+.stats-toggle#toggle-usa, .edit-stats.stats-usa th {
+    background-color: #1a5dad;
+    border-color: #1a5dad;
+    -webkit-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+}
+
+.stats-toggle#toggle-usa:hover {
+    background-color: #1f6fce;
+    border-color: #1f6fce;
+    box-shadow: 0 0 10px #1f6fce;
+}
+
+.stats-toggle#toggle-urss, .edit-stats.stats-urss th {
+    background-color: #d72229;
+    border-color: #d72229;
+    -webkit-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+}
+
+.stats-toggle#toggle-urss:hover {
+    background-color: #ee262d;
+    border-color: #ee262d;
+    box-shadow: 0 0 10px #ee262d;
+}
 
 .stats-table .stat-log, .stats-table .stat-points {
     color: #1c1c1c;
@@ -21,32 +67,23 @@
     font-weight: bold;
 }
 
-#stats-usa th {
-    background-color: #1a5dad;
-    border-color: #1a5dad;
-}
 
-#stats-usa .stat-log, #stats-usa .stat-points {
+.stats-usa .stat-log, .stats-usa .stat-points {
     background-color: #639fad;
     border-color: #639fad;
 }
 
-#stats-usa td {
-    border-color: #639fad;
+.stats-usa td {
+    border-bottom: 1px solid #284550;
 }
 
-#stats-urss th {
-    background-color: #d72229;
-    border-color: #d72229;
-}
-
-#stats-urss .stat-log, #stats-urss .stat-points {
+.stats-urss .stat-log, .stats-urss .stat-points {
     background-color: #d75556;
     border-color: #d75556;
 }
 
-#stats-urss td {
-    border-color: #d75556;
+.stats-urss td {
+    border-bottom: 1px solid #620f12;
 }
 
 .stat-log {
@@ -58,50 +95,41 @@
 }
 
 #positive{
-    color: #e9b600;
+    color: #ffffff;
     font-weight: bold;
 }
 
 #negative{
-    color: #cea380;
-}
-
-@media screen and (max-width: 480px) {
-    #stats-container {
-        display: block;
-        width: 100%;
-    }
-
-    .stats-table {
-        width: 100%;
-    }
+    color: #adadad;
 }
 
 .edit-button-container {
     border: none;
+    margin: 10px;
 }
 
 .edit-button {
     width: auto;
-    background: #fafafa;
-    color: #000;
+    color: #fafafa;
     border-radius: 5px;
     padding: 5px;
     box-shadow: 0 0 5px #000000;
 }
 
-.edit-button:hover {
-    color: #fafafa;
-}
-
-#button-urss:hover {
+.edit-button#button-urss {
     background: #ee293d;
 }
 
-#button-usa:hover {
+.edit-button#button-usa {
     background: #1a5dad;
 }
 
+.edit-button:hover, .edit-button#button-urss:hover, .edit-button#button-usa:hover {
+    color: #000;
+    background: #fafafa;
+}
+
+
 .stats-button-container {
     display: inline-flex;
 }
@@ -126,7 +154,7 @@
 
 input {
     text-align: center;
-    background: #1a1a1a;
+    background: #484848;
     color: #fafafa;
     width: 100%;
     border: none;
@@ -187,4 +215,27 @@ input {
 
 .save-score:hover {
     background: #2ce20b;
+}
+
+.score-nav{
+    width: auto;
+    color: #000;
+    border-radius: 5px;
+    padding: 5px;
+    box-shadow: 0 0 5px #000000;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+}
+
+.score-nav div {
+    padding: 0px 10px 0 10px;
+}
+
+#latest-score {
+    background: #fa9500;
+}
+
+#oldest-score {
+    background: #fafa00;
 }
\ No newline at end of file
diff --git a/edit_score/edit_template.php b/edit_score/edit_template.php
index 2114095..23a1dbf 100755
--- a/edit_score/edit_template.php
+++ b/edit_score/edit_template.php
@@ -64,7 +64,7 @@ if (!isset($team))
             <p>
                 <?= $description ?>
             </p>
-            <table class="stats-table edit-stats" id="stats-<?= $team ?>">
+            <table class="stats-table edit-stats stats-<?= $team ?>">
                 <tr>
                     <th colspan="3"><?= strtoupper($team) ?></th>
                 </tr>
diff --git a/stats.php b/stats.php
index 48fbfbb..f2ea84c 100755
--- a/stats.php
+++ b/stats.php
@@ -24,49 +24,110 @@ function get_stats($team)
 }
 
 ?>
+
     <h1>Stats</h1>
     <p>
         Les stats de la semaine.
         <br>
         Remporte le plus de points possible pour faire gagner ton équipe, mais attention à ne pas lui en faire perdre !
+        <br><br>
+        <strong>Clique sur une équipe pour voir le détail de son score</strong>
     </p>
 
     <div id="stats-container">
-        <table class="stats-table" id="stats-usa">
-            <tr>
-                <td colspan="2" class="edit-button-container">
-                    <a href="edit_score/usa/edit.php" class="edit-button" id="button-usa">
-                        Éditer les scores
-                    </a>
-                </td>
-            </tr>
-            <tr>
-                <th colspan="2">USA</th>
-            </tr>
+
+        <div id="oldest-score-usa"></div>
+        <div class="edit-button-container">
+            <a href="edit_score/usa/edit.php" class="edit-button" id="button-usa">
+                Éditer les scores
+            </a>
+        </div>
+        <div class="stats-toggle stats-usa" onclick="toggleTable(this)" id="toggle-usa">
+            <i class="fas fa-arrow-down"></i> USA <i class="fas fa-arrow-down"></i>
+        </div>
+        <table class="stats-table stats-usa" id="usa-table" style="display: none">
             <tr>
                 <td class="stat-log">Log</td>
                 <td class="stat-points">Points</td>
             </tr>
             <?php get_stats('usa') ?>
         </table>
-        <table class="stats-table" id="stats-urss">
-            <tr>
-                <td colspan="2" class="edit-button-container">
-                    <a href="edit_score/urss/edit.php" class="edit-button" id="button-urss">
-                        Éditer les scores
-                    </a>
-                </td>
-            </tr>
-            <tr>
-                <th colspan="2">URSS</th>
-            </tr>
+        <div id="latest-score-usa"></div>
+
+        <div id="oldest-score-urss"></div>
+        <div class="edit-button-container">
+            <a href="edit_score/urss/edit.php" class="edit-button" id="button-urss">
+                Éditer les scores
+            </a>
+        </div>
+        <div class="stats-toggle" onclick="toggleTable(this)" id="toggle-urss">
+            <i class="fas fa-arrow-down"></i> URSS <i class="fas fa-arrow-down"></i>
+        </div>
+        <table class="stats-table stats-urss" id="urss-table" style="display: none">
             <tr>
                 <td class="stat-log">Log</td>
                 <td class="stat-points">Points</td>
             </tr>
             <?php get_stats('urss') ?>
         </table>
+        <div id="latest-score-urss"></div>
     </div>
+    <script>
+        function scrolltoOld(team) {
+            if (team === 'usa') {
+                $('html, body').animate({
+                    scrollTop: $("#oldest-score-usa").offset().top
+                }, 300);
+            }
+            else {
+                $('html, body').animate({
+                    scrollTop: $("#oldest-score-urss").offset().top
+                }, 300);
+            }
+        }
+
+        function scrolltoNew(team) {
+            if (team === 'usa') {
+                $('html, body').animate({
+                    scrollTop: ($("#latest-score-usa").offset().top - window.innerHeight)
+                }, 300);
+            }
+            else {
+                $('html, body').animate({
+                    scrollTop: ($("#latest-score-urss").offset().top - window.innerHeight)
+                }, 300);
+            }
+        }
+
+        function toggleTable(elem) {
+            if (elem.id === 'toggle-usa') {
+                if ($("#usa-table").css("display") === "none") {
+                    $("#usa-table").show(300);
+                    elem.innerHTML = "<i class=\"fas fa-arrow-up\"></i> USA <i class=\"fas fa-arrow-up\"></i>";
+                    // scrolltoNew('usa');
+                }
+                else {
+                    $("#usa-table").hide(300);
+                    // scrolltoOld('usa');
+                    elem.innerHTML = "<i class=\"fas fa-arrow-down\"></i> USA <i class=\"fas fa-arrow-down\"></i>";
+                }
+            }
+            else {
+                if ($("#urss-table").css("display") === "none") {
+                    $("#urss-table").show(300);
+                    elem.innerHTML = "<i class=\"fas fa-arrow-up\"></i> URSS <i class=\"fas fa-arrow-up\"></i>";
+                    // scrolltoNew('urss');
+                }
+                else {
+                    $("#urss-table").hide(300);
+                    // scrolltoOld('urss');
+                    elem.innerHTML = "<i class=\"fas fa-arrow-down\"></i> URSS <i class=\"fas fa-arrow-down\"></i>";
+                }
+            }
+
+        }
+
+    </script>
 <?php
 $pageContent = ob_get_clean(); // Store html content in variable
 $pageTitle = "Stats";