website-v2/templates/news/list.html

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

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

{% block content %}
  <div class="py-0 px-3 md:px-0 mt-0 mb-0 w-full md:mb-2">
    <div class="md:w-full">
      <h1 class="text-4xl">Latest Stories</h1>

      <div class="md:flex md:space-x-16">
        <div class="md:w-1/2 w-full">
          <p class="mt-0 text-justify">
            Stay up to date with Boost and the C++ ecosystem with the latest news, videos, resources, polls, and user-created content.
            {% if user.is_authenticated %}
            Or, <a href="{% url 'news-create' %}" class="whitespace-nowrap text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">Create a Post</a> to include in the feed (posts are reviewed before publication).
            {% else %}
            Signed-in users may submit items to include in the feed (posts are reviewed before publication).
            {% endif %}
          </p>
        </div>

        <!-- General filters, by news type -->
        <div class="md:w-1/2 w-full pt-6">
          <div class="grid grid-cols-3 justify-center place-items-center space-y-1 space-x-1 {% if is_moderator %}sm:grid-cols-6{% else %}sm:grid-cols-5{% endif %} sm:space-y-0">

            {% url 'news' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">All</h6>
              <i class="fa fa-globe"></i>
            </a>

            {% url 'news-news-list' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">News</h6>
              <i class="fa fa-newspaper"></i>
            </a>

            {% url 'news-blogpost-list' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">Blogs</h6>
              <i class="fa fa-comment"></i>
            </a>

            {% url 'news-link-list' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">Links</h6>
              <i class="fas fa-link"></i>
            </a>

            {% comment %}
            <!-- turning off polls for now -->
            {% url 'news-poll-list' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">Polls</h6>
              <i class="fa fa-poll"></i>
            </a>
            {% endcomment %}

            {% url 'news-video-list' as target_url %}
            <a href="{{ target_url }}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">Videos</h6>
              <i class="fa fa-video"></i>
            </a>

            {% if is_moderator %}
            <a href="{% url "news-moderate" %}" class="w-20 p-1 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange{% if request.path == target_url %} bg-gray-100 dark:bg-slate text-orange dark:text-orange{% endif %}">
              <h6 class="pb-1 text-base">Moderate</h6>
              <i class="fa fa-thumbs-up"></i>
            </a>
            {% endif %}
          </div>
        </div>
    </div>

    <div class="my-5">
      <div class="mx-auto w-full">
        {% for entry in entry_list %}
        <div class="md:flex md:space-x-3">
          <div class="hidden mt-6 text-sm text-left capitalize md:block min-w-[120px] whitespace-nowrap">
            <a href="{{ entry.get_absolute_url }}" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">{{ entry.display_publish_at }}&nbsp;&nbsp;</a>
          </div>
          <div class="hidden pt-6 border-l-2 border-white md:block min-w-[50px] dark:border-slate">
            {% if entry.tag == "link" %}
              {% url 'news-link-list' as target_url %}
              <a href="{{ target_url }}" title="Link" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                <i class="fas fa-link"></i>
              </a>
            {% elif entry.tag == "news" %}
              {% url 'news-news-list' as target_url %}
              <a href="{{ target_url }}" title="News" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                <i class="fa fa-newspaper"></i>
              </a>
            {% elif entry.tag == "blogpost" %}
              {% url 'news-blogpost-list' as target_url %}
              <a href="{{ target_url }}" title="Blog Post" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 py-[1px] w-[30px] h-[30px] dark:bg-slate">
                <i class="fa fa-comment"></i>
              </a>
            {% elif entry.tag == "poll" %}
              {% url 'news-poll-list' as target_url %}
              <a href="{{ target_url }}" title="Poll" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                <i class="fa fa-poll"></i>
              </a>
            {% elif entry.tag == "video" %}
              {% url 'news-video-list' as target_url %}
              <a href="{{ target_url }}" title="Video" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                <i class="fa fa-video"></i>
              </a>
            {% else %}
              <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate"></i>
            {% endif %}
          </div>
          <div class="hidden pt-2 mt-4 text-xs text-left md:block min-w-[70px]">
            {% if entry.author.image %}
              <span class="inline-block h-[30px] w-[30px] overflow-hidden rounded bg-white dark:bg-slate">
                <img src="{{ entry.author.image_thumbnail.url }}" alt="{{ entry.author.get_full_name }}" class="h-full w-full object-cover" />
              </span>
            {% else %}
              <span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white dark:bg-slate">
                <i class="text-2xl fas fa-user ml-1" title="{{ entry.author.get_full_name }}"></i>
              </span>
            {% endif %}
          </div>
          <div class="block p-6 mb-10 w-full bg-white rounded-lg md:ml-6 dark:bg-charcoal overflow-hidden">
            {% can_edit news_item=entry as editable %}
            {% if editable %}
              <a href="{% url 'news-update' entry.slug %}" class="float-right dark:text-white/50 hover:text-orange dark:hover:text-orange -mt-5 -mr-3 text-sm">
                <i class="fas fa-edit"></i>
              </a>
            {% endif %}
            <div class="flex">
              <div class="flex-grow-1">
              <h2 class="py-0 my-0 text-xl font-semibold mr-4">
                <a class="link-header" {% if entry.tag == "link" %}target="_blank"{% endif %} href="{% if entry.tag == "link" %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
                  {{ entry.title }}
                </a>
              </h2>
            </div>
              <div class="md:block text-xs hidden ml-auto" style="margin-left: auto;">
                {{ entry.author.get_full_name }}<br />
                <span class="text-xs">{{ entry.publish_at|date:"M jS, Y" }}</span>
              </div>
            </div>
            {% if entry.content %}
            <div class="truncate">
              <span class="text-base text-gray-500 dark:text-white/70">{{ entry.content|urlize|url_target_blank:'text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange'|linebreaksbr|truncatechars:500 }}...</span>
              </div>
            {% endif %}

            <!-- footer of cards only for mobile devices -->
            <div class="flex border-t border-gray-300 md:hidden">
              <div class="mt-6 w-1/3 text-xs text-left capitalize">
                {{ entry.author.get_full_name }}<br />
                {{ entry.display_publish_at }}
              </div>
              <div class="pt-6 w-1/3 text-center md:border-l-2 border-white dark:border-slate">
                {% if entry.tag == "link" %}
                  {% url 'news-link-list' as target_url %}
                  <a href="{{ target_url }}" title="Link" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                    <i class="fas fa-link"></i>
                  </a>
                {% elif entry.tag == "news" %}
                  {% url 'news-news-list' as target_url %}
                  <a href="{{ target_url }}" title="News" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                    <i class="fa fa-newspaper"></i>
                  </a>
                {% elif entry.tag == "blogpost" %}
                  {% url 'news-blogpost-list' as target_url %}
                  <a href="{{ target_url }}" title="Blog Post" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 py-[1px] w-[30px] h-[30px] dark:bg-slate">
                    <i class="fa fa-comment"></i>
                  </a>
                {% elif entry.tag == "poll" %}
                  {% url 'news-poll-list' as target_url %}
                  <a href="{{ target_url }}" title="Poll" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                    <i class="fa fa-poll"></i>
                  </a>
                {% elif entry.tag == "video" %}
                  {% url 'news-video-list' as target_url %}
                  <a href="{{ target_url }}" title="Video" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                    <i class="fa fa-video"></i>
                  </a>
                {% else %}
                  <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate"></i>
                {% endif %}
              </div>
              <div class="pt-2 mt-4 w-1/3 text-xs text-right">
                {% if entry.author.image %}
                  <span class="inline-block h-[30px] w-[30px] overflow-hidden rounded border border-gray-400 dark:border-gray-500">
                    <img src="{{ entry.author.image.url }}" alt="{{ entry.author.get_full_name }}" class="h-full w-full object-cover" />
                  </span>
                {% else %}
                  <span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white dark:bg-slate border border-gray-400 dark:border-gray-500">
                    <i class="text-2xl fas fa-user mr-1" title="{{ entry.author.get_full_name }}"></i>
                  </span>
                {% endif %}
              </div>
            </div>
            <!-- end footer -->
          </div>
        </div>
        {% empty %}
          {% if  user.is_authenticated %}
            <p class="text-center">No news yet; consider submitting something!</p>
          {% endif %}
        {% endfor %}
      </div>
    </div>


  </div>
{% endblock %}