website-v2/templates/libraries/list.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Libraries" %}{% endblock %}

{% block content %}
  <!-- Breadcrumb used on filtered views -->

  <div class="p-0 mb-4 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
    <img src="{% static 'img/fpo/BreadCrumbs.png' %}" class="h-6" />
  </div>
  <!-- end breadcrumb -->

  <div class="px-3 pt-3 text-right md:px-0 md:mb-6" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
    <!-- command palatte for search -->
    {% include "libraries/includes/search_command_palatte.html" %}


    <form action="." method="get">
      <div class="flex relative space-x-3">
        <!-- Search -->
        <div class="relative">
          <span class="flex absolute top-2 right-3 items-center pl-2">
            <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </span>
          <input @click="showSearch = true; $nextTick(() => { setTimeout(() => { document.getElementById('q').focus(); }, 300);});"
                type="search" name="q" class="py-2 px-3 text-sm bg-white rounded-md border-gray-300 min-w-[100px] text-sky-600 md:min-w-[150px] lg:min-w-[300px] dark:text-orange dark:border-slate dark:bg-charcoal focus:text-charcoal" type="text" value="" placeholder="Search" />
        </div>

        <!-- Select a category -->
        <div>
          <select onchange="this.form.submit()"
            name="category"
            class="block py-2 pr-11 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
            id="id_category"
          >
            <option value="">Filter by category</option>
            {% for c in categories %}
              <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
            {% endfor %}
          </select>
        </div>

        <!-- Display options -->
        <div><a href="{% url 'libraries-mini' %}"><i class="bg-white rounded border border-gray-300 cursor-pointer dark:text-white fas fa-list text-slate p-[10px] dark:bg-charcoal hover:bg-orange"></i></a></div>
        <div><a href="{% url 'libraries' %}"><i class="text-white bg-gray-600 rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] dark:bg-green/40 hover:bg-orange"></i></a></div>
        <div><a href="{% url 'libraries-by-category' %}"><i class="bg-white rounded border border-gray-300 cursor-pointer dark:text-white fas fa-cat text-slate p-[10px] dark:bg-charcoal hover:bg-orange"></i></a></div>

        <!-- Select a version -->
        <select onchange="this.form.submit()"
                name="version"
                class="absolute right-0 py-2 pr-8 pl-5 mb-3 text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                id="id_version">
          {% for v in versions %}
          <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
          {% endfor %}
        </select>
      </div>
    </form>
  </div>

  <!-- alert for non-current Boost versions -->
  {% include "libraries/includes/version_alert.html" %}

  <!-- Libraries list -->
  <div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 xl:grid-cols-3">
    {% if by_category %}
      {% for result in library_list %}
        <h2>{{ result.category }}</h2>
        {% for library in result.libraries %}
          {% include "libraries/_library_list_item.html" %}
        {% endfor %}
      {% endfor %}
    {% else %}
      {% for library in library_list %}
        {% include "libraries/_library_list_item.html" %}
      {% endfor %}
    {% endif %}
  </div>
  <!-- end libraries list -->

  {% if page_obj.paginator %}
  <!-- Pagination -->
  <div class="space-x-3 text-center">
    {% if page_obj.has_previous %}
      <a href="?page=1" class="text-orange"><small> &lt;&lt; First</small></a>
      <a href="?page={{ page_obj.previous_page_number }}" class="text-orange"><small> &lt; Previous</small> </a>
    {% endif %}
    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}" class="text-orange"><small>Next <small> &gt; </small></a>
        <a href="?page={{ page_obj.paginator.num_pages }}" class="text-orange">Last <small> &gt;&gt;</small></a>
    {% endif %}
  </div>
  <!-- end pagination -->
  {% endif %}

{% endblock %}