forked from rebillar/site-accueil-insa
Improved stats page
This commit is contained in:
Keplyx
parent
7182b57c19
commit
ce0164f3ab
3 changed files with 176 additions and 64 deletions
|
|
@ -1,19 +1,65 @@
|
||||||
#stats-container {
|
#stats-container {
|
||||||
display: inline-flex;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-table {
|
.stats-table {
|
||||||
width: 48%;
|
width: 100%;
|
||||||
border: none;
|
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;
|
border-radius: 10px 10px 0 0;
|
||||||
|
font-size: 20px;
|
||||||
font-family: 'Russo One', sans-serif;
|
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 {
|
.stats-table .stat-log, .stats-table .stat-points {
|
||||||
color: #1c1c1c;
|
color: #1c1c1c;
|
||||||
|
|
@ -21,32 +67,23 @@
|
||||||
font-weight: bold;
|
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;
|
background-color: #639fad;
|
||||||
border-color: #639fad;
|
border-color: #639fad;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats-usa td {
|
.stats-usa td {
|
||||||
border-color: #639fad;
|
border-bottom: 1px solid #284550;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats-urss th {
|
.stats-urss .stat-log, .stats-urss .stat-points {
|
||||||
background-color: #d72229;
|
|
||||||
border-color: #d72229;
|
|
||||||
}
|
|
||||||
|
|
||||||
#stats-urss .stat-log, #stats-urss .stat-points {
|
|
||||||
background-color: #d75556;
|
background-color: #d75556;
|
||||||
border-color: #d75556;
|
border-color: #d75556;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stats-urss td {
|
.stats-urss td {
|
||||||
border-color: #d75556;
|
border-bottom: 1px solid #620f12;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-log {
|
.stat-log {
|
||||||
|
|
@ -58,50 +95,41 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#positive{
|
#positive{
|
||||||
color: #e9b600;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#negative{
|
#negative{
|
||||||
color: #cea380;
|
color: #adadad;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
|
||||||
#stats-container {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button-container {
|
.edit-button-container {
|
||||||
border: none;
|
border: none;
|
||||||
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button {
|
.edit-button {
|
||||||
width: auto;
|
width: auto;
|
||||||
background: #fafafa;
|
color: #fafafa;
|
||||||
color: #000;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-shadow: 0 0 5px #000000;
|
box-shadow: 0 0 5px #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button:hover {
|
.edit-button#button-urss {
|
||||||
color: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
#button-urss:hover {
|
|
||||||
background: #ee293d;
|
background: #ee293d;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-usa:hover {
|
.edit-button#button-usa {
|
||||||
background: #1a5dad;
|
background: #1a5dad;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit-button:hover, .edit-button#button-urss:hover, .edit-button#button-usa:hover {
|
||||||
|
color: #000;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.stats-button-container {
|
.stats-button-container {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
@ -126,7 +154,7 @@
|
||||||
|
|
||||||
input {
|
input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #1a1a1a;
|
background: #484848;
|
||||||
color: #fafafa;
|
color: #fafafa;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -188,3 +216,26 @@ input {
|
||||||
.save-score:hover {
|
.save-score:hover {
|
||||||
background: #2ce20b;
|
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;
|
||||||
|
}
|
||||||
|
|
@ -64,7 +64,7 @@ if (!isset($team))
|
||||||
<p>
|
<p>
|
||||||
<?= $description ?>
|
<?= $description ?>
|
||||||
</p>
|
</p>
|
||||||
<table class="stats-table edit-stats" id="stats-<?= $team ?>">
|
<table class="stats-table edit-stats stats-<?= $team ?>">
|
||||||
<tr>
|
<tr>
|
||||||
<th colspan="3"><?= strtoupper($team) ?></th>
|
<th colspan="3"><?= strtoupper($team) ?></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
93
stats.php
93
stats.php
|
|
@ -24,49 +24,110 @@ function get_stats($team)
|
||||||
}
|
}
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<h1>Stats</h1>
|
<h1>Stats</h1>
|
||||||
<p>
|
<p>
|
||||||
Les stats de la semaine.
|
Les stats de la semaine.
|
||||||
<br>
|
<br>
|
||||||
Remporte le plus de points possible pour faire gagner ton équipe, mais attention à ne pas lui en faire perdre !
|
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>
|
</p>
|
||||||
|
|
||||||
<div id="stats-container">
|
<div id="stats-container">
|
||||||
<table class="stats-table" id="stats-usa">
|
|
||||||
<tr>
|
<div id="oldest-score-usa"></div>
|
||||||
<td colspan="2" class="edit-button-container">
|
<div class="edit-button-container">
|
||||||
<a href="edit_score/usa/edit.php" class="edit-button" id="button-usa">
|
<a href="edit_score/usa/edit.php" class="edit-button" id="button-usa">
|
||||||
Éditer les scores
|
Éditer les scores
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div class="stats-toggle stats-usa" onclick="toggleTable(this)" id="toggle-usa">
|
||||||
<tr>
|
<i class="fas fa-arrow-down"></i> USA <i class="fas fa-arrow-down"></i>
|
||||||
<th colspan="2">USA</th>
|
</div>
|
||||||
</tr>
|
<table class="stats-table stats-usa" id="usa-table" style="display: none">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="stat-log">Log</td>
|
<td class="stat-log">Log</td>
|
||||||
<td class="stat-points">Points</td>
|
<td class="stat-points">Points</td>
|
||||||
</tr>
|
</tr>
|
||||||
<?php get_stats('usa') ?>
|
<?php get_stats('usa') ?>
|
||||||
</table>
|
</table>
|
||||||
<table class="stats-table" id="stats-urss">
|
<div id="latest-score-usa"></div>
|
||||||
<tr>
|
|
||||||
<td colspan="2" class="edit-button-container">
|
<div id="oldest-score-urss"></div>
|
||||||
|
<div class="edit-button-container">
|
||||||
<a href="edit_score/urss/edit.php" class="edit-button" id="button-urss">
|
<a href="edit_score/urss/edit.php" class="edit-button" id="button-urss">
|
||||||
Éditer les scores
|
Éditer les scores
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div class="stats-toggle" onclick="toggleTable(this)" id="toggle-urss">
|
||||||
<tr>
|
<i class="fas fa-arrow-down"></i> URSS <i class="fas fa-arrow-down"></i>
|
||||||
<th colspan="2">URSS</th>
|
</div>
|
||||||
</tr>
|
<table class="stats-table stats-urss" id="urss-table" style="display: none">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="stat-log">Log</td>
|
<td class="stat-log">Log</td>
|
||||||
<td class="stat-points">Points</td>
|
<td class="stat-points">Points</td>
|
||||||
</tr>
|
</tr>
|
||||||
<?php get_stats('urss') ?>
|
<?php get_stats('urss') ?>
|
||||||
</table>
|
</table>
|
||||||
|
<div id="latest-score-urss"></div>
|
||||||
</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
|
<?php
|
||||||
$pageContent = ob_get_clean(); // Store html content in variable
|
$pageContent = ob_get_clean(); // Store html content in variable
|
||||||
$pageTitle = "Stats";
|
$pageTitle = "Stats";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue