work on templates

aircox/models/article.py

@@ -8,6 +8,7 @@ __all__ = ("Article",)
 
 class Article(Page):
     detail_url_name = "article-detail"
+    template_prefix = "article"
 
     objects = ProgramChildQuerySet.as_manager()
 

aircox/models/page.py

@@ -279,7 +279,7 @@ class StaticPage(BasePage):
         return super().get_absolute_url()
 
 
-class Comment(models.Model):
+class Comment(Renderable, models.Model):
     page = models.ForeignKey(
         Page,
         models.CASCADE,
@@ -292,7 +292,7 @@ class Comment(models.Model):
     date = models.DateTimeField(auto_now_add=True)
     content = models.TextField(_("content"), max_length=1024)
 
-    item_template_name = "aircox/widgets/comment_item.html"
+    template_prefix = "comment"
 
     @cached_property
     def parent(self):

aircox/templates/admin/index.html

@@ -1,5 +1,5 @@
 {% extends "admin/index.html" %}
-{% load i18n thumbnail %}
+{% load i18n thumbnail aircox %}
 
 
 {% block app %}
@@ -62,10 +62,12 @@
                 <span>{% translate "Latest comments" %}</span>
             </h1>
             {% if comments %}
-            {% include "aircox/widgets/page_list.html" with object_list=comments with_title=True %}
-            <div class="has-text-centered">
-                <a href="{% url "admin:aircox_comment_changelist" %}" class="float-center">{% translate "All comments" %}</a>
-            </div>
+                {% for object in comments %}
+                {% page_widget "preview" object with_title=True %}
+                {% endfor %}
+                <div class="has-text-centered">
+                    <a href="{% url "admin:aircox_comment_changelist" %}" class="float-center">{% translate "All comments" %}</a>
+                </div>
             {% else %}
             <p class="block has-text-centered">{% trans "No comment posted yet" %}</p>
             {% endif %}

aircox/templates/aircox/base.html

@@ -48,41 +48,26 @@ Usefull context:
             })
         </script>
         <div id="app">
-            {% block top-nav-container %}
-            <nav class="app-nav" role="navigation" aria-label="main navigation">
-                <div class="container">
+            <div class="container">
+                {% block nav %}
+                <nav class="nav primary" role="navigation" aria-label="main navigation">
+                    {% block nav-primary %}
+                    <a class="navbar-brand" href="{% url "home" %}">
+                        <img src="{{ station.logo.url }}">
+                    </a>
                     <div class="navbar-menu">
-                        <div class="navbar-start">
-                            {% block top-nav %}
-                            {% nav_items "top" css_class="navbar-item" active_class="is-active" as items %}
-                            {% for item, render in items %}
-                            {{ render }}
-                            {% endfor %}
-                            {% endblock %}
-                        </div>
-                        {% comment %}
-                        <div class="navbar-end">
-                            {% block top-nav-tools %}
-                            {% endblock %}
-                            {% block top-nav-end %}
-                            <div class="navbar-item">
-                                <form action="{% url 'page-list' %}" method="GET">
-                                    <div class="control has-icons-left">
-                                        <span class="icon is-small is-left">
-                                            <i class="fa fa-search"></i>
-                                        </span>
-                                        <input type="text" name="q" class="input"
-                                            placeholder="{% translate "Search" %}" />
-                                    </div>
-                                </form>
-                            </div>
-                            {% endblock %}
-                        </div>
-                        {% endcomment %}
+                        {% block nav-primary-menu %}
+                        {% nav_items "top" css_class="nav-item" active_class="active" as items %}
+                        {% for item, render in items %}
+                        {{ render }}
+                        {% endfor %}
+                        {% endblock %}
                     </div>
-                </div>
-            </nav>
-            {% endblock %}
+                    {% endblock %}
+                </nav>
+                {% endblock %}
+                {% block secondary-nav %}{% endblock %}
+            </div>
 
             {% block main-container %}
             <main class="page">

aircox/templates/aircox/basepage_list.html

@@ -1,4 +1,4 @@
-{% extends "aircox/base.html" %}
+{% extends "./base.html" %}
 
 {% comment %}Display a list of BasePages{% endcomment %}
 {% load i18n aircox %}
@@ -24,14 +24,6 @@
 
 
 {% block content-container %}
-{% block secondary-nav-container %}
-<section class="container">
-    <nav class="secondary-nav">
-        {% block secondary-nav %}{% endblock %}
-    </nav>
-</section>
-{% endblock %}
-
 {{ block.super }}
 
 <div class="container">

aircox/templates/aircox/diffusion_list.html

@@ -12,12 +12,6 @@
 {% endif %}
 {% endblock %}
 
-{% block filters-item %}
-<span class="control">
-    <input type="date">
-</span>
-{% endblock %}
-
 {% block header %}
 {% with "./widgets/dated_list_header.html" as header_template_name %}
     {{ block.super }}
@@ -25,7 +19,9 @@
 {% endblock %}
 
 {% block secondary-nav %}
-{% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
+<nav class="nav secondary">
+    {% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
+</nav>
 {% endblock %}
 
 {% block pages_list %}

aircox/templates/aircox/home.html

@@ -1,23 +1,12 @@
 {% extends "aircox/page_list.html" %}
-{% comment %}Home page{% endcomment %}
 {% load i18n aircox %}
 
 {% block head_title %}{{ station.name }}{% endblock %}
 
-
 {% block content-container %}
+{{ block.super }}
+
 {% if next_diffs %}
-<section class="container card-grid">
-    {% for obj in next_diffs|slice:"1:4" %}
-        {% if object != diffusion %}
-            {% page_widget "card" obj.episode diffusion=obj timetable=True %}
-        {% endif %}
-    {% endfor %}
-</section>
-{% endif %}
-
-
-{% if object_list %}
 <section class="container">
     <h2 class="title is-3 p-2">
         {% with station.name as station %}
@@ -27,6 +16,28 @@
         {% endwith %}
     </h2>
 
+    <div class="mb-3">
+    {% with next_diffs.0 as obj %}
+        {% page_widget "wide" obj.episode diffusion=obj timetable=True %}
+    {% endwith %}
+    </div>
+
+    <div class="card-grid">
+        {% for obj in next_diffs|slice:"1:4" %}
+            {% if object != diffusion %}
+                {% page_widget "card" obj.episode diffusion=obj timetable=True %}
+            {% endif %}
+        {% endfor %}
+    </div>
+</section>
+{% endif %}
+
+
+{% if object_list %}
+<section class="container">
+    <h2 class="title is-3 p-2">
+    </h2>
+
     <div role="list">
         {% for object in object_list %}
         {% page_widget "item" object.episode diffusion=object timetable=True open=True %}
@@ -37,30 +48,4 @@
 {% endif %}
 {% endblock %}
 
-
-
-
 {% block pages_list %}{% endblock %}
-
-
-{% block sidebar %}
-<section>
-    <h4 class="title is-4">{% translate "Previously on air" %}</h4>
-    {% with has_cover=False %}
-    {% with logs as object_list %}
-    {% include "aircox/widgets/log_list.html" %}
-    {% endwith %}
-    {% endwith %}
-</section>
-
-<section>
-    <h4 class="title is-4">{% translate "Last publications" %}</h4>
-    {% with hide_schedule=True %}
-    {% with has_headline=False %}
-    {% for object in last_publications %}
-    {% include object.item_template_name|default:'aircox/widgets/page_item.html' %}
-    {% endfor %}
-    {% endwith %}
-    {% endwith %}
-</section>
-{% endblock %}

aircox/templates/aircox/log_list.html

@@ -23,7 +23,9 @@
 
 
 {% block secondary-nav %}
-{% include "./widgets/dates_menu.html" with url_name="log-list" %}
+<nav class="nav secondary">
+    {% include "./widgets/dates_menu.html" with url_name="log-list" %}
+</nav>
 {% endblock %}
 
 

aircox/templates/aircox/page_detail.html

@@ -32,63 +32,52 @@ Context:
 {{ block.super }}
 
 {% block comments %}
-{% if comments or comment_form %}
-<section class="container mt-6">
-<a-dropdown item-class="title is-3" button-class="button dropdown-trigger">
-    <template #item>
-        {% translate "Comments" %}
-    </template>
+{% if comments %}
+<section class="container">
+    <h2 class="title">{% translate "Comments" %}</h2>
 
-    <template #default>
-        {% for comment in comments %}
-        <div class="media box">
-            <div class="media-content">
-                <p>
-                    <strong class="mr-2">{{ comment.nickname }}</strong>
-                    <time datetime="{{ comment.date }}" title="{{ comment.date }}">
-                        <small>{{ comment.date|naturaltime }}</small>
-                    </time>
-                    <br>
-                    {{ comment.content }}
-                </p>
-            </div>
+    {% for comment in comments %}
+    <div class="media box">
+        <div class="media-content">
+            <p>
+                <strong class="mr-2">{{ comment.nickname }}</strong>
+                <time datetime="{{ comment.date }}" title="{{ comment.date }}">
+                    <small>{{ comment.date|naturaltime }}</small>
+                </time>
+                <br>
+                {{ comment.content }}
+            </p>
+        </div>
+    </div>
+    {% endfor %}
+</section>
+{% endif %}
+
+{% if comment_form %}
+<section class="container">
+    <form method="POST">
+        <h2 class="title">{% translate "Post a comment" %}</h2>
+        {% csrf_token %}
+        {% render_honeypot_field "website" %}
+
+        {% for field in comment_form %}
+        <div class="field">
+            <label class="label">{{ field.label_tag }}</label>
+            <div class="control">{{ field }}</div>
+            {% if field.errors %}
+            <p class="help is-danger">{{ field.errors }}</p>
+            {% endif %}
+            {% if field.help_text %}
+            <p class="help">{{ field.help_text|safe }}</p>
+            {% endif %}
         </div>
         {% endfor %}
 
-        {% if comment_form %}
-        <form method="POST">
-            <h5 class="title is-5">{% translate "Post a comment" %}</h5>
-            {% csrf_token %}
-            {% render_honeypot_field "website" %}
-
-            {% for field in comment_form %}
-            <div class="field is-horizontal">
-                <div class="field-label is-normal">
-                    <label class="label">
-                        {{ field.label_tag }}
-                    </label>
-                </div>
-                <div class="field-body">
-                    <div class="field">
-                        <p class="control is-expanded">{{ field }}</p>
-                        {% if field.errors %}
-                        <p class="help is-danger">{{ field.errors }}</p>
-                        {% endif %}
-                        {% if field.help_text %}
-                        <p class="help">{{ field.help_text|safe }}</p>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-            {% endfor %}
-            <div class="has-text-right">
-                <button type="reset" class="button is-danger">{% translate "Reset" %}</button>
-                <button type="submit" class="button is-success">{% translate "Post comment" %}</button>
-            </div>
-        </form>
-        {% endif %}
-    </template>
-</a-dropdown>
+        <div class="has-text-right">
+            <button type="reset" class="button is-danger mr-3">{% translate "Reset" %}</button>
+            <button type="submit" class="button is-success">{% translate "Post comment" %}</button>
+        </div>
+    </form>
 </section>
 {% endif %}
 

aircox/templates/aircox/widgets/article.html

@@ -0,0 +1,4 @@
+{% extends "./page.html" %}
+{% load humanize %}
+
+{% block subtitle %}{{ object.pub_date.date }}{% endblock %}

aircox/templates/aircox/widgets/card.html

@@ -2,7 +2,12 @@
 {% load i18n %}
 
 {% block tag-class %}{{ block.super }} preview-card{% endblock %}
-{% block tag-style %}{{ block.super }}{% if cover %} background-image: url({{ cover }});{% endif %}{% endblock %}
+{% block tag-extra %}
+    {{ block.super }}
+    {% if cover %}
+    style="background-image: url({{ cover }});"
+    {% endif %}
+{% endblock %}
 {% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
 
 {% block inner %}

aircox/templates/aircox/widgets/comment.html

@@ -0,0 +1,50 @@
+{% extends "./page.html" %}
+{% load i18n humanize aircox %}
+
+{% block tag-class %}{{ block.super }} comment{% endblock %}
+
+{% block outer %}
+{% if with_title %}
+    {% with url=object.parent.get_absolute_url %}
+        {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block title %}
+    {{ object.nickname }} — {{ object.date }}
+{% endblock %}
+
+{% block subtitle %}
+{% if with_title %}
+    {{ object.parent.title }}
+{% endif %}
+{% endblock %}
+
+
+{% block content %}{{ object.content }}{% endblock %}
+
+{% block actions %}
+{{ block.super }}
+
+{% if request.user.is_staff %}
+<span class="float-right">
+    <a href="{% url "admin:aircox_comment_change" object.pk %}"
+       title="{% trans "Edit comment" %}"
+       aria-label="{% trans "Edit comment" %}">
+        <span class="fa fa-edit"></span>
+    </a>
+    <a class="has-text-danger"
+       title="{% trans "Delete comment" %}"
+       aria-label="{% trans "Delete comment" %}"
+       href="{% url "admin:aircox_comment_delete" object.pk %}">
+        <span class="fa fa-trash-alt"></span>
+    </a>
+
+    {# <a href="mailto:{{ object.email }}">{{ object.nickname }}</a> #}
+</span>
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/dates_menu.html

@@ -11,9 +11,16 @@ An empty date results to a title or a separator
 {% endcomment %}
 {% load i18n %}
 
-<a-dropdown class="nav-item dropdown" button-class="dropdown-trigger button"
+{% for day in dates %}
+<a href="{% url url_name date=day %}" class="nav-item {% if day == date %}active{% endif %}">
+    {{ day|date:"l d" }}
+</a>
+{% endfor %}
+
+<a-dropdown class="nav-item align-right flex-grow-0 dropdown is-right"
         content-class="dropdown-menu"
-        buttonIconOpen="fa-solid fa-bars" buttonIconClose="fa-solid fa-bars">
+        button-tag="span" button-class="dropdown-trigger"
+        button-icon-open="fa-solid fa-plus" button-icon-close="fa-solid fa-minus">
     <template #default>
         <div class="dropdown-content">
             <div class="dropdown-item">
@@ -27,10 +34,3 @@ An empty date results to a title or a separator
         </div>
     </template>
 </a-dropdown>
-{% for day in dates %}
-<li class="nav-item {% if day == date %}active{% endif %}">
-    <a href="{% url url_name date=day %}" class="button">
-        {{ day|date:"l d" }}
-    </a>
-</li>
-{% endfor %}

aircox/templates/aircox/widgets/home_header.html

@@ -1,38 +0,0 @@
-{% extends "./base_header.html" %}
-{% load i18n humanize %}
-
-
-
-{% block subtitle %}
-    {% if diffusion %}
-    {{ diffusion.start|naturalday }},
-    {{ diffusion.start|date:"g:i" }}
-    {% endif %}
-{% endblock %}
-
-
-{% block headings %}
-{{ block.super }}
-{% with diffusion.episode.content|default:diffusion.episode.program.content|striptags|safe as content %}
-{% if content %}
-<div class="heading-container content">
-    {{ content|truncatewords:64|linebreaks }}
-</div>
-{% endif %}
-
-<div class="actions">
-    <button class="btn-outline-hg button">
-        <span class="icon">
-            <i class="fas fa-play"></i>
-        </span>
-        {% trans "Listen" %}
-    </button>
-    <a class="btn-outline-hg button" href="{{ diffusion.episode.get_absolute_url }}">
-        <span class="icon">
-            <i class="fas fa-external-link"></i>
-        </span>
-        {% trans "More informations" %}
-    </a>
-</div>
-{% endwith %}
-{% endblock %}

aircox/templates/aircox/widgets/item.html

@@ -1,20 +1,21 @@
+{% extends "./preview.html" %}
 {% load i18n aircox %}
 
-{% block outer %}
-<article class="preview list-item {% if not cover %}no-cover{% endif %}{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
-{% block inner %}
+{% block tag-class %}list-item is-fullwidth{% endblock %}
+{% block headings-class %} columns{% endblock %}
 
-<a href="{{ url|escape }}" class="headings is-fullwidth columns">
 {% block headings %}
-    <div class="column">
-        <span class="heading title">{% block title %}{% endblock %}</span>
-    </div>
-    <div>
-        <span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
-    </div>
+<div class="column">
+    <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
+</div>
+<div>
+    <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
+</div>
 {% endblock %}
-</a>
 
+{% block inner %}
+{% block headings-container %}{{ block.super }}{% endblock %}
+{% block content-container %}
 <div class="media">
     {% if object.cover %}
     <div class="media-left preview-cover small"
@@ -32,11 +33,10 @@
             {% endblock %}
         </section>
 
-        <div class="actions is-flex-grow-0">
-            {% block actions %}{% endblock %}
-        </div>
-    </template>
+        {% block actions-container %}
+        {{ block.super }}
+        {% endblock %}
+    </div>
 {% endblock %}
-</div>
-</article>
+
 {% endblock %}

aircox/templates/aircox/widgets/page_list.html

@@ -8,7 +8,7 @@ Context:
 {% load i18n aircox %}
 
 {% for object in object_list %}
-{% widget object.item_template_name %}
+{% page_widget "item" object %}
 {% endfor %}
 
 {% if list_url %}

aircox/templates/aircox/widgets/preview.html

@@ -1,17 +1,30 @@
 {% load i18n %}
+{% comment %}
+Content related context:
+- object: object to display
+- cover: cover
+- title: title
+- subtitle: subtitle
+- content: content to display
+
+Styling related context:
+- tag_class: css class to set to main tag
+- tag_style: css styles to set to main tag
+- child_tag_class: css class to set to direct component node children
+
+{% endcomment %}
 
 {% block outer %}
-<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}"
-        style="{% block tag-style %}{{ tag_style }}{% endblock %}">
+<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}" {% block tag-extra %}{% endblock %}>
 {% block inner %}
     {% block headings-container %}
-    <header class="headings{% block headings-class %}{% endblock %}" >
+    <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
     {% block headings %}
         <div>
-            <a href="{{ url|escape }}" class="heading title">{% block title %}{{ title|default:"" }}{% endblock %}</a>
+            <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
         </div>
         <div>
-            <span class="heading subtitle">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
+            <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
         </div>
     {% endblock %}
     </header>

aircox/templates/aircox/widgets/wide.html

@@ -1,21 +1,20 @@
-{% extends "./card.html" %}
+{% extends "./preview.html" %}
 {% load i18n %}
 
-{% block tag_class %}{{ block.super }} wide{% endblock %}
-
-{% block inner %}
-{% block headings-container %}
-<header class="headings column preview-cover"
-    style="background-image: url({{ object.cover.url }})">
-    {% block headings %}{{ block.super }}{% endblock %}
-</header>
+{% block tag-class %}{{ block.super }} preview-wide columns{% endblock %}
+{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
+{% block headings-tag-extra %}
+    {{ block.super }}
+    {% if cover %}
+    style="background-image: url({{ cover }});"
+    {% endif %}
 {% endblock %}
 
-<div class="height-full column">
-    <section class="content headings-container">
-        {% block content %}{{ block.super }}{% endblock %}
-    </section>
 
+{% block inner %}
+{% block headings-container %}{{ block.super }}{% endblock %}
+<div class="is-flex-direction-column">
+    {% block content-container %}{{ block.super }}{% endblock %}
     {% block actions-container %}{{ block.super }}{% endblock %}
 </div>
 {% endblock %}

aircox/views/home.py

@@ -5,12 +5,13 @@ from django.views.generic import ListView
 
 from ..models import Diffusion, Log, Page, StaticPage
 from .base import BaseView
+from .mixins import AttachedToMixin
 
 
-class HomeView(BaseView, ListView):
+class HomeView(AttachedToMixin, BaseView, ListView):
     template_name = "aircox/home.html"
-    model = Diffusion
     attach_to_value = StaticPage.ATTACH_TO_HOME
+    model = Diffusion
     queryset = Diffusion.objects.on_air().select_related("episode")
     logs_count = 5
     publications_count = 5