Commit 1467984d authored by Guus Hoekman's avatar Guus Hoekman

fix italy relegations, better colours for colour blind people, imroved way of...

fix italy relegations, better colours for colour blind people, imroved way of colouring qualifications
parent b9aefbc2
Pipeline #85720306 passed with stage
in 1 minute and 34 seconds
......@@ -12,13 +12,11 @@
</a>
</div>
<div class="column attribution">
<i class="far fa-fw fa-database"></i> Data provided by the <a href="https://www.football-data.org">football-data.org API</a> and <a href="https://fbref.com/en/">FBref</a><br>
<i class="far fa-fw fa-database"></i> Data provided by the <a href="https://www.football-data.org">football-data.org API</a>, <a href="https://en.wikipedia.org/">Wikipedia</a>, and <a href="https://fbref.com/en/">FBref</a><br>
<i class="fab fa-fw fa-css3"></i> Made with <a href="https://bulma.io">Bulma</a><br>
<i class="far fa-fw fa-flag"></i> Flags from <a href="https://www.flaticon.com/packs/rectangular-country-simple-flags">Flaticon</a><br>
<i class="fab fa-fw fa-gitlab"></i> Source on <a href="https://gitlab.com/guushoekman/cann-tables">Gitlab</a>
</div>
<div class="column">
</div>
</div>
</div>
</footer>
\ No newline at end of file
......@@ -12,8 +12,8 @@
{% include footer.html %}
<!-- navbar -->
<script>
// navbar
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
......@@ -39,6 +39,17 @@
}
});
// season dropdowns
$(".season.dropdown").click(function(event) {
event.stopPropagation();
var thisButton = $(this);
thisButton.addClass("is-active");
});
document.addEventListener('click', function(event) {
$(".dropdown").removeClass("is-active")
});
</script>
<!-- Google Analytics... sorry -->
......
---
layout: base
---
<section class="section league-seasons">
<div class="container">
<div class="tabs is-centered">
<ul>
{% for league in site.leagues %}
{% if league.code == page.code %}
<li {% if league.season == page.season %}class="is-active"{% endif %}><a href="{{ league.url }}">{{ league.season }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section>
<section class="section league-table">
<div class="container">
<div class="columns is-centered is-desktop">
<div class="column is-4-desktop">
<div class="box league-info">
<div class="has-text-centered">
<img src="/img/flags/{{ page.code }}.svg" alt="{{ page.country }} flag">
<img src="/img/logos/{{ page.code }}.svg" alt="{{ page.competition }} logo">
</div>
<table class="table is-fullwidth">
<tbody>
<tr>
<th>Country</th>
<td>{{ page.country }}</td>
</tr>
<tr>
<th>League</th>
<td>{{ page.competition }}</td>
</tr>
<tr>
<th>Season</th>
<td>{{ page.season }}</td>
</tr>
</tbody>
</table>
<div class="buttons is-centered">
<a class="button source" target="_blank" href=""><span class="icon"><i class="fab fa-wikipedia-w"></i></span><span>Source</span></a>
<a class="button" target="_blank" href="{% if page.latest and page.api != false %}https://data.canntables.com/{{ page.code }}.js{% else %}/js/{{ page.season | replace: '/', '-' }}/{{ page.code }}.js{% endif %}"><span class="icon"><i class="fas fa-database"></i></span><span>Data</span></a>
<a class="button" href="mailto:[email protected]"><span class="icon"><i class="fas fa-exclamation-circle"></i></span><span>Correct a mistake</span></a>
<div class="sticky-box">
<div class="season dropdown is-fullwidth">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="seasons">
<span><strong>{{ page.season }} season</strong></span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="seasons" role="menu">
<div class="dropdown-content">
{% for league in site.leagues %}
{% if league.code == page.code %}
<a href="{{ league.url }}" class="dropdown-item{% if league.season == page.season %} is-active{% endif %}">{{ league.season }}</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<hr>
<div class="legend has-text-centered">
<div class="team-box">
<span class="position">Pos</span><span class="name">Team name</span><span class="played">Played</span><span class="goal-difference equal">Goal dif</span>
<div class="box league-info">
<div class="has-text-centered">
<img src="/img/flags/{{ page.code }}.svg" alt="{{ page.country }} flag">
<img src="/img/logos/{{ page.code }}.svg" alt="{{ page.competition }} logo">
</div>
<table class="table is-fullwidth">
<tbody>
<tr>
<th>Country</th>
<td>{{ page.country }}</td>
</tr>
<tr>
<th>League</th>
<td>{{ page.competition }}</td>
</tr>
<tr>
<th>Season</th>
<td>{{ page.season }}</td>
</tr>
</tbody>
</table>
<div class="buttons is-centered">
<a class="button source" target="_blank" href=""><span class="icon"><i class="fas fa-database"></i></span><span>Source</span></a>
<a class="button" target="_blank" href="{% if page.latest and page.api != false %}https://data.canntables.com/{{ page.code }}.js{% else %}/js/{{ page.season | replace: '/', '-' }}/{{ page.code }}.js{% endif %}"><span class="icon"><i class="fas fa-table"></i></span><span>Data</span></a>
<a class="button" href="mailto:[email protected]"><span class="icon"><i class="fas fa-exclamation-circle"></i></span><span>Correct a mistake</span></a>
</div>
<div class="qualifications">
<span class="legend-entry cl"><span class="square"></span>Champions League</span>
<span class="legend-entry el"><span class="square"></span>Europa League</span>
<span class="legend-entry el-playoffs hidden"><span class="square"></span>Europa League playoffs</span>
<span class="legend-entry relegation-playoffs hidden"><span class="square"></span>Relegation playoffs</span>
<span class="legend-entry relegation"><span class="square"></span>Relegation</span>
<hr>
<div class="legend has-text-centered">
<div class="team-box">
<span class="position">Pos</span><span class="name">Team name</span><span class="played">Played</span><span class="goal-difference equal">Goal dif</span>
</div>
<div class="qualifications">
<span class="legend-entry cl"><span class="square"></span>Champions League</span>
<span class="legend-entry el"><span class="square"></span>Europa League</span>
<span class="legend-entry el-playoffs hidden"><span class="square"></span>Europa League playoffs</span>
<span class="legend-entry relegation-playoffs hidden"><span class="square"></span>Relegation playoffs</span>
<span class="legend-entry relegation"><span class="square"></span>Relegation</span>
</div>
</div>
</div>
</div>
......
---
layout: base
---
<section class="section">
<div class="container">
<div class="tabs is-centered">
<ul>
{% for season in site.seasons %}
<li {% if season.season == page.season %}class="is-active"{% endif %}><a href="{{ season.url }}">{{ season.season }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</section>
<section class="section season-table single-season">
<div class="container">
<div class="columns is-gapless is-mobile is-multiline">
<div class="column information is-12-mobile is-4-tablet is-3-widescreen">
<h1 class="title is-size-5-touch is-size-4-desktop">{{ page.season }} season</h1>
<div class="legend is-hidden-mobile">
<span class="team-circle" style="background-color: #4daf4a"></span>Champions League + qualifiers<br>
<span class="team-circle" style="background-color: #377eb8"></span>Europa League + qualifiers<br>
<span class="el-playoffs hidden"><span class="team-circle" style="background-color: #984ea3"></span>Europa League playoffs (local)<br></span>
<span class="relegation-playoffs hidden"><span class="team-circle" style="background-color: #ff7f00"></span>Relegation playoffs<br></span>
<span class="team-circle" style="background-color: #e41a1c"></span>Relegation
</div>
<hr>
<div class="toggle-grid">
<input id="toggleGrid" type="checkbox" name="toggleGrid" class="switch is-small is-info is-rounded" onclick="showGrid()">
<label for="toggleGrid">Toggle grid</label>
</div>
{% if page.latest == true %}
<div>
Last updated: <span class="last-update"></span>
<div class="sticky-box">
<div class="season dropdown is-fullwidth">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="seasons">
<span><strong>{{ page.season }} season</strong></span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="seasons" role="menu">
<div class="dropdown-content">
{% for season in site.seasons %}
<a href="{{ season.url }}" class="dropdown-item{% if season.season == page.season %} is-active{% endif %}">{{ season.season }}</a>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<div class="legend is-hidden-mobile">
<span class="team-circle" style="background-color: #4daf4a"></span>Champions League + qualifiers<br>
<span class="team-circle" style="background-color: #377eb8"></span>Europa League + qualifiers<br>
<span class="el-playoffs hidden"><span class="team-circle" style="background-color: #91b8d8"></span>Europa League playoffs (local)<br></span>
<span class="relegation-playoffs hidden"><span class="team-circle" style="background-color: #ff7f00"></span>Relegation playoffs<br></span>
<span class="team-circle" style="background-color: #e41a1c"></span>Relegation
</div>
<hr>
<div class="toggle-grid">
<input id="toggleGrid" type="checkbox" name="toggleGrid" class="switch is-small is-info is-rounded" onclick="showGrid()">
<label for="toggleGrid">Toggle grid</label>
</div>
{% if page.latest == true %}
<div>
Last updated: <span class="last-update"></span>
</div>
{% endif %}
</div>
</div>
<div class="column league-tables">
<div class="tabs is-centered">
......
......@@ -33,10 +33,30 @@
}
.league-table {
padding-top: 0;
.league-info {
.sticky-box {
position: sticky;
top: 1rem;
top: calc(1rem - 41px);
}
.dropdown.is-fullwidth {
margin-top: 41px;
margin-bottom: 1rem;
width: 100%;
.dropdown-trigger, .button {
width: 100%;
justify-content: left;
.icon {
margin-left: auto;
}
}
.dropdown-menu {
width: 100%;
a.dropdown-item {
width: calc(33.3% - 3px);
display: inline-block;
}
}
}
.league-info {
width: 100%;
img {
height: 80px;
......@@ -145,10 +165,15 @@
}
.season-table {
.sticky-box {
position: sticky;
top: calc(1rem - 41px);
}
.table {
thead {
td, th {
text-align: center;
height: 45px;
}
img {
max-width: 30px;
......@@ -174,6 +199,25 @@
}
}
}
.dropdown.is-fullwidth {
margin-top: 41px;
margin-bottom: 1rem;
width: 100%;
.dropdown-trigger, .button {
width: 100%;
justify-content: left;
.icon {
margin-left: auto;
}
}
.dropdown-menu {
width: 100%;
a.dropdown-item {
width: calc(33.3% - 3px);
display: inline-block;
}
}
}
.column.information {
padding-right: 1rem !important;
.legend {
......@@ -249,6 +293,7 @@
background-color: #666;
display: inline-block;
margin: 0 2px 5px 2px;
cursor: pointer;
}
/* for mobile */
@media (max-width: 768px) {
......@@ -274,9 +319,6 @@
display: none;
}
}
&.single-season {
padding-top: 0;
}
}
.leagues-page {
......
......@@ -45,7 +45,7 @@ title: Home
<div class="legend is-hidden-mobile">
<span class="team-circle" style="background-color: #4daf4a"></span>Champions League + qualifiers<br>
<span class="team-circle" style="background-color: #377eb8"></span>Europa League + qualifiers<br>
<span class="team-circle" style="background-color: #984ea3"></span>Europa League playoffs (local)<br>
<span class="team-circle" style="background-color: #91b8d8"></span>Europa League playoffs (local)<br>
<span class="team-circle" style="background-color: #ff7f00"></span>Relegation playoffs<br>
<span class="team-circle" style="background-color: #e41a1c"></span>Relegation
</div>
......
......@@ -5,7 +5,7 @@ var it = {
"teams": 18,
"cl": [1, 2, 3, 4],
"el": [5, 6, 9],
"relegation": [14, 15, 16, 17, 18],
"relegation": [15, 16, 17, 18],
"standings": [
{
"position": 1,
......
......@@ -5,7 +5,7 @@ var it = {
"teams": 18,
"cl": [1, 2, 3, 4],
"el": [5, 6, 8],
"relegation": [14, 15, 16, 17, 18],
"relegation": [15, 16, 17, 18],
"standings": [
{
"position": 1,
......
......@@ -5,7 +5,7 @@ var it = {
"teams": 20,
"cl": [1, 2, 3, 4],
"el": [5, 6, 8],
"relegation": [17, 18, 19, 20],
"relegation": [18, 19, 20],
"standings": [
{
"position": 1,
......
......@@ -7,6 +7,13 @@ var it = {
"el": [5, 6, 7],
"relegation": [18, 19, 20],
"standings": [
{
"position": 20,
"name": "Juventus",
"played": 38,
"points": 91,
"difference": 47
},
{
"position": 1,
"name": "Internazionale",
......@@ -139,13 +146,6 @@ var it = {
"played": 38,
"points": 21,
"difference": -32
},
{
"position": 20,
"name": "Juventus",
"played": 38,
"points": 91,
"difference": 47
}
]
}
\ No newline at end of file
// colours
var champions_league = "#4daf4a";
var europa_league = "#377eb8";
var european_playoffs = "#984ea3";
var european_playoffs = "#91b8d8";
var relegation_playoffs = "#ff7f00";
var relegation = "#e41a1c";
\ No newline at end of file
......@@ -17,38 +17,38 @@ $.each(teams, function() {
netGoals = "equal"
};
$("#" + team.points + " .points").css("color", "black");
$("<div class='team-box'><span class='position'>" + team.position + "</span><span class='name'>" + team.name + "</span><span class='played'>" + team.played + "</span><span class='goal-difference " + netGoals + "'>" + positiveGoals + team.difference + "</span></div>").appendTo($("#" + team.points + " .teams"))
$("<div class='team-box'><span class='position' data-rank='" + team.position + "'>" + team.position + "</span><span class='name'>" + team.name + "</span><span class='played'>" + team.played + "</span><span class='goal-difference " + netGoals + "'>" + positiveGoals + team.difference + "</span></div>").appendTo($("#" + team.points + " .teams"))
});
$(league["cl"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": champions_league, "color": "#fff"});
var rank = Number(this);
$("table .team-box .position[data-rank='" + rank + "']").css({"background-color": champions_league, "color": "#fff"});
})
$(league["el"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": europa_league, "color": "#fff"});
var rank = Number(this);
$("table .team-box .position[data-rank='" + rank + "']").css({"background-color": europa_league, "color": "#fff"});
})
if ("european_play_offs" in league == true) {
$(league["european_play_offs"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": european_playoffs, "color": "#fff"});
var rank = Number(this);
$("table .team-box .position[data-rank='" + rank + "']").css({"background-color": european_playoffs, "color": "#fff"});
})
$(".qualifications .legend-entry.el-playoffs").removeClass("hidden");
}
if ("relegation_play_offs" in league == true) {
$(league["relegation_play_offs"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": relegation_playoffs, "color": "#fff"});
var rank = Number(this);
$("table .team-box .position[data-rank='" + rank + "']").css({"background-color": relegation_playoffs, "color": "#fff"});
})
$(".qualifications .legend-entry.relegation-playoffs").removeClass("hidden");
}
$(league["relegation"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": relegation, "color": "#fff"});
var rank = Number(this);
$("table .team-box .position[data-rank='" + rank + "']").css({"background-color": relegation, "color": "#fff"});
})
// add source
......
......@@ -54,38 +54,38 @@ function totalPoints() {
$.each(teams, function() {
var team = $(this)[0];
team.name = team.name.replace(/'/g, '&apos;');
$("<span class='team-circle tooltip' data-tooltip='" + team.position + ". " + team.name + " (" + team.points + " points, " + team.played + " games)'></span>").appendTo($(".total.table #" + code_string + "-" + team.points + " .teams .circle-wrap"))
$("<span class='team-circle tooltip' data-rank='" + team.position + "' data-tooltip='" + team.position + ". " + team.name + " (" + team.points + " points, " + team.played + " games)'></span>").appendTo($(".total.table #" + code_string + "-" + team.points + " .teams .circle-wrap"))
});
$(this["cl"]).each(function(){
var rank = Number(this) - 1;
$(".total.columns ." + code_string + " .team-circle").eq(rank).css("background-color", champions_league);
var rank = Number(this);
$(".total.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", champions_league);
})
$(this["el"]).each(function(){
var rank = Number(this) - 1;
$(".total.columns ." + code_string + " .team-circle").eq(rank).css("background-color", europa_league);
var rank = Number(this);
$(".total.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", europa_league);
})
if ("european_play_offs" in this !== false) {
$(this["european_play_offs"]).each(function(){
var rank = Number(this) - 1;
$(".total.columns ." + code_string + " .team-circle").eq(rank).css("background-color", european_playoffs);
var rank = Number(this);
$(".total.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", european_playoffs);
})
$(".legend .el-playoffs").removeClass("hidden");
}
if ("relegation_play_offs" in this !== false) {
$(this["relegation_play_offs"]).each(function(){
var rank = Number(this) - 1;
$(".total.columns ." + code_string + " .team-circle").eq(rank).css("background-color", relegation_playoffs);
var rank = Number(this);
$(".total.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", relegation_playoffs);
})
$(".legend .relegation-playoffs").removeClass("hidden");
}
$(this["relegation"]).each(function(){
var rank = Number(this) - 1;
$(".total.columns ." + code_string + " .team-circle").eq(rank).css("background-color", relegation);
var rank = Number(this);
$(".total.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", relegation);
})
});
......@@ -126,38 +126,38 @@ function pointsPerGame() {
var pointsPerGame = team.points / team.played;
var roundedPointsPerGame = pointsPerGame.toFixed(1) * 10;
$("<span class='team-circle tooltip' data-tooltip='" + team.position + ". " + team.name + " (" + pointsPerGame.toFixed(2) + " points per game, " + team.played + " games)'></span>").appendTo($(".per-game.table #" + code_string + "-" + roundedPointsPerGame + " .teams .circle-wrap"))
$("<span class='team-circle tooltip' data-rank='" + team.position + "' data-tooltip='" + team.position + ". " + team.name + " (" + pointsPerGame.toFixed(2) + " points per game, " + team.played + " games)'></span>").appendTo($(".per-game.table #" + code_string + "-" + roundedPointsPerGame + " .teams .circle-wrap"))
});
$(this["cl"]).each(function(){
var rank = Number(this) - 1;
$(".per-game.columns ." + code_string + " .team-circle").eq(rank).css("background-color", champions_league);
var rank = Number(this);
$(".per-game.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", champions_league);
})
$(this["el"]).each(function(){
var rank = Number(this) - 1;
$(".per-game.columns ." + code_string + " .team-circle").eq(rank).css("background-color", europa_league);
var rank = Number(this);
$(".per-game.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", europa_league);
})
if ("european_play_offs" in this !== false) {
$(this["european_play_offs"]).each(function(){
var rank = Number(this) - 1;
$("." + code_string + " .team-circle").eq(rank).css("background-color", european_playoffs);
var rank = Number(this);
$("." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", european_playoffs);
})
$(".per-game.columns .legend .el-playoffs").removeClass("hidden");
}
if ("relegation_play_offs" in this !== false) {
$(this["relegation_play_offs"]).each(function(){
var rank = Number(this) - 1;
$("." + code_string + " .team-circle").eq(rank).css("background-color", relegation_playoffs);
var rank = Number(this);
$("." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", relegation_playoffs);
})
$(".per-game.columns .legend .relegation-playoffs").removeClass("hidden");
}
$(this["relegation"]).each(function(){
var rank = Number(this) - 1;
$(".per-game.columns ." + code_string + " .team-circle").eq(rank).css("background-color", relegation);
var rank = Number(this);
$(".per-game.columns ." + code_string + " .team-circle[data-rank='" + rank + "']").css("background-color", relegation);
})
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment