Commit 5d2297a6 authored by Guus Hoekman's avatar Guus Hoekman

better single league season page

parent 9a706495
Pipeline #76178363 passed with stage
in 2 minutes and 1 second
......@@ -2,10 +2,6 @@
layout: base
---
<section class="section league-seasons">
<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>
<div class="container">
<div class="tabs is-centered">
<ul>
......@@ -21,21 +17,50 @@ layout: base
<section class="section league-table">
<div class="container">
<div class="columns is-centered">
<div class="column is-8-fullhd is-10-widescreen">
<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="columns is-centered is-desktop">
<div class="column is-4-desktop">
<div class="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>
<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 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>
<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>
</div>
<table class="table is-hoverable is-fullwidth">
</div>
<div class="column is-8-desktop">
<table class="table league is-hoverable is-fullwidth">
<thead>
<tr>
<th class="header-points">Pts</th>
......
......@@ -4,6 +4,5 @@ season: "2017/18"
code: "md"
competition: "Divizia Națională"
country: "Moldova"
latest: true
api: false
---
......@@ -32,15 +32,17 @@
}
}
.league-seasons {
img {
height: 80px;
margin: 0 20px;
}
}
.league-table {
padding-top: 0;
.league-info {
position: sticky;
top: 1rem;
width: 100%;
img {
height: 80px;
margin: 0 20px;
}
}
.legend {
.qualifications {
padding: 1rem 0;
......@@ -48,7 +50,6 @@
display: inline-block;
@media (max-width: 768px) {
display: block;
text-align: left;
}
&.hidden {
display: none;
......@@ -91,7 +92,7 @@
font-size: 1.2rem;
vertical-align: middle;
}
tr td {
.league.table tr td {
padding: 0.2em 0.75em;;
}
.team-box {
......
......@@ -3,7 +3,7 @@ var teams = league.standings;
var mostPoints = teams[0].points;
var fewestPoints = teams[league.teams - 1].points;
for (var i = mostPoints; i >= fewestPoints; i--) {
$("<tr id='" + i + "'><td class='points'>" + i + "</td><td class='teams'></td></tr>").appendTo(".table tbody");
$("<tr id='" + i + "'><td class='points'>" + i + "</td><td class='teams'></td></tr>").appendTo(".league.table tbody");
};
$.each(teams, function() {
var team = $(this)[0];
......@@ -50,3 +50,6 @@ $(league["relegation"]).each(function(){
var rank = Number(this) - 1;
$("table .team-box .position").eq(rank).css({"background-color": relegation, "color": "#fff"});
})
// add source
$("a.source").attr("href", league.source);
\ No newline at end of file
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