index.html.jinja

{% extends "base.html.jinja" %}

{% block main %}
<div>
  <div class="row">
    {% for project in completion_progress | sort(attribute='core_completion,completion') | reverse %}
      <div class="col-12 col-sm-6 col-md-4 d-flex">
        <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
          <div class="card-body">
            <h3 class="card-title"><a href="#{{ project.language.code }}">{{ project.language.name }}</a></h3>
            <h5 class="card-subtitle mb-2 text-muted">{{ project.translated_name }}</h5>

            <ul class="links-row">
              {% if project.built %}
              <li>
                <a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation">View</a>
              </li>
              {% endif %}
              <li>
                <a href="{{ project.contribution_link }}" aria-label="Contribute to {{ project.language.name }} translation">
                  Contribute
                </a>
              </li>
            </ul>
            {# core progress bar #}
            {% with width=project.core_completion, change=project.core_change, kind='core' %}
            {% include 'progress_bar.html.jinja' %}
            {% endwith %}
            {# overall progress bar #}
            {% with width=project.completion, change=project.change, kind='overall', extra_container_class='mt-1' %}
            {% include 'progress_bar.html.jinja' %}
            {% endwith %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<p style="text-align: center;">
  Last updated {{ generation_time.strftime('on %A %-d %B %Y at %-H:%M:%S %Z') }} (in {{ duration // 60 }} minutes and {{ duration % 60 }} seconds).<br/>
  You can find the scripts used to generate this website <a href="https://github.com/python-docs-translations/dashboard/">on GitHub</a>.<br/>
  You can download the data on this page in <a href="https://raw.githubusercontent.com/python-docs-translations/dashboard/refs/heads/gh-pages/index.json">JSON format</a>.
</p>
{% endblock %}
{% block extrascript %}
<script>
  function updateProgressBarVisibility() {
    document.querySelectorAll('.main-bar').forEach(progressBar => {
      const barWithOverflowWidth = progressBar.scrollWidth;
      const barWidth = progressBar.clientWidth;

      if (barWidth < barWithOverflowWidth) {
        progressBar.classList.add('low');
      } else {
        progressBar.classList.remove('low');
      }
    });
  }

  updateProgressBarVisibility();

  window.addEventListener('resize', updateProgressBarVisibility);
</script>
{% endblock %}