website-v2/templates/versions/detail.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load text_helpers %}
{% block title %}{% blocktrans with version_name=version.display_name %}Boost {{ version_name }}{% endblocktrans %}{% endblock %}
{% block description %}{% blocktrans with version_name=version.display_name %}Discover what's new in Boost {{ version_name }}{% endblocktrans %}{% endblock %}
{% block content %}
  <main class="content">
    {% if version %}
    <div class="py-0 px-0 mb-0 w-full md:mb-2 flex flex-row flex-nowrap items-center"
            x-data="{'showSearch': false}"
            x-on:keydown.escape="showSearch=false">
      <div class="flex-auto mb-2 w-full">

        <div>
          <span class="text-xl md:text-3xl lg:text-4xl">{{ heading }}</span>
          <span class="text-lg whitespace-nowrap md:text-xl lg:text-3xl pr-[1vw]">({{ version.display_name }})</span>
          <span><a href="{% url 'downloads_feed_rss' %}">RSS Feed</a></span>
        </div>
      </div>
      <div class="flex-shrink">
        <form action="." method="post">
          {% csrf_token %}
          <div>
            <label for="id_version" hidden="true">Versions:</label>
            <select onchange="this.form.submit()"
                    name="version"
                    class="dropdown"
                    id="id_version">
              {% for v in versions %}
                <option value="{{ v.pk }}"
                        {% if version == v %}selected="selected"{% endif %}>
                  {{ v.display_name }}
                </option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>
    </div>
    <section class="content divide-x-0 divide-transparent md:divide-x md:divide-gray-700">
      <div class="pb-2 w-full h-auto md:pb-0 md:w-auto">
        <div class="flex flex-col">
          <div class="h-8">
            <span class="block pb-1 font-bold">{{ version.release_date|date:"F j, Y" }}</span>
          </div>
          <div class="-ml-2 h-14">
            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
               href="{{ version.documentation_url }}">
              <span class="dark:text-white text-slate">Documentation</span>
              <span class="block text-xs">{{ request.scheme }}://{{ request.get_host }}{{ version.documentation_url|cut:"https://"|cut:"index.html" }}</span>
            </a>
          </div>
          <div class="-ml-2 h-14">
            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
               href="{{ version.github_url }}">
              <i class="float-right mt-1 fab fa-github"></i>
              <span class="dark:text-white text-slate">Source Code</span>
              <span class="block text-xs">{{ version.github_url|cut:"https://" }}</span>
            </a>
          </div>
          <div class="-ml-2 h-14">
            {% comment %}Release notes are only for full releases {% endcomment %}
            {% if version.full_release %}
            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
               href="{{ version.boost_release_notes_url }}">
              <i class="float-right mt-1 fas fa-arrow-up-right-from-square"></i>
              <span class="dark:text-white text-slate">Release Notes</span>
              <span class="block text-xs">{{ version.boost_release_notes_url|cut:"https://" }}</span>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="overflow-x-hidden pb-2 pl-0 ml-0 space-x-6 w-full h-auto md:pb-0 md:pl-6 md:ml-6">
        <div class="flex space-x-3">
          {% if downloads %}
          <table class="p-0 m-0 w-full text-sm text-left border-0 border-separate table-auto dark:text-white border-spacing-0 text-slate">
            <tbody>
              <tr>
                <th scope="col"
                    width="150"
                    class="p-3 h-8 text-base bg-gray-100 rounded-tl-lg border border-r-0 border-b-0 border-gray-700 md:rounded-tl-none dark:bg-charcoal">
                  Platform
                </th>
                <th scope="col"
                    width="700"
                    class="p-3 text-base bg-gray-100 border border-r-0 border-b-0 border-gray-700 dark:bg-charcoal">
                  File
                </th>
                <th scope="col"
                    colspan="2"
                    class="p-3 text-base bg-gray-100 rounded-tr-lg border border-b-0 border-gray-700 dark:bg-charcoal">
                  SHA256 Hash
                </th>
              </tr>
                {% for os, download_files in downloads.items %}
                  {% for download in download_files %}
                    <tr>
                      {% if forloop.first %}
                        <th scope="row"
                            rowspan="{{ download_files|length }}"
                            class="p-2 h-14 whitespace-nowrap border border-r-0 {% if not forloop.parentloop.last %}border-b-0 {% endif %}border-gray-700 dark:bg-charcoal">
                          <i class="fab fa-{% if os == 'Unix' %}linux{% else %}windows{% endif %}"></i> {{ os }}
                        </th>
                      {% endif %}
                      <td class="p-2 border border-r-0 {% if not forloop.last or not forloop.parentloop.last %}border-b-0 {% endif %}border-gray-700">
                        <a href="{{ download.url }}" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">{{ download.display_name }}</a>
                      </td>
                      <td width="30"
                          class="p-2 mx-1 text-center align-bottom whitespace-nowrap border border-r-0 {% if not forloop.last or not forloop.parentloop.last %}border-b-0 {% endif %}border-gray-700">
                        <button class="justify-center items-center w-4 h-full font-semibold shadow"
                                @click="$clipboard($el.parentElement.nextSibling.nextSibling.title)">
                          <svg class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="m6 19v2c0 .621.52 1 1 1h2v-1.5h-1.5v-1.5zm7.5 3h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm4-3h-1.5v1.5h-1.5v1.5h2c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm0-4.363v-3.637h1.5v3.637zm-13-3.637v3.637h-1.5v-3.637zm11.5-4v1.5h1.5v1.5h1.5v-2c0-.478-.379-1-1-1zm-10 0h-2c-.62 0-1 .519-1 1v2h1.5v-1.5h1.5zm4.5 1.5h-3.5v-1.5h3.5zm3-1.5v-2.5h-13v13h2.5v-1.863h1.5v3.363h-4.5c-.48 0-1-.379-1-1v-14c0-.481.38-1 1-1h14c.621 0 1 .522 1 1v4.5h-3.5v-1.5z" />
                          </svg>
                        </button>
                      </td>
                      <td class="border pr-2 {% if not forloop.last or not forloop.parentloop.last %}border-b-0 {% endif %}border-l-0 border-gray-700 truncCell dark:bg-charcoal"
                          title="{{ download.checksum }}">
                        <span class="hidden xl:block">{{ download.checksum }}</span>
                        <span class="hidden md:block xl:hidden">{{ download.checksum|truncate_middle:20 }}</span>
                        <span class="md:hidden">{{ download.checksum|truncate_middle:10 }}</span>
                      </td>
                    </tr>
                  {% endfor %}
                {% endfor %}

            </tbody>
          </table>
          {% endif %}
        </div>
      </div>
    </section>

    {% if release_notes %}
      <section id="libraryReadMe"
        class="p-6 my-4 bg-white rounded-lg shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
        {{ release_notes|safe }}
      </section>
    {% endif %}

  {% endif %}
  </main>
{% endblock %}