work on home page, fix views & templates issues

aircox/templates/admin/aircox/statistics.html

@@ -3,8 +3,14 @@
 
 
 {% block content %}{{ block.super }}
+<div id="app">
+
 {# TODO: date subtitle #}
-<div class="columns">
+<nav class="navbar" role="menu">
+    {% with "admin:tools-stats" as url_name %}
+    {% include "aircox/widgets/dates_menu.html" %}
+    {% endwith %}
+</nav>
 
 <a-statistics class="column">
 <template v-slot:default="{counts}">
@@ -23,13 +29,12 @@
         {% for track in tracks %}
         <tr>
             {% if forloop.first %}
-            <td rowspan="{{ tracks|length }}">{{ object.start|time:"H:i" }}</td>
+            <td rowspan="{{ tracks|length }}">{{ object.start|time:"H:i" }} {% if object|is_diffusion %} - {{ object.end|time:"H:i" }}{% endif %}</td>
             <td rowspan="{{ tracks|length }}">{{ object.episode|default:"" }}</td>
             {% endif %}
 
-            {% if not object|is_diffusion %}
             {% with track as object %}
-            <td>{% include "aircox/track_item.html" %}</td>
+            <td>{% include "aircox/widgets/track_item.html" %}</td>
             {% endwith %}
             {% with track.tags.all|join:', ' as tags %}
             <td>
@@ -41,10 +46,17 @@
                 {% endif %}
             </td>
             {% endwith %}
-        {% else %}
+        </tr>
+        {% empty %}
+        {% if object|is_diffusion %}
+        <tr>
+            <td>{{ object.start|time:"H:i" }} - {{ object.end|time:"H:i" }}</td>
+            <td>{{ object.episode|default:"" }}</td>
+            <td></td>
+            <td></td>
+        </tr>
         {% endif %}
         {% endfor %}
-        <tr>
         {% endwith %}
         {% endfor %}
         </tbody>
@@ -65,14 +77,6 @@
 </template>
 </a-statistics>
 
-
-<nav class="column menu is-one-fifth-desktop" role="menu">
-    {% with "admin:tools-stats" as url_name %}
-    {% include "aircox/widgets/dates_menu.html" %}
-    {% endwith %}
-</nav>
-
-
 </div>
 {% endblock %}
 

aircox/templates/admin/base.html

@@ -29,11 +29,10 @@
   data-admin-utc-offset="{% now "Z" %}">
 
 <!-- Container -->
-<div id="app">
-
+<div>
     {% if not is_popup %}
     <!-- Header -->
-    <nav class="navbar is-dark">
+    <nav class="navbar is-dark has-shadow">
         <div class="navbar-brand">
         {% block branding %}{% endblock %}
         </div>

aircox/templates/admin/change_list.html

@@ -37,7 +37,7 @@
 {% block coltype %}flex{% endblock %}
 
 {% block content %}
-  <div id="content-main">
+<div id="content-main">
     {% block object-tools %}
         <ul class="object-tools">
           {% block object-tools-items %}
@@ -74,16 +74,16 @@
           {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
 
           {% block filters %}
-              {% if cl.has_filters %}
-                  <div id="changelist-filter">
-                    <h2>{% trans 'Filter' %}</h2>
-                    {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
-                  </div>
-              {% endif %}
+          {% if cl.has_filters %}
+              <div id="changelist-filter">
+                <h2>{% trans 'Filter' %}</h2>
+                {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
+              </div>
+          {% endif %}
           {% endblock %}
-      </div>
+    </div>
 
 
     </div>
-  </div>
+</div>
 {% endblock %}

aircox/templates/aircox/article_detail.html

@@ -4,12 +4,12 @@
 {% block sidebar %}
 {{ block.super }}
 
-{% if sidebar_items %}
+{% if sidebar_object_list %}
 <section>
     <h4 class="title is-4">{% trans "Latest news" %}</h4>
 
-    {% for object in sidebar_items %}
-    {% include "aircox/page_item.html" %}
+    {% for object in sidebar_object_list %}
+    {% include "aircox/widgets/page_item.html" %}
     {% endfor %}
 
     <br>

aircox/templates/aircox/base.html

@@ -1,10 +1,29 @@
-{% load static i18n thumbnail aircox %}
 {% comment %}
 Context:
 - cover: image cover
 - site: current website
 - has_filters: display filter bar (using block "filters")
+- sidebar_object_list: item to display in sidebar
+- sidebar_url_name: url name sidebar item complete list
+- sidebar_url_parent: parent page for sidebar items complete list
+
+Blocks:
+- assets
+- head_title
+- head_extra
+- top_nav
+- header:
+    - title
+    - subtitle
+    - header_meta
+- main:
+    - filters
+- cover
+- sidebar:
+    - sidebar_title
 {% endcomment %}
+{% load static i18n thumbnail aircox %}
+
 <html>
     <head>
         <meta charset="utf-8" />
@@ -72,14 +91,14 @@ Context:
                             {% endblock %}
                         </header>
 
-                        {% if has_filters %}
-                        <nav class="navbar filters"
-                            aria-label="{% trans "list filters" %}">
-                        {% block filters %}{% endblock %}
-                        </nav>
-                        {% endif %}
-
-                        {% block main %}{% endblock main %}
+                        {% block main %}
+                            {% if has_filters %}
+                            <nav class="navbar filters"
+                                aria-label="{% trans "list filters" %}">
+                            {% block filters %}{% endblock %}
+                            </nav>
+                            {% endif %}
+                        {% endblock main %}
                     </main>
 
                     {% if has_sidebar %}
@@ -92,28 +111,18 @@ Context:
                         {% endblock %}
 
                         {% block sidebar %}
-                        {% if sidebar_items %} 
+                        {% if sidebar_object_list %}
+                        {% with object_list=sidebar_object_list %}
+                        {% with list_url=sidebar_list_url %}
+                        {% with has_headline=False %}
                         <section>
                             <h4 class="title is-4">
                                 {% block sidebar_title %}{% trans "Recently" %}{% endblock %}
                             </h4>
-
-                        {% for object in sidebar_items %}
-                        {% include "aircox/episode_item.html" %}
-                        {% endfor %}
-
-                        <br>
-                        <nav class="pagination is-centered">
-                            <ul class="pagination-list">
-                                <li>
-                                    <a {% if parent %}href="{% url "page-list" parent_slug=parent.slug %}"{% else %}href="{% url "page-list" %}"{% endif %}
-                                        class="pagination-link"
-                                        aria-label="{% trans "Show all program's diffusions" %}">
-                                        {% trans "Show more" %}
-                                    </a>
-                                </li>
-                            </ul>
-                        </nav>
+                            {% include "aircox/widgets/page_list.html" %}
+                        {% endwith %}
+                        {% endwith %}
+                        {% endwith %}
                         {% endif %}
                         </section>
                         {% endblock %}

aircox/templates/aircox/diffusion_list.html

@@ -16,7 +16,7 @@
 {% endblock %}
 
 {% block main %}{{ block.super }}
-{% with True as hide_schedule %}
+{% with hide_schedule=True %}
 <section role="list">
     <div id="timetable-{{ date|date:"Y-m-d" }}">
         {% for diffusion in object_list %}
@@ -24,12 +24,12 @@
         <div class="columns {% if diffusion.start.date != date and diffusion.start.end <= date %}is-opacity-light{% endif %}">
             <div class="column is-one-fifth has-text-right">
                 <time datetime="{{ diffusion.start|date:"c" }}">
-                {{ diffusion.start|date:"d H:i" }} - {{ diffusion.end|date:"d H:i" }}
+                {{ diffusion.start|date:"H:i" }} - {{ diffusion.end|date:"H:i" }}
                 </time>
             </div>
             <div class="column">
                 {% with diffusion.episode as object %}
-                {% include "aircox/episode_item.html" %}
+                {% include "aircox/widgets/episode_item.html" %}
                 {% endwith %}
             </div>
         </div>

aircox/templates/aircox/episode_detail.html

@@ -50,7 +50,7 @@
     <section class="column">
         <h4 class="title is-4">{% trans "Podcasts" %}</h4>
         {% for object in podcasts %}
-        {% include "aircox/podcast_item.html" %}
+        {% include "aircox/widgets/podcast_item.html" %}
         {% endfor %}
     </section>
     {% endif %}

aircox/templates/aircox/home.html

@@ -0,0 +1,83 @@
+{% extends "aircox/page_list.html" %}
+{% comment %}
+Context:
+- 
+- 
+
+TODO:
+- sidebar:
+    - logs
+    - diffusions
+- main:
+    - focused
+    - nav to 'publications' view
+    - 
+
+{% endcomment %}
+{% load i18n %}
+
+{% block head_title %}{% block title %}{{ station.name }}{% endblock %}{% endblock %}
+
+{% block main %}
+<div class="columns">
+    {% with render_card=True %}
+    {% for object in top_diffs %}
+    {% with is_primary=object.is_now %}
+    <div class="column is-relative">
+        <h4 class="card-super-title">
+            {% if is_primary %}
+            <span class="fas fa-play"></span>
+            {% trans "Currently" %}
+            {% else %}{{ object.start|date:"H:i" }}{% endif %}
+        </h4>
+        {% include object.item_template_name %}
+    </div>
+    {% endwith %}
+    {% endfor %}
+    {% endwith %}
+</div>
+
+<hr>
+<h4 class="title is-4">{% trans "Last publications" %}</h4>
+{{ block.super }}
+{% endblock %}
+
+
+{% block pagination %}
+<ul class="pagination-list">
+    <li>
+        <a href="{% url "page-list" %}" class="pagination-link"
+            aria-label="{% trans "Show all publication" %}">
+            {% trans "More publications..." %}
+        </a>
+    </li>
+</ul>
+{% endblock %}
+
+
+{% block sidebar %}
+<section>
+    <h4 class="title is-4">{% trans "Previously on air" %}</h4>
+    {% with logs as object_list %}
+    {% include "aircox/widgets/log_list.html" %}
+    {% endwith %}
+</section>
+
+<section>
+    <h4 class="title is-4">{% trans "Today" %}</h4>
+    {% with hide_schedule=True %}
+    {% with has_headline=False %}
+    <table class="table is-fullwidth has-background-transparent">
+    {% for object in sidebar_object_list %}
+    <tr>
+        <td>{{ object.start|date:"H:i" }}</td>
+        <td>{% include "aircox/widgets/diffusion_item.html" %}</td>
+    </tr>
+    {% endfor %}
+    </table>
+    {% endwith %}
+    {% endwith %}
+</section>
+{% endblock %}
+
+

aircox/templates/aircox/log_list.html

@@ -16,29 +16,10 @@
 {% endwith %}
 {% endblock %}
 
-{% block main %}
+{% block main %}{{ block.super }}
 <section>
     {# <h4 class="subtitle size-4">{{ date }}</h4> #}
-    {% with True as hide_schedule %}
-    <table class="table is-striped is-hoverable is-fullwidth">
-        {% for object in object_list %}
-        <tr>
-            <td>
-                {% if object|is_diffusion %}
-                <time datetime="{{ object.start }}" title="{{ object.start }}">
-                    {{ object.start|date:"H:i" }} - {{ object.end|date:"H:i" }}
-                </time>
-                {% else %}
-                <time datetime="{{ object.date }}" title="{{ object.date }}">
-                    {{ object.date|date:"H:i" }}
-                </time>
-                {% endif %}
-            </td>
-            <td>{% include "aircox/log_item.html" %}</td>
-        </tr>
-        {% endfor %}
-    </table>
-    {% endwith %}
+    {% include "aircox/widgets/log_list.html" %}
 </section>
 {% endblock %}
 

aircox/templates/aircox/page_list.html

@@ -56,21 +56,23 @@
 {% endblock %}
 
 
-{% block main %}
+{% block main %}{{ block.super }}
 <section role="list">
+{% with has_headline=True %}
 {% for object in object_list %}
 {% block list_object %}
 {% include object.item_template_name|default:item_template_name %}
 {% endblock %}
 {% endfor %}
+{% endwith %}
 </section>
 
 {% if is_paginated %}
 <hr>
-
 {% update_query request.GET.copy page=None as GET %}
 {% with GET.urlencode as GET %}
 <nav class="pagination is-centered" role="pagination" aria-label="{% trans "pagination" %}">
+    {% block pagination %}
     {% if page_obj.has_previous %}
     <a href="?{{ GET }}&page={{ page_obj.previous_page_number }}" class="pagination-previous">
     {% else %}
@@ -93,6 +95,7 @@
         </li>
     {% endfor %}
     </ul>
+    {% endblock %}
 </nav>
 {% endwith %}
 {% endif %}

aircox/templates/aircox/program_base.html

@@ -3,13 +3,7 @@
 
 {% block sidebar_title %}
 {% with program.title as program %}
-{% blocktrans %} Recently on {{ program }}{% endblocktrans %}
-{% endwith %}
-{% endblock %}
-
-{% block sidebar %}
-{% with program as parent %}
-{{ block.super }}
+{% blocktrans %}Recently on {{ program }}{% endblocktrans %}
 {% endwith %}
 {% endblock %}
 

aircox/templates/aircox/program_detail.html

@@ -10,15 +10,14 @@
 {% block content %}{{ block.super }}
 
 <br>
-
-{% with show_headline=False %}
+{% with has_headline=False %}
 <div class="columns is-desktop">
     {% if articles %}
     <section class="column">
         <h4 class="title is-4">{% trans "Articles" %}</h4>
 
         {% for object in articles %}
-        {% include "aircox/page_item.html" %}
+        {% include "aircox/widgets/page_item.html" %}
         {% endfor %}
 
         <br>

aircox/templates/aircox/widgets/diffusion_item.html

@@ -5,7 +5,7 @@ Context:
 {% endcomment %}
 {% with object as diffusion %}
 {% with object.episode as object %}
-{% include "aircox/episode_item.html" %}
+{% include "aircox/widgets/episode_item.html" %}
 {% endwith %}
 {% endwith %}
 

aircox/templates/aircox/widgets/episode_item.html

@@ -1,4 +1,4 @@
-{% extends "aircox/page_item.html" %}
+{% extends "aircox/widgets/page_item.html" %}
 {% load i18n easy_thumbnails_tags aircox %}
 
 {% comment %}

aircox/templates/aircox/widgets/log_item.html

@@ -11,11 +11,11 @@ for design review.
 
 {% if object|is_diffusion %}
     {% with object as diffusion %}
-    {% include "aircox/diffusion_item.html" %}
+    {% include "aircox/widgets/diffusion_item.html" %}
     {% endwith %}
 {% else %}
     {% with object.track as object %}
-    {% include "aircox/track_item.html" %}
+    {% include "aircox/widgets/track_item.html" %}
     {% endwith %}
 {% endif %}
 

aircox/templates/aircox/widgets/log_list.html

@@ -0,0 +1,29 @@
+{% comment %}
+Render list of logs (as widget).
+
+Context:
+- object_list: list of logs to display
+{% endcomment %}
+{% load aircox %}
+
+{% with True as hide_schedule %}
+<table class="table is-striped is-hoverable is-fullwidth" role="list">
+    {% for object in object_list %}
+    <tr>
+        <td>
+            {% if object|is_diffusion %}
+            <time datetime="{{ object.start }}" title="{{ object.start }}">
+                {{ object.start|date:"H:i" }} - {{ object.end|date:"H:i" }}
+            </time>
+            {% else %}
+            <time datetime="{{ object.date }}" title="{{ object.date }}">
+                {{ object.date|date:"H:i" }}
+            </time>
+            {% endif %}
+        </td>
+        <td>{% include "aircox/widgets/log_item.html" %}</td>
+    </tr>
+    {% endfor %}
+</table>
+{% endwith %}
+

aircox/templates/aircox/widgets/page_item.html

@@ -1,15 +1,36 @@
 {% load i18n easy_thumbnails_tags aircox %}
 {% comment %}
 Context variables:
-- object: the actual diffusion
-- show_headline: if True, display headline
+- object: the object to render
+- render_card: render as card
+- is-primary: render as primary
+- has_headline (=False): if True, display headline
+- has_cover (=True): hide page cover
 {% endcomment %}
 
-<article class="media">
+{% if render_card %}
+<article class="card {% if is_primary %}is-primary{% endif %}">
+    <header class="card-image">
+        <figure class="image is-4by3">
+            <img src="{% thumbnail object.cover 480x480 %}">
+        </figure>
+    </header>
+    <div class="card-header">
+        <h4 class="title">
+            <a href="{{ object.get_absolute_url }}">{{ object.title }}</a>
+        </h4>
+    </div>
+</article>
+
+
+{% else %}
+<article class="media item {% if is_primary %}is-primary{% endif %}">
+    {% if has_cover|default_if_none:True %}
     <div class="media-left">
         <img src="{% thumbnail object.cover 128x128 crop=scale %}"
             class="small-cover">
     </div>
+    {% endif %}
     <div class="media-content">
         <h5 class="title is-5 has-text-weight-normal">
             {% block title %}
@@ -26,8 +47,8 @@ Context variables:
             {% endblock %}
         </div>
 
-        {% if show_headline %}
-        <div class="">
+        {% if has_headline|default_if_none:True %}
+        <div class="headline">
         {% block headline %}
         {{ object.headline|safe }}
         {% endblock %}
@@ -35,4 +56,5 @@ Context variables:
         {% endif %}
     </div>
 </article>
+{% endif %}
 

aircox/templates/aircox/widgets/page_list.html

@@ -0,0 +1,28 @@
+{% comment %}
+Display list of items as small list
+
+Context:
+- object_list: object list
+- list_url: url to complete list page
+{% endcomment %}
+{% load i18n %}
+
+{% for object in object_list %}
+{% include object.item_template_name %}
+{% endfor %}
+
+{% if list_url %}
+<br>
+<nav class="pagination is-centered">
+    <ul class="pagination-list">
+        <li>
+            <a href="{{ list_url }}" class="pagination-link"
+                aria-label="{% trans "Show all publications" %}">
+                {% trans "Show more" %}
+            </a>
+        </li>
+    </ul>
+</nav>
+{% endif %}
+
+