Sith/core/templates/core/user_pictures.jinja

{% extends "core/base.jinja" %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
{%- endblock -%}

{% block additional_js %}
  <script src="{{ static('webpack/user/pictures-index.js') }}" defer></script>
{% endblock %}

{% block title %}
  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
{% endblock %}

{% block content %}
  <main x-data="user_pictures">
    {% if user.id == object.id %}
      <div x-show="pictures.length > 0" x-cloak>
        <button
          :disabled="isDownloading"
          class="btn btn-blue"
          @click="downloadZip()"
        >
          <i class="fa fa-download"></i>
          {% trans %}Download all my pictures{% endtrans %}
        </button>
        <progress x-ref="progress" x-show="isDownloading"></progress>
      </div>
    {% endif %}

    <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
      <section>
        <br />
        <h4 x-text="album"></h4>
        <div class="photos">
          <template x-for="picture in pictures">
            <a :href="`/sas/picture/${picture.id}`">
              <div
                class="photo"
                :class="{not_moderated: !picture.is_moderated}"
                :style="`background-image: url(${picture.thumb_url})`"
              >
                <template x-if="!picture.is_moderated">
                  <div class="overlay">&nbsp;</div>
                  <div class="text">{% trans %}To be moderated{% endtrans %}</div>
                </template>
                <template x-if="picture.is_moderated">
                  <div class="text">&nbsp;</div>
                </template>
              </div>
            </a>
          </template>
        </div>
      </section>
    </template>
    <div class="photos" :aria-busy="loading"></div>
  </main>
{% endblock content %}

{% block script %}

  {{ super() }}
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      loadPicturePage({ userId: {{ object.id }} });
    })
  </script>
{% endblock script %}