calum
/
drulum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Updated templates for articles app to include tailwind styling.

pull/1/head
Calum Andrew Morrell 2025-05-05 19:44:42 +01:00
parent b50d44530d
commit 651d0de029
6 changed files with 48 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
articles/templates/articles/article_detail.html
View File

@ -1,33 +1,28 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<article> <article class="max-w-5xl mx-auto my-4 px-8">
<h3>{{ article.title }}</h3> <h3 class="text-6xl font-extrabold">{{ article.title }}</h3>
{% if article.subtitle %} {% if article.subtitle %}
<h5>{{ article.subtitle }}</h5> <h5 class="text-4xl italic font-medium">{{ article.subtitle }}</h5>
{% endif %} {% endif %}
<p>Added on the {{ article.created|date:'jS \o\f F, Y' }} <p class="text-sm">Added on the {{ article.created | date:'jS \o\f F, Y' }}
{% if article.created.date != article.updated.date %} {% if article.created.date != article.updated.date %}
and updated on the {{ article.updated|date:'jS \o\f F, Y' }} and updated on the {{ article.updated | date:'jS \o\f F, Y' }}
{% endif %} {% endif %}
</p> </p>
<hr> <hr class="my-2">
{% if article.introduction %} {% if article.introduction %}
<p>{{ article.introduction|linebreaksbr }}</p> <p class="text-justify italic">{{ article.introduction|linebreaksbr }}</p>
<hr> <hr class="my-2">
{% endif %} {% endif %}
<div> <div class="prose md:prose-lg lg:prose-xl max-w-none prose-img:rounded-2xl">
{{ article.body_as_markdown|safe }} {{ article.body_as_markdown|safe }}
</div> </div>
<hr> <hr class="my-2">
<div> <div class="flex justify-between text-neutral-400">
<span>Posted in the <a <span>Posted in the <a class="hover:text-red-400" href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }}</a> category</span>
href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }}</a> category</span> {# <span>{% include 'articles/includes/display_tags.html' %}</span>#}
<span>
{% for tag in article.tags.all %}
<a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},{% endif %}
{% endfor %}
</span>
</div> </div>
</article> </article>
{% endblock %} {% endblock %}

48
articles/templates/articles/article_list.html
View File

@ -4,51 +4,45 @@
<main> <main>
{% if object_list %} {% if object_list %}
{% if category %} {% if category %}
<h3>{{ category }} Articles</h3> <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">{{ category }} Articles</h3>
{% if category.introduction %} {% if category.introduction %}
<div> <div class="flex justify-center mb-4">
<p>{{ category.introduction }}</p> <p class="sm:w-1/2 lg:w-1/3 mx-8 text-justify">{{ category.introduction }}</p>
</div> </div>
{% endif %} {% endif %}
{% elif tag %} {% elif tag %}
<h3>Articles for tag: {{ tag }}</h3> <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Articles for tag: {{ tag }}</h3>
{% else %} {% else %}
<h3>Recent Articles</h3> <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Recent Articles</h3>
{% endif %} {% endif %}
<hr> <hr class="mx-8">
<div> <div class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 m-8">
{% for article in object_list %} {% for article in object_list %}
<div> <div class="pb-8 break-inside-avoid-column">
<a href="{{ article.get_absolute_url }}">{{ article.title }}</a> <a class="text-3xl font-semibold hover:text-red-400" href="{{ article.get_absolute_url }}">{{ article.title }}</a>
{% if article.subtitle %} {% if article.subtitle %}
<h5>{{ article.subtitle }}</h5> <h5 class="text-xl italic font-medium">{{ article.subtitle }}</h5>
{% endif %} {% endif %}
{% if article.introduction %} {% if article.introduction %}
<hr> <hr class="my-2">
<p>{{ article.introduction|linebreaksbr }}</p> <p class="text-justify">{{ article.introduction|linebreaksbr }}</p>
{% endif %} {% endif %}
<hr> <hr class="my-2">
<div> <div class="flex justify-between text-neutral-400">
<span> <span>
<a href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a> <a class="hover:text-red-400" href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
&bull; {{ article.created|date:'jS \o\f F, Y' }} &bull; {{ article.created | date:'jS \o\f F, Y' }}
</span>
<span>
{% for tag in article.tags.all %}
<a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},
{% endif %}
{% endfor %}
</span> </span>
<span>{% include 'articles/includes/display_tags.html' %}</span>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}
<div> <div class="text-center m-8">
<h3>Oops!</h3> <h3 class="text-4xl mb-4">Oops!</h3>
<h5>It looks like there are no articles for that {% if category %}category{% elif tag %} tag{% endif %} <h5 class="text-lg">It looks like there are no articles for that {% if category %}category{% elif tag %}tag{% endif %} yet.</h5>
yet.</h5> <p class="text-neutral-400">(sorry not sorry)</p>
<p>(sorry not sorry)</p>
</div> </div>
{% endif %} {% endif %}
{% if page_obj.has_previous or page_obj.has_next %} {% if page_obj.has_previous or page_obj.has_next %}

12
articles/templates/articles/category_list.html
View File

@ -3,15 +3,15 @@
{% block content %} {% block content %}
<main> <main>
{% if object_list %} {% if object_list %}
<h3>Category List</h3> <h3 class="text-6xl my-4 text-center">Category List</h3>
<hr> <hr class="mx-8">
<ul> <ul class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 m-8">
{% for category in object_list %} {% for category in object_list %}
<li> <li>
<a href="{{ category.get_absolute_url }}">{{ category.title }}</a> <a class="text-2xl font-semibold hover:text-red-400" href="{{ category.get_absolute_url }}">{{ category.title }}</a>
{% if category.introduction %} {% if category.introduction %}
<hr> <hr class="my-2">
<p>{{ category.introduction }}</p> <p class="text-justify">{{ category.introduction }}</p>
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}

3
articles/templates/articles/includes/display_tags.html Normal file
View File

@ -0,0 +1,3 @@
{% for tag in article.tags.all %}
<a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},{% endif %}
{% endfor %}

8
articles/templates/articles/tag_list.html
View File

@ -3,12 +3,12 @@
{% block content %} {% block content %}
<main> <main>
{% if object_list %} {% if object_list %}
<h3>List of Tags</h3> <h3 class="text-6xl my-4 text-center">List of Tags</h3>
<hr> <hr class="mx-8">
<ul> <ul class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 m-8">
{% for tag in object_list %} {% for tag in object_list %}
<li> <li>
<a href="{{ tag.get_absolute_url }}">{{ tag }}</a> <a class="text-2xl font-semibold hover:text-red-400" href="{{ tag.get_absolute_url }}">{{ tag }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

2
core/templates/core/homepage.html
View File

@ -36,7 +36,7 @@
href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a> href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
&bull; {{ article.created | date:'jS \o\f F, Y' }} &bull; {{ article.created | date:'jS \o\f F, Y' }}
</span> </span>
{# <span>{% include 'articles/includes/display_tags.html' %}</span>#} <span>{% include 'articles/includes/display_tags.html' %}</span>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}