server/views/home.twig

{% extends "./base.twig" %}
{% block title %}Accueil{% endblock %}
{% block head %}
    {% include './home-metas.twig' %}
    <link rel="stylesheet" href="/static/styles/home.css" />
{% endblock %}
{% block content %}
<div class="nav">
  <button
    id="nav-enabler"
    class="nav-item nav-mobile-enabler">
    <div class="nav-icon">
      <i class="fas fa-ellipsis-h"></i>
    </div>
    <div class="nav-item-content">
      <div id="nav-enabler-text" class="nav-title">
        Afficher le menu
      </div>
      <div class="nav-access">
        <i
          id="nav-enabler-icon"
          class="fas fa-chevron-down">
        </i>
      </div>
    </div>
  </button>
  <div id="nav-content">
    <button class="nav-item" id="nav-all">
      <div class="nav-icon">
        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"></path>
        </svg>
      </div>
      <div class="nav-item-content">
        <div class="nav-title">
          Toutes
        </div>
        <div class="nav-access">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
            <path
              fill="currentColor"
              d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
            ></path>
          </svg>
        </div>
      </div>
    </button>
    {% for tag in tags %}
      <button class="nav-item" data-tag-id="{{ tag._id }}">
        <div class="nav-icon">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {{ tag.icon.width }} {{ tag.icon.height }}">
            <path
              fill="currentColor"
              d="{{ tag.icon.path|e }}"
            ></path>
          </svg>
        </div>
        <div class="nav-item-content">
          <div class="nav-title">
            {{ tag.name|e }}
          </div>
          <div class="nav-access">
            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
              <path
                fill="currentColor"
                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
              ></path>
            </svg>
          </div>
        </div>
      </button>
    {% endfor %}
  </div>
</div>
<div class="mosaic" id="mosaic">
  <div class="mosaic-header">
    <div class="mosaic-actions">
      <button
        id="sort-btn"
        title="Trier par ordre alphabétique"
        class="mosaic-action sort-action">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-alpha-down" class="btn-icon svg-inline--fa fa-sort-alpha-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z"></path></svg>
      </button>
      <button
        id="random-btn"
        title="Trier aléatoirement"
        class="mosaic-action random-action enabled">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="random" class="btn-icon svg-inline--fa fa-random fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"></path></svg>
      </button>
    </div>
    <div class="mosaic-count" id="mosaic-count"></div>
  </div>
  <div class="card-container"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let mediaBaseUrl = "{{ mediaBaseUrl }}"
  let isProposed = {{ isProposed }}
  let organizations = JSON.parse(`{{ organizationsJSON|escape('js') }}`)
</script>
<script src="/static/scripts/home.js"></script>
{% endblock %}