forked from vergnet/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 {
|
||||
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;
|
||||
|
|
@ -188,3 +216,26 @@ 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
105
stats.php
105
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";
|
||||
|
|
|
|||
Loading…
Reference in a new issue