Commit cf090b06 authored by Guus Hoekman's avatar Guus Hoekman

responsive improvements

parent 69236c83
Pipeline #76888878 passed with stage
in 1 minute and 22 seconds
......@@ -4,10 +4,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Progressive web app -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#363636">
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" href="/img/favicon.png">
<title>{{ site.title }}{% if page.layout == 'season' %} | Seasons | {{ page.season }}{% elsif page.layout == 'league' %} | Leagues | {{ page.competition }} | {{ page.season }}{% elsif page.title %} | {{ page.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}" />
......
......@@ -5,7 +5,7 @@
<body>
{% include header.html %}
<script src="/js/jquery-3.3.1.slim.min.js"></script>
<script src="/js/jquery-3.4.1.slim.min.js"></script>
<script src="/js/colours.js"></script>
{{ content }}
......
......@@ -36,7 +36,7 @@ layout: base
</div>
{% endif %}
</div>
<div class="column league">
<div class="column league-tables">
<div class="tabs is-centered">
<ul>
<li class="is-active"><a data-tab="per-game">Points per game</a></li>
......
......@@ -206,8 +206,11 @@
}
.column.points {
padding: 0;
border-right: none;
border: none;
max-width: 25px;
tbody {
border: none;
}
.points-wrap {
height: 15px;
.listed-points {
......@@ -222,11 +225,11 @@
.column.league {
padding: 0;
tbody {
border-right: 1px solid #efefef;
border-left: 1px solid #efefef;
transition: border-color 0.5s;
tr {
border-left: 1px solid #efefef;
border-bottom: 1px solid #fff;
border-bottom: 1px solid transparent;
transition: border-color 0.5s;
}
}
......@@ -266,8 +269,10 @@
.columns.is-grid .table tbody tr, .columns.is-grid .table tbody {
border-color: #999;
}
.columns.tables:not(.is-active) {
display: none;
.columns.tables {
&:not(.is-active) {
display: none;
}
}
&.single-season {
padding-top: 0;
......
......@@ -55,7 +55,7 @@ title: Home
<label for="toggleGrid">Toggle grid</label>
</div>
</div>
<div class="column league">
<div class="column league-tables">
<div class="tabs is-centered">
<ul>
<li class="is-active"><a data-tab="per-game">Points per game</a></li>
......
This diff is collapsed.
This diff is collapsed.
......@@ -41,7 +41,7 @@ function totalPoints() {
var number_teams = this["teams"];
// create table for each competition
$("<div class='column league'><table class='is-fullwidth total table " + code_string + "'><thead><tr><th class='header-teams tooltip' data-tooltip='" + this.competition + "'><a href='/leagues/" + code_string + "/" + season + ".html'><img src='/img/flags/" + code_string + ".svg'></a></th></tr></thead><tbody></tbody></table></div>").appendTo(".tables.total");
$("<div class='column league'><table class='is-fullwidth total table " + code_string + "'><thead><tr><th class='header-teams tooltip' data-tooltip='" + this.competition + "'><a href='/leagues/" + code_string + "/" + season + ".html'><img src='/img/flags/" + code_string + ".svg' alt='" + code_string + " flag'></a></th></tr></thead><tbody></tbody></table></div>").appendTo(".tables.total");
var teams = this.standings;
var mostPoints = teams[0].points;
var fewestPoints = teams[number_teams - 1].points;
......@@ -90,7 +90,7 @@ function totalPoints() {
});
// add most and fewest points
$(".total.columns .column").first().before("<div class='column points'><table class='is-fullwidth table points'><thead><tr><th class='header-points'><img src='/img/flags/points.svg'></th></tr></thead><tbody></tbody></table></div>");
$(".total.columns .column").first().before("<div class='column points'><table class='is-fullwidth table points'><thead><tr><th class='header-points'><img src='/img/flags/points.svg' alt='empty image'></th></tr></thead><tbody></tbody></table></div>");
for (var i = mostPointsAllLeagues; i >= fewestPointsAllLeagues; i--) {
$("<tr id='points-" + i + "'><td class='teams'><div class='points-wrap'></div></td></tr>").appendTo(".points.table tbody");
};
......@@ -109,7 +109,7 @@ function pointsPerGame() {
var number_teams = this["teams"];
// create table for each competition
$("<div class='column league'><table class='is-fullwidth per-game table " + code_string + "'><thead><tr><th class='header-teams tooltip' data-tooltip='" + this.competition + "'><a href='/leagues/" + code_string + "/" + season + ".html'><img src='/img/flags/" + code_string + ".svg'></a></th></tr></thead><tbody></tbody></table></div>").appendTo(".tables.per-game");
$("<div class='column league'><table class='is-fullwidth per-game table " + code_string + "'><thead><tr><th class='header-teams tooltip' data-tooltip='" + this.competition + "'><a href='/leagues/" + code_string + "/" + season + ".html'><img src='/img/flags/" + code_string + ".svg' alt='" + code_string + " flag'></a></th></tr></thead><tbody></tbody></table></div>").appendTo(".tables.per-game");
var teams = this.standings;
var mostPoints = teams[0].points;
var fewestPoints = teams[number_teams - 1].points;
......@@ -163,7 +163,7 @@ function pointsPerGame() {
});
// add points on left column
$(".per-game.columns .column").first().before("<div class='column points'><table class='is-fullwidth table points'><thead><tr><th class='header-points'><img src='/img/flags/points.svg'></th></tr></thead><tbody></tbody></table></div>");
$(".per-game.columns .column").first().before("<div class='column points'><table class='is-fullwidth table points'><thead><tr><th class='header-points'><img src='/img/flags/points.svg' alt='empty image'></th></tr></thead><tbody></tbody></table></div>");
$(normalisedPoints).each(function() {
$("<tr id='points-" + this + "'><td class='teams'><div class='points-wrap'></div></td></tr>").appendTo(".per-game.columns .points.table tbody");
});
......@@ -177,8 +177,8 @@ function pointsPerGame() {
pointsPerGame();
// switch table tabs
$(".column.league .tabs a").click(function(){
$(".columns.tables, .column.league .tabs li").removeClass("is-active");
$(".column.league-tables .tabs a").click(function(){
$(".columns.tables, .column.league-tables .tabs li").removeClass("is-active");
$(this).parent().addClass("is-active");
var tab = $(this).data("tab");
......
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