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;
@@ -42,4 +51,8 @@ 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,34 +11,54 @@
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>
<thead> <a class="toggle-autorefresh">Enable Autorefresh</a>
<tr> </div>
<th>Rank</th> <div>
<th>ID</th> <table>
<th>Team Name</th> <thead>
{% for i in range(scoreCount) %} <tr>
<th>{{ i + 1 }}</th> <th>Rank</th>
{% endfor %} <th>ID</th>
</tr> <th>Team Name</th>
</thead> {% for i in range(scoreCount) %}
<tbody> <th>{{ i + 1 }}</th>
{% for team in teams %} {% endfor %}
<tr> </tr>
<td>{{ range(1, teams | length) | random }}</td> </thead>
<td>{{ team.id }}</td> <tbody>
{% if team.name | length > 0 %} {% for team in teams %}
<td>{{ team.name }}</td> <tr class="team-row">
{% else %} <td>{{ range(1, teams | length) | random }}</td>
<td>Team {{ team.id }}</td> <td>{{ team.id }}</td>
{% endif %} {% if team.name | length > 0 %}
{% for score in team.scores %} <td>{{ team.name }}</td>
<td>{{ score }}</td> {% else %}
<td class="team-silent">Team {{ team.id }}</td>
{% endif %}
{% for score in team.scores %}
<td>{{ score }}</td>
{% endfor %}
</tr>
{% endfor %} {% endfor %}
</tr> </tbody>
{% endfor %} </table>
</tbody> </div>
</table>
</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>