rankings.html

{% extends "base.html" %}
{% block title %}Rankings{% endblock %}
{% block background %}/assets/png/temp-bg.jpg{% endblock %}
{% block rankings %}navbar--layout-item-active{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
    .important {
        color: #336699;
    }
    .leaderboard {
        border-radius: 15px;
        background: #1A1A1A;
        padding: 1rem;
        padding-bottom: 2.5rem;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 50px;
        width: 60%;
    }

    .leaderboard-pos {
        border-radius: 10px;
        padding: 0.5rem;
        margin: 0.5rem;
        background: #262626;
    }

    .leaderboard-pos-text {
        font-size: 1rem;
        float: left;
        position: relative;
        vertical-align: middle;
    }

    .leaderboard-big-text {
        font-size: 2.5rem;
        text-align: center;
        padding: 0.25rem;
    }

    .leaderboard-username-text {
        font-size: 1rem;
        position: relative;
        left: 0.75rem;
        vertical-align: middle;
    }

    .leaderboard-pp-text {
        float: right;
        right: 1rem;
        position: relative;
        font-size: 0.9rem;
    }

    .leaderboard-flag {
        height: 1.25rem;
        margin-left: 10px;
        float: left;
    }
</style>
<!--
    FIXME: FIX THE FUCKING FIGMA CODE 😭😭😭 
    - Becca (Electro)
-->

<!--<style>
    /*the comments in this inline css tag are figma names!*/
    /* Rectangle 59 */
.leaderboard{
position: absolute;
width: 1152px;
height: 963px;
left: 104px;
top: 239px;

background: #1A1A1A;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
border-radius: 5px;
}
.leaderboard-pos{
    /* Rectangle 61 */

position: absolute;
width: 1045px;
height: 32px;
left: 171px;
top: 388px;

background: #262626;
border-radius: 5px;
}
.account-image{
    /* Rectangle 63 */
position: absolute;
width: 300px;
height: 32px;
left: 171px;
top: 388px;
}
</style>
-->
{% endblock %}
{% block content %}
{{ super() }}
<div class="leaderboard">
    <p class="leaderboard-big-text">Leaderboard</p>
    {% for score in leaderboard_scores %}
        {% if not loop.index > 25 %}
        <div class="leaderboard-pos">
            <span class="account-image"><img src="https://a.spoo.uk/{{user.id}}" alt="Profile Picture"/></span>
            <span class="leaderboard-pos-text">#{{ loop.index + page*25 }}</span>
            <img class="leaderboard-flag" src="https://osu.ppy.sh/images/flags/{{ score.country }}.png">
            <span class="leaderboard-username-text">{{ score.name }}</span>
            <span class="leaderboard-pp-text">{{ score.stats.stars }}*</span>
        </div>
        {% endif %}
    {% endfor %}
    {% if page > 0 %}<a href="/rankings?page={{ page-1 }}"><span style="float: left; position: relative; left: 1rem; font-size: 1.5rem;">Prev</span></a>{% endif %}
    <a href="/rankings?page={{ page+1 }}"><span style="float: right; position: relative; right: 1.5rem; font-size: 1.5rem;">Next</span></a>
</div>
{% endblock %}