MarseyWorld/files/templates/leaderboard.html

{% extends "settings2.html" %}
{% block pagetitle %}Leaderboard{% endblock %}
{% block content %}
<pre class="d-none d-md-inline-block"></pre>
<div id="leaderboard-contents" style="text-align: center; margin-bottom: 1.5rem; font-size: 1.2rem;">
	{% for lb in leaderboards %}
		{% if lb %}
			<a href="#leaderboard-{{lb.html_id}}">{{lb.header_name}}</a>{% if not loop.last %} &bull;{% endif %}
		{% endif %}
	{% endfor %}
</div>

{% macro format_user_in_table(user, style, position_no, value, user_relative_url) %}
	{% set value = value | int %}
	<tr {{style}}>
		<td>{{position_no}}</td>
		<td>{% include "user_in_table.html" %}</td>
		{% if user_relative_url %}
			<td><a href="/@{{user.username}}/{{user_relative_url}}">{{"{:,}".format(value)}}</a></td>
		{% else %}
			<td>{{"{:,}".format(value)}}</td>
		{% endif %}
	</tr>
{% endmacro %}

{% macro leaderboard_table(lb, position, id, header_name, v_value) %}
<h5 class="font-weight-bolder text-center pt-2 pb-3"><a id="leaderboard-{{id}}">Top {{lb.limit}} by {{table_header_name}}</a></h5>
<div class="overflow-x-auto">
{# TODO: check at some point if the nesting divs are intentional #}
<table class="table table-striped mb-5">
	<thead class="bg-primary text-white">
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>{{lb.table_column_name}}</th>
		</tr>
	</thead>
	<tbody>
	{% for user in lb.all_users %}
		{% if v.id == user.id %}
			{% set style="class=\"self\"" %}
		{% endif %}
		{{format_user_in_table(user, style, loop.index, lb.value_func(user))}}
	{% endfor %}
	{% if position %}
		{{format_user_in_table(v, "style=\"border-top:2px solid var(--primary)\"", position, v_value)}}
	{% endif %}
	</tbody>
</table>
{% endmacro %}

{% for lb in leaderboards %}
	{% if lb %}
		{{leaderboard_table(lb, lb.v_position, lb.html_id, lb.header_name, lb.v_value)}}
	{% endif %}
{% endfor %}

<a id="leader--top-btn" href="#leaderboard-contents" role="button"
		style="position: fixed; bottom: 5rem; right: 2rem; font-size: 3rem;">
	<i class="fas fa-arrow-alt-circle-up"></i>
</a>
{% endblock %}