add autoscroll feature

This commit is contained in:
Xevion
2020-06-23 16:01:42 -05:00
parent e43c7e8bfa
commit 6e9ca747ef
2 changed files with 62 additions and 28 deletions

View File

@@ -8,6 +8,10 @@ table {
right: 0; right: 0;
} }
body {
margin: 0;
}
th, td { th, td {
font-family: Calibri, serif; font-family: Calibri, serif;
font-size: large; font-size: large;
@@ -35,6 +39,11 @@ th, td {
width: 1rem; width: 1rem;
} }
.team-silent {
font-style: italic;
color: #676767;
}
th, td > div { th, td > div {
height: 10%; height: 10%;
overflow: hidden; overflow: hidden;
@@ -43,3 +52,7 @@ th, td > div {
th, td { th, td {
height: 20px; height: 20px;
} }
.topnav {
overflow: hidden;
}

View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="../static/style.css"/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Index</title> <title>Index</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
@@ -10,8 +11,12 @@
url_for('static', filename='jquery.js') }}">\x3C/script>')</script> url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
</head> </head>
<body> <body>
<div class="topnav" style="height: 1.5rem; float: right">
<table> <a class="toggle-autoscroll">Disable Autoscroll</a>
<a class="toggle-autorefresh">Enable Autorefresh</a>
</div>
<div>
<table>
<thead> <thead>
<tr> <tr>
<th>Rank</th> <th>Rank</th>
@@ -24,13 +29,13 @@
</thead> </thead>
<tbody> <tbody>
{% for team in teams %} {% for team in teams %}
<tr> <tr class="team-row">
<td>{{ range(1, teams | length) | random }}</td> <td>{{ range(1, teams | length) | random }}</td>
<td>{{ team.id }}</td> <td>{{ team.id }}</td>
{% if team.name | length > 0 %} {% if team.name | length > 0 %}
<td>{{ team.name }}</td> <td>{{ team.name }}</td>
{% else %} {% else %}
<td>Team {{ team.id }}</td> <td class="team-silent">Team {{ team.id }}</td>
{% endif %} {% endif %}
{% for score in team.scores %} {% for score in team.scores %}
<td>{{ score }}</td> <td>{{ score }}</td>
@@ -38,6 +43,22 @@
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
</body> </body>
<script>
SCROLL_INTERVAL = 1500;
function ScrollOnce(autoscroll) {
$(".team-row:first").appendTo("tbody")
if (autoscroll) {
setTimeout(function () {
ScrollOnce(true)
}, SCROLL_INTERVAL)
}
}
ScrollOnce(true);
</script>
</html> </html>