work on design: items, components

aircox/admin/diffusion.py

@@ -30,9 +30,9 @@ class DiffusionAdmin(DiffusionBaseAdmin, admin.ModelAdmin):
 
     end_date.short_description = _("end")
 
-    list_display = ("episode", "start_date", "end_date", "type", "initial")
+    list_display = ("episode", "start", "end", "type", "initial")
     list_filter = ("type", "start", "program")
-    list_editable = ("type",)
+    list_editable = ("type", "start", "end")
     ordering = ("-start", "id")
 
     fields = ("type", "start", "end", "initial", "program", "schedule")

aircox/models/diffusion.py

@@ -137,8 +137,6 @@ class Diffusion(Rerun):
     #    help_text = _('use this input port'),
     # )
 
-    item_template_name = "aircox/widgets/diffusion_item.html"
-
     class Meta:
         verbose_name = _("Diffusion")
         verbose_name_plural = _("Diffusions")
@@ -208,6 +206,11 @@ class Diffusion(Rerun):
             and self.end >= now
         )
 
+    @property
+    def is_today(self):
+        """True if diffusion is currently today."""
+        return self.start.date() == datetime.date.today()
+
     @property
     def is_live(self):
         """True if Diffusion is live (False if there are sounds files)."""

aircox/models/episode.py

@@ -13,7 +13,9 @@ __all__ = ("Episode",)
 class Episode(Page):
     objects = ProgramChildQuerySet.as_manager()
     detail_url_name = "episode-detail"
+    template_prefix = "episode"
     item_template_name = "aircox/widgets/episode_item.html"
+    card_template_name = "aircox/widgets/episode_card.html"
 
     @property
     def program(self):

aircox/models/log.py

@@ -9,6 +9,7 @@ from django.utils.translation import gettext_lazy as _
 from .diffusion import Diffusion
 from .sound import Sound, Track
 from .station import Station
+from .page import Renderable
 
 logger = logging.getLogger("aircox")
 
@@ -54,13 +55,15 @@ class LogQuerySet(models.QuerySet):
         return self.filter(track__isnull=not with_it)
 
 
-class Log(models.Model):
+class Log(Renderable, models.Model):
     """Log sounds and diffusions that are played on the station.
 
     This only remember what has been played on the outputs, not on each
     source; Source designate here which source is responsible of that.
     """
 
+    template_prefix = "log"
+
     TYPE_STOP = 0x00
     """Source has been stopped, e.g. manually."""
     # Rule: \/ diffusion != null \/ sound != null

aircox/models/page.py

@@ -16,6 +16,7 @@ from model_utils.managers import InheritanceQuerySet
 from .station import Station
 
 __all__ = (
+    "Renderable",
     "Category",
     "PageQuerySet",
     "Page",
@@ -30,6 +31,17 @@ headline_re = re.compile(
 )
 
 
+class Renderable:
+    template_prefix = "page"
+    template_name = "aircox/widgets/{prefix}.html"
+
+    def get_template_name(self, widget):
+        """Return template name for the provided widget."""
+        return self.template_name.format(
+            prefix=self.template_prefix, widget=widget
+        )
+
+
 class Category(models.Model):
     title = models.CharField(_("title"), max_length=64)
     slug = models.SlugField(_("slug"), max_length=64, db_index=True)
@@ -68,7 +80,7 @@ class BasePageQuerySet(InheritanceQuerySet):
         return self.filter(title__icontains=q)
 
 
-class BasePage(models.Model):
+class BasePage(Renderable, models.Model):
     """Base class for publishable content."""
 
     STATUS_DRAFT = 0x00
@@ -112,7 +124,6 @@ class BasePage(models.Model):
     objects = BasePageQuerySet.as_manager()
 
     detail_url_name = None
-    item_template_name = "aircox/widgets/page_item.html"
 
     class Meta:
         abstract = True
@@ -152,14 +163,14 @@ class BasePage(models.Model):
 
     @property
     def display_title(self):
-        if self.is_published():
+        if self.is_published:
             return self.title
-        return self.parent.display_title()
+        return self.parent and self.parent.display_title or ""
 
     @cached_property
-    def headline(self):
+    def display_headline(self):
-        if not self.content:
+        if not self.content or not self.is_published:
-            return ""
+            return self.parent and self.parent.display_headline or ""
         content = bleach.clean(self.content, tags=[], strip=True)
         headline = headline_re.search(content)
         return mark_safe(headline.groupdict()["headline"]) if headline else ""

aircox/models/signals.py

@@ -43,6 +43,7 @@ def user_default_groups(sender, instance, created, *args, **kwargs):
 
 @receiver(signals.post_save, sender=Page)
 def page_post_save(sender, instance, created, *args, **kwargs):
+    return
     if not created and instance.cover:
         Page.objects.filter(parent=instance, cover__isnull=True).update(
             cover=instance.cover
@@ -67,6 +68,7 @@ def program_post_save(sender, instance, created, *args, **kwargs):
 
 @receiver(signals.pre_save, sender=Schedule)
 def schedule_pre_save(sender, instance, *args, **kwargs):
+    return
     if getattr(instance, "pk") is not None:
         instance._initial = Schedule.objects.get(pk=instance.pk)
 

aircox/templates/aircox/base.html

@@ -49,7 +49,7 @@ Usefull context:
         </script>
         <div id="app">
             {% block top-nav-container %}
-            <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
+            <nav class="navbar" role="navigation" aria-label="main navigation">
                 <div class="container">
                     <div class="navbar-brand">
                         <a href="/" title="{% translate "Home" %}" class="navbar-item">
@@ -87,81 +87,31 @@ Usefull context:
             </nav>
             {% endblock %}
 
-            <div class="container">
+            {% block main-container %}
-                <div class="columns is-desktop">
+            <main class="page">
-                    <main class="column page">
+            {% block main %}
-                        <header class="header">
+                <header class="container header {% if cover %}has-cover{% endif %}">
-                            {% block header %}
+                {% block header %}
-                            <h1 class="title is-1">
+                    {% if object %}
-                                {% block title %}
+                        {% include header_template_name|default:"./widgets/header.html" with title=object.title cover=object.cover.url %}
-                                {% if page and page.title %}
+                    {% else %}
-                                {{ page.title }}
+                        {% include header_template_name|default:"./widgets/header.html" %}
-                                {% endif %}
-                                {% endblock %}
-                            </h1>
-
-                            <h3 class="subtitle is-3">
-                                {% block subtitle %}{% endblock %}
-                            </h3>
-
-                            <div class="columns is-size-4">
-                            {% block header_nav %}
-                            <span class="column">
-                                {% block header_crumbs %}
-                                {% if parent %}
-                                <a href="{{ parent.get_absolute_url }}">
-                                     {{ parent.title }}</a></li>
-                                {% endif %}
-                                {% endblock %}
-                            </span>
-                            {% endblock %}
-                            </div>
-                            {% endblock %}
-                        </header>
-
-                        {% block main %}
-                            {% block content %}
-                            {% if page and page.content %}
-                            <section class="page-content mb-2">{{ page.content|safe }}</section>
-                            {% endif %}
-                            {% endblock %}
-                        {% endblock main %}
-                    </main>
-
-                    {% if has_sidebar %}
-                    {% comment %}Translators: main sidebar {% endcomment %}
-                    <aside class="column is-one-third-desktop">
-                        {# FIXME: block cover into sidebar one #}
-                        {% block cover %}
-                        {% if page and page.cover %}
-                        <img class="cover mb-4" src="{{ page.cover.url }}" class="cover"/>
-                        {% endif %}
-                        {% endblock %}
-
-                        {% with is_thin=True %}
-                        {% block sidebar %}
-                        {% 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 %}{% translate "Recently" %}{% endblock %}
-                            </h4>
-                            {% include "aircox/widgets/page_list.html" %}
-                        {% endwith %}
-                        {% endwith %}
-                        {% endwith %}
-                        {% endif %}
-                        </section>
-                        {% endblock %}
-                        {% endwith %}
-                    </aside>
                     {% endif %}
-                </div>
+                {% endblock %}
-            </div>
+                </header>
 
-            <hr>
+                {% block content-container %}
+                <div class="container content">
+                {% block content %}
+                    {% if page and page.content %}
+                    <section class="page-content mb-2">{{ page.content|safe }}</section>
+                    {% endif %}
+                {% endblock %}
+                </div>
+                {% endblock %}
+            {% endblock %}
+            </main>
+            {% endblock %}
         </div>
         {% block player-container %}
         <div id="player">{% include "aircox/widgets/player.html" %}</div>

aircox/templates/aircox/basepage_list.html

@@ -22,20 +22,22 @@
     {{ station.name }}
 {% endblock %}
 
-{% block main %}{{ block.super }}
+{% block content-container %}
+{{ block.super }}
+<div class="container">
 
 {% block before_list %}{% endblock %}
 
 <section role="list">
 {% block pages_list %}
 {% with has_headline=True %}
-{% for object in object_list %}
+    {% for object in object_list %}
-{% block list_object %}
+        {% block list_object %}
-{% include object.item_template_name|default:item_template_name %}
+            {% page_widget item_widget|default:"item" object %}
-{% endblock %}
+        {% endblock %}
-{% empty %}
+    {% empty %}
-{% blocktranslate %}There is nothing published here...{% endblocktranslate %}
+        {% blocktranslate %}There is nothing published here...{% endblocktranslate %}
-{% endfor %}
+    {% endfor %}
 {% endwith %}
 {% endblock %}
 </section>
@@ -83,4 +85,5 @@
 {% endwith %}
 {% endif %}
 
+</div>
 {% endblock %}

aircox/templates/aircox/diffusion_list.html

@@ -12,18 +12,24 @@
 {% endif %}
 {% endblock %}
 
-{% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}
+{% block filters-item %}
+<span class="control">
+    <input type="date">
+</span>
+{% endblock %}
 
-{% block before_list %}
+{% block header %}
-{% with "diffusion-list" as url_name %}
+{% with "./widgets/diffusion_list_header.html" as header_template_name %}
-{% include "aircox/widgets/dates_menu.html" %}
+    {{ block.super }}
 {% endwith %}
 {% endblock %}
 
 {% block pages_list %}
 {% with hide_schedule=True %}
-<section role="list">
+<section role="list" class="list">
-    {% include 'aircox/widgets/diffusion_list.html' %}
+    {% for object in object_list %}
+    {% page_widget "item" object.episode diffusion=object timetable=True %}
+    {% endfor %}
 </section>
 {% endwith %}
 {% endblock %}

aircox/templates/aircox/episode_detail.html

@@ -2,79 +2,45 @@
 {% comment %}List of a show's episodes for a specific{% endcomment %}
 {% load i18n aircox %}
 
-{% include "aircox/program_sidebar.html" %}
-
 
 {% block content %}
 <a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
 <template v-slot="{podcasts,page}">
-{{ block.super }}
+    {{ block.super }}
 
-{% if object.podcasts %}
+    {% if tracks %}
-<section>
+    <section>
-    <a-playlist v-if="page" :set="podcasts"
+        <h3 class="title is-3">{% translate "Playlist" %}</h3>
-        name="{{ page.title }}"
+        <table class="table is-hoverable is-fullwidth">
-        list-class="menu-list" item-class="menu-item"
+            <tbody>
-        :player="player" :actions="['play']"
+                {% for track in tracks %}
-        @select="player.playItems('queue', $event.item)">
+                <tr>
-        <template v-slot:header>
+                    <td>{{ forloop.counter }}</td>
-            <h4 class="title is-4">{% translate "Podcasts" %}</h4>
+                    <td>{{ track.artist }}</td>
-        </template>
+                    <td>{{ track.title }}</td>
-    </a-playlist>
+                    <td>{{ track.info|default:"" }}</td>
-    {% comment %}
+                </tr>
-    {% for object in podcasts %}
+                {% endfor %}
-    {% include "aircox/widgets/podcast_item.html" %}
+            </tbody>
-    {% endfor %}
+        </table>
-    {% endcomment %}
+        <ol>
-</section>
+        </ol>
-{% endif %}
+    </section>
+    {% endif %}
 
-{% if tracks %}
+    {% if object.podcasts %}
-<section>
+    <section>
-    <h4 class="title is-4">{% translate "Playlist" %}</h4>
+        <a-playlist v-if="page" :set="podcasts"
-    <ol>
+            name="{{ page.title }}"
-        {% for track in tracks %}
+            list-class="menu-list" item-class="menu-item"
-        <li><span>{{ track.title }}</span>
+            :player="player" :actions="['play']"
-            <span class="has-text-grey-dark has-text-weight-light">
+            @select="player.playItems('queue', $event.item)">
-            &mdash; {{ track.artist }}
+            <template v-slot:header>
-            {% if track.info %}(<i>{{ track.info }}</i>){% endif %}
+                <h3 class="title is-3">{% translate "Podcasts" %}</h3>
-            </span>
+            </template>
-        </li>
+        </a-playlist>
-        {% endfor %}
+    </section>
-    </ol>
+    {% endif %}
-</section>
+</template>
-{% endif %}
+</a-episode>
-
-</template></a-episode>
-{% endblock %}
-
-{% block sidebar %}
-<section>
-    <h4 class="title is-4">{% translate "Diffusions" %}</h4>
-    <ul>
-    {% for diffusion in object.diffusion_set.all %}
-    <li>
-        {% with diffusion.start as start %}
-        {% with diffusion.end as end %}
-        <time datetime="{{ start }}">{{ start|date:"D. d F Y, H:i" }}</time>
-        &mdash;
-        <time datetime="{{ end }}">{{ end|date:"H:i" }}</time>
-        {% endwith %}
-        {% endwith %}
-
-        <small>
-            {% if diffusion.initial %}
-            {% with diffusion.initial.date as date %}
-            <span title="{% blocktranslate %}Rerun of {{ date }}{% endblocktranslate %}">
-                ({% translate "rerun" %})
-            </span>
-            {% endwith %}
-            {% endif %}
-        </small>
-        <br>
-    </li>
-    {% endfor %}
-    </ul>
-</section>
-{{ block.super }}
 {% endblock %}

aircox/templates/aircox/home.html

@@ -1,65 +1,46 @@
 {% extends "aircox/page_list.html" %}
 {% comment %}Home page{% endcomment %}
-{% load i18n %}
+{% load i18n aircox %}
 
 {% block head_title %}{{ station.name }}{% endblock %}
 
-{% block title %}
-{% if not page or not page.title %}{{ station.name }}
-{% else %}{{ block.super }}
-{% endif %}
-{% endblock %}
 
-{% block before_list %}{% endblock %}
+{% block content-container %}
-
-{% block pages_list %}
-{% if page and page.content %}<hr/>{% endif %}
 {% if next_diffs %}
-<div class="columns">
+<section class="container card-grid">
-    {% with render_card=True %}
+    {% for obj in next_diffs|slice:"1:4" %}
-    {% for object in next_diffs %}
+        {% if object != diffusion %}
-    {% with is_primary=object.is_now %}
+            {% page_widget "card" obj.episode diffusion=obj timetable=True %}
-    <div class="column is-relative">
+        {% endif %}
-        <h4 class="card-super-title" title="{{ object.start }}">
-            {% if is_primary %}
-                <span class="fas fa-play"></span>
-                <time datetime="{{ object.start }}">
-                    {% translate "Currently" %}
-                </time>
-            {% else %}
-                {{ object.start|date:"H:i" }}
-            {% endif %}
-
-            {% if object.episode.category %}
-            // {{ object.episode.category.title }}
-            {% endif %}
-        </h4>
-        {% include object.item_template_name %}
-    </div>
-    {% endwith %}
     {% endfor %}
-    {% endwith %}
-</div>
-{% endif %}
-
-{% if object_list %}
-<h4 class="title is-4">{% translate "Today" %}</h4>
-<section role="list">
-    {% include 'aircox/widgets/diffusion_list.html' %}
 </section>
 {% endif %}
+
+
+{% if object_list %}
+<section class="container">
+    <h2 class="title is-3 p-2">
+        {% with station.name as station %}
+            {% blocktrans %}
+            Today on {{ station }}
+            {% endblocktrans %}
+        {% endwith %}
+    </h2>
+
+    <div role="list">
+        {% for object in object_list %}
+        {% page_widget "item" object.episode diffusion=object timetable=True open=True %}
+        {% endfor %}
+    </div>
+</section>
+
+{% endif %}
 {% endblock %}
 
-{% block pagination %}
+
-<ul class="pagination-list">
+
-    <li>
+
-        <a href="{% url "page-list" %}" class="pagination-link"
+{% block pages_list %}{% endblock %}
-            aria-label="{% translate "Show all publication" %}">
-            {% translate "More publications..." %}
-        </a>
-    </li>
-</ul>
-{% endblock %}
 
 
 {% block sidebar %}

aircox/templates/aircox/log_list.html

@@ -15,15 +15,29 @@
 
 {% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}
 
-{% block before_list %}
+{% block header %}
-{% with "log-list" as url_name %}
+{% with "./widgets/log_list_header.html" as header_template_name %}
-{% include "aircox/widgets/dates_menu.html" %}
+    {{ block.super }}
 {% endwith %}
 {% endblock %}
 
-{% block pages_list %}
+{% block pages_list_ %}
 <section>
     {# <h4 class="subtitle size-4">{{ date }}</h4> #}
     {% include "aircox/widgets/log_list.html" %}
 </section>
 {% endblock %}
+
+{% block pages_list %}
+{% with hide_schedule=True %}
+<section role="list" class="list">
+    {% for object in object_list %}
+    {% if object.episode %}
+        {% page_widget "item" object.episode diffusion=object timetable=True %}
+    {% else %}
+        {% page_widget "item" object timetable=True %}
+    {% endif %}
+    {% endfor %}
+</section>
+{% endwith %}
+{% endblock %}

aircox/templates/aircox/page_detail.html

@@ -33,7 +33,7 @@ Context:
 
 {% block comments %}
 {% if comments or comment_form %}
-<section class="mt-6">
+<section class="container mt-6">
     <h4 class="title is-4">{% translate "Comments" %}</h4>
 
     {% for comment in comments %}

aircox/templates/aircox/page_list.html

@@ -2,11 +2,48 @@
 {% comment %}Display a list of Pages{% endcomment %}
 {% load i18n aircox %}
 
-{% block before_list %}
+{% block header %}
-{{ block.super }}
+{% if page and not object %}
+    {% with page as object %}
+    {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
 
+{% block before_list %}
 {% if view.has_filters and object_list %}
-<form method="GET" action="" class="media">
+<form method="GET" action="" class="list-filters">
+    <a-dropdown :item-class="dropdown-trigger" :content-class="dropdown-menu">
+        <template #item>
+        {% block filters-item %}
+            <span class="icon">
+                <i class="fa fa-search"></i>
+            </span>
+        {% endblock %}
+        </template>
+
+        <template #default>
+            <div class="dropdown-menu">
+            {% block filters-content %}
+                <div class="dropdown-item">
+                    <div class="field is-grouped is-grouped-right">
+                        <div class="control">
+                            <button class="button is-primary"/>{% translate "Apply" %}</button>
+                        </div>
+                        <div class="control">
+                            <a href="?" class="button is-secondary">{% translate "Reset" %}</a>
+                        </div>
+                    </div>
+                </div>
+            {% endblock %}
+            </div>
+        </template>
+    </a-dropdown>
+</form>
+
+{% comment %}
     <div class="media-content">
         {% block filters %}
         <div class="field is-horizontal">
@@ -48,15 +85,8 @@
         {% endblock %}
     </div>
     <div class="media-right">
-        <div class="field is-grouped is-grouped-right">
-            <div class="control">
-                <button class="button is-primary"/>{% translate "Apply" %}</button>
-            </div>
-            <div class="control">
-                <a href="?" class="button is-secondary">{% translate "Reset" %}</a>
-            </div>
-        </div>
     </div>
+{% endcomment %}
 </form>
 {% endif %}
 {% endblock %}

aircox/templates/aircox/widgets/basepage_card.html

@@ -0,0 +1,48 @@
+{% load i18n %}
+
+{% block outer %}
+<article class="preview preview-card {% if wide %}wide{% endif %}{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}"
+        style="background-image: url({{ object.cover.url }})">
+    {% if with_container %}
+    <div class="container">
+    {% endif %}
+
+    {% block inner %}
+    <header class="headings" >
+    {% block headings %}
+        <div>
+            <h2 class="heading title">{% block title %}{% endblock %}</h2>
+        </div>
+        <div>
+            <span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
+        </div>
+    {% endblock %}
+
+    <summary class="heading-container">
+        {% block content %}
+        {% if content and with_content %}
+        {% autoescape off %}
+            {{ content|striptags|truncatewords:64|linebreaks }}
+        {% endautoescape %}
+        {% endif %}
+        {% endblock %}
+    </summary>
+
+    <div class="actions">
+    {% block actions %}
+        <a class="button btn-hg float-right" href="{{ object.get_absolute_url|escape }}">
+            <span class="icon">
+                <i class="fas fa-external-link"></i>
+            </span>
+            <label>{% translate "More infos" %}</label>
+        </a>
+    {% endblock %}
+    </div>
+    </header>
+    {% endblock %}
+
+    {% if with_container %}
+    </div>
+    {% endif %}
+</article>
+{% endblock %}

aircox/templates/aircox/widgets/basepage_item.html

@@ -11,63 +11,48 @@ Context variables:
 - is_thin (=False): if True, smaller cover and display less info
 {% endcomment %}
 
-{% if render_card %}
+{% block outer %}
-<article class="card {% if is_primary %}is-primary{% endif %}">
+<article class="preview preview-item{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
-    <header class="card-image">
+    {% block inner %}
-        <a href="{{ object.get_absolute_url }}">
+    <header class="headings"
-            <figure class="image is-4by3">
+        style="background-image: url({{ object.cover.url }})">
-                <img src="{% thumbnail object.cover|default:station.default_cover 480x480 %}">
+    {% block headings %}
-            </figure>
+        <div>
-        </a>
+            <span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
+        </div>
+    {% endblock %}
     </header>
-    <div class="card-header">
-        <h4 class="title">
-            <a href="{{ object.get_absolute_url }}">
-                {% block card_title %}{{ object.title }}{% endblock %}
-            </a>
-        </h4>
-    </div>
-</article>
 
+    <div class="">
+        <div>
+            <h2 class="heading title">{% block title %}{% endblock %}</h2>
+        </div>
 
-{% else %}
+        <summary class="heading-container">
-<article class="media item {% block css %}{% endblock%}">
+            {% block content %}
-    {% if has_cover|default_if_none:True %}
+            {% if content and with_content %}
-    <div class="media-left">
+            {% autoescape off %}
-        {% if is_thin %}
+                {{ content|striptags|truncatewords:64|linebreaks }}
-        <img src="{% thumbnail object.cover|default:station.default_cover 64x64 crop=scale %}"
+            {% endautoescape %}
-            class="cover is-tiny">
-        {% else %}
-        <img src="{% thumbnail object.cover|default:station.default_cover 128x128 crop=scale %}"
-            class="cover is-small">
-        {% endif %}
-    </div>
-    {% endif %}
-    <div class="media-content">
-        <h5 class="title is-5 has-text-weight-normal">
-            {% block title %}
-            {% if object.is_published %}
-            <a href="{{ object.get_absolute_url }}">{{ object.title }}</a>
-            {% else %}
-            {{ object.title }}
             {% endif %}
             {% endblock %}
-        </h5>
+        </summary>
-        <div class="subtitle is-6 has-text-weight-light">
-            {% block subtitle %}
-            {% if object.category %}{{ object.category.title }}{% endif %}
-            {% endblock %}
-        </div>
 
-        {% if has_headline|default_if_none:True %}
+        <div class="actions">
-        <div class="headline">
+        {% block actions %}
-        {% block headline %}{{ object.headline }}{% endblock %}
+            <a class="button btn-hg float-right" href="{{ object.get_absolute_url|escape }}">
+                <span class="icon">
+                    <i class="fas fa-external-link"></i>
+                </span>
+                <label>{% translate "More infos" %}</label>
+            </a>
+        {% endblock %}
         </div>
-        {% endif %}
     </div>
+    {% endblock %}
 
-    {% if not no_actions %}
+    {% if with_container %}
-    {% block actions %}{% endblock %}
+    </div>
     {% endif %}
 </article>
-{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/card.html

@@ -0,0 +1,23 @@
+{% load i18n %}
+
+{% block outer %}
+<article class="preview preview-card {% if not cover %}no-cover {% endif %}{% if is_primary %}is-primary{% endif %}{% block container_class %}{% endblock %}"
+        style="background-image: url({{ cover }})">
+    {% block inner %}
+    <header class="headings" >
+    {% block headings %}
+        <div>
+            <a href="{{ url|escape }}" class="heading title">{% block title %}{{ title|default:"" }}{% endblock %}</a>
+        </div>
+        <div>
+            <span class="heading subtitle">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
+        </div>
+    {% endblock %}
+
+    <div class="actions">
+        {% block actions %}{% endblock %}
+    </div>
+    </header>
+    {% endblock %}
+</article>
+{% endblock %}

aircox/templates/aircox/widgets/carousel.html

@@ -0,0 +1,7 @@
+{% load aircox %}
+
+<div class="card-grid">
+{% for object in object_list %}
+{% page_widget "card" object.episode diffusion=object %}
+{% endfor %}
+</div>

aircox/templates/aircox/widgets/dates_menu.html

@@ -11,36 +11,10 @@ An empty date results to a title or a separator
 {% endcomment %}
 {% load i18n %}
 
-<div class="media" role="menu"
+{% for day in dates %}
-        aria-label="{% translate "pick a date" %}">
+<div>
-    <div class="media-content">
+    <a class="heading {% if day == date %}highlight{% endif %}" href="{% url url_name date=day %}">
-        <div class="tabs is-toggle">
+        {{ day|date:"l d" }}
-            <ul>
+    </a>
-                {% for day in dates %}
-                <li class="{% if day == date %}is-active{% endif %}">
-                    <a href="{% url url_name date=day %}">
-                        {{ day|date:"D. d" }}
-                    </a>
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
-
-    <div class="media-right">
-        <form action="{% url url_name %}" method="GET" class="navbar-body"
-                aria-label="{% translate "Jump to date" %}">
-            <div class="field has-addons">
-                <div class="control has-icons-left">
-                    <span class="icon is-small is-left"><span class="far fa-calendar"></span></span>
-                    <input type="{{ date_input|default:"date" }}" class="input date"
-                           name="date" value="{{ date|date:"Y-m-d" }}">
-                </div>
-                <div class="control">
-                    {% comment %}Translators: form button to select a date{% endcomment %}
-                    <button class="button is-primary">{% translate "Go" %}</button>
-                </div>
-            </div>
-        </form>
-    </div>
 </div>
+{% endfor %}

aircox/templates/aircox/widgets/diffusion_card.html

@@ -0,0 +1,10 @@
+{% comment %}
+Context:
+- object: diffusion
+- "episode_item"'s context (except object and diffusion)
+{% endcomment %}
+{% with object as diffusion %}
+{% with object.episode as object %}
+{% include "aircox/widgets/episode_card.html" %}
+{% endwith %}
+{% endwith %}

aircox/templates/aircox/widgets/diffusion_list.html

@@ -3,19 +3,4 @@ Context:
 - object_list: object list
 - date: date for list
 {% endcomment %}
-<table id="timetable{% if date %}-{{ date|date:"Y-m-d" }}{% endif %}" class="timetable">
+{% load aircox %}
-    {% for diffusion in object_list %}
-    <tr class="{% if diffusion.is_now %}has-background-primary{% endif %}">
-        <td class="pr-2 pb-2">
-            <time datetime="{{ diffusion.start|date:"c" }}">
-            {{ diffusion.start|date:"H:i" }} - {{ diffusion.end|date:"H:i" }}
-            </time>
-        </td>
-        <td class="pb-2">
-            {% with diffusion.episode as object %}
-            {% include "aircox/widgets/episode_item.html" %}
-            {% endwith %}
-        </td>
-    </tr>
-    {% endfor %}
-</table>

aircox/templates/aircox/widgets/diffusion_list_header.html

@@ -0,0 +1,15 @@
+{% extends "./header.html" %}
+
+{% block outer %}
+{% with date|date:"l d F Y" as subtitle %}
+{{ block.super }}
+{% endwith %}
+{% endblock %}
+
+
+{% block header-nav %}
+<nav class="column has-text-right">
+    {{ block.super }}
+    {% include "./dates_menu.html" with url_name="diffusion-list" %}
+</nav>
+{% endblock %}

aircox/templates/aircox/widgets/episode.html

@@ -0,0 +1,32 @@
+{% extends "./page.html" %}
+{% load i18n humanize aircox %}
+
+{% block subtitle %}
+{% if diffusion %}
+    {% if timetable %}
+        {{ diffusion.start|date:"g:i" }}
+        —
+        {{ diffusion.end|date:"g:i" }}
+    {% else %}
+        {{ diffusion.start|naturalday }},
+        {{ diffusion.start|date:"g:i" }}
+    {% endif %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block actions %}
+{{ block.super }}
+
+{% if object.sound_set.count %}
+<button class="button action" @click="player.playButtonClick($event)"
+        data-sounds="{{ object.podcasts|json }}">
+    <span class="icon is-small">
+        <span class="fas fa-play"></span>
+    </span>
+    <label>{% translate "Listen" %}</label>
+</button>
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/episode_card.html

@@ -0,0 +1,36 @@
+{% extends "./basepage_card.html" %}
+{% load humanize %}
+
+{% block title %}
+{% if not object.is_published and object.program.is_published %}
+    <a href="{{ object.program.get_absolute_url }}">
+        {{ object.program.title }}
+    </a>
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block class %}
+{% if object.is_now %}is-active{% endif %}
+{% endblock %}
+
+{% block subtitle %}
+{% if diffusion %}
+    {{ diffusion.start|naturalday }},
+    {{ diffusion.start|date:"g:i" }}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block content %}
+{% if not object.content %}
+    {% with object.parent.content as content %}
+    {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/episode_item.html

@@ -1,58 +1,36 @@
-{% extends "aircox/widgets/page_item.html" %}
+{% extends "./basepage_item.html" %}
-{% comment %}
+{% load i18n humanize %}
-List item for an episode.
-
-Context variables:
-- object: episode
-- diffusion: episode's diffusion
-- hide_schedule: if True, do not display start time
-{% endcomment %}
-
-{% load i18n easy_thumbnails_tags aircox %}
 
 {% block title %}
 {% if not object.is_published and object.program.is_published %}
-<a href="{{ object.program.get_absolute_url }}">
+    <a href="{{ object.program.get_absolute_url }}">
-    {{ object.program.title }}
+        {{ object.program.title }}
-    {% if diffusion %}
+    </a>
-    &mdash;
-    {{ diffusion.start|date:"d F" }}
-    {% endif %}
-</a>
 {% else %}
-{{ block.super }}
+    {{ block.super }}
 {% endif %}
 {% endblock %}
 
+{% block class %}
+{% if object.is_now %}is-active{% endif %}
+{% endblock %}
+
 {% block subtitle %}
-{{ block.super }}
-
 {% if diffusion %}
-    {% if not hide_schedule %}
+    {{ diffusion.start|naturalday }},
-    {% if object.category %}&mdash;{% endif %}
+    {{ diffusion.start|date:"g:i" }}
-    <time datetime="{{ diffusion.start|date:"c" }}" title="{{ diffusion.start }}">
+{% else %}
-          {{ diffusion.start|date:"d M, H:i" }}
+    {{ block.super }}
-    </time>
+{% endif %}
-    {% endif %}
+{% endblock %}
 
-    {% if diffusion.initial %}
+
-    {% with diffusion.initial.date as date %}
+{% block content %}
-    <span title="{% blocktranslate %}Rerun of {{ date }}{% endblocktranslate %}">
+{% if not object.content %}
-        {% translate "(rerun)" %}
+    {% with object.parent.content as content %}
-    </span>
+    {{ block.super }}
     {% endwith %}
-    {% endif %}
+{% else %}
-{% endif %}
+    {{ block.super }}
-{% endblock %}
-
-
-{% block actions %}
-{% if object.sound_set.public.count %}
-<button class="button" @click="player.playButtonClick($event)"
-        data-sounds="{{ object.podcasts|json }}">
-    <span class="icon is-small">
-        <span class="fas fa-play"></span>
-    </span>
-</button>
 {% endif %}
 {% endblock %}

aircox/templates/aircox/widgets/header.html

@@ -0,0 +1,23 @@
+{% extends "./card.html" %}
+
+{% block container_class %}wide{% endblock %}
+
+
+{% block headings %}
+<div class="columns">
+    <div class="column">
+        {{ block.super }}
+
+        <section class="heading content">
+            {% block content %}
+            {% if content and with_content %}
+            {% autoescape off %}
+                {{ content|linebreaks }}
+            {% endautoescape %}
+            {% endif %}
+            {% endblock %}
+        </section>
+    </div>
+    {% block header-nav %}{% endblock %}
+</div>
+{% endblock %}

aircox/templates/aircox/widgets/home_header.html

@@ -0,0 +1,38 @@
+{% 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

@@ -0,0 +1,42 @@
+{% load i18n aircox %}
+
+{% block outer %}
+<article class="preview list-item {% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
+{% block inner %}
+
+<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>
+{% endblock %}
+</a>
+
+<div class="media">
+    {% if object.cover %}
+    <div class="media-left preview-cover small"
+        style="background-image: url({{ object.cover.url }})">
+    </div>
+    {% endif %}
+    <div class="media-content">
+        <section class="content">
+            {% block content %}
+            {% if content and with_content %}
+            {% autoescape off %}
+                {{ content|striptags|linebreaks }}
+            {% endautoescape %}
+            {% endif %}
+            {% endblock %}
+        </section>
+
+        <div class="actions is-flex-grow-0">
+            {% block actions %}{% endblock %}
+        </div>
+    </template>
+{% endblock %}
+</div>
+</article>
+{% endblock %}

aircox/templates/aircox/widgets/log.html

@@ -1,3 +1,4 @@
+{% extends "./page.html" %}
 {% load i18n aircox %}
 {% comment %}
 List item for a log, either for a logged track or diffusion (as diffusion).
@@ -11,12 +12,10 @@ for design review.
 
 {% endcomment %}
 
+{% block outer %}
 {% if object|is_diffusion %}
-    {% with object as diffusion %}
+    {% include "./diffusion.html" with object=diffusion.episode %}
-    {% include "aircox/widgets/diffusion_item.html" %}
-    {% endwith %}
 {% else %}
-    {% with object.track as object %}
+    {% include "aircox/widgets/track_item.html" with object=object.track log=object %}
-    {% include "aircox/widgets/track_item.html" %}
-    {% endwith %}
 {% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/log_list.html

@@ -1,30 +0,0 @@
-{% comment %}
-Render list of logs (as widget).
-
-Context:
-- object_list: list of logs to display
-- is_thin: if True, hide some information in order to fit in a thin container
-{% 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 {% if object|is_diffusion and object.is_now %}class="is-selected"{% endif %}>
-        <td>
-            {% if object|is_diffusion %}
-            <time datetime="{{ object.start }}" title="{{ object.start }}">
-                {{ object.start|date:"H:i" }}
-                {% if not is_thin %} - {{ object.end|date:"H:i" }}{% endif %}
-            </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/log_list_header.html

@@ -0,0 +1,15 @@
+{% extends "./header.html" %}
+
+{% block outer %}
+{% with date|date:"l d F Y" as subtitle %}
+{{ block.super }}
+{% endwith %}
+{% endblock %}
+
+
+{% block header-nav %}
+<nav class="column has-text-right">
+    {{ block.super }}
+    {% include "./dates_menu.html" with url_name="log-list" %}
+</nav>
+{% endblock %}

aircox/templates/aircox/widgets/page.html

@@ -0,0 +1,30 @@
+{% extends widget_template %}
+{% load i18n %}
+
+
+{% block outer %}
+{% with object.get_absolute_url as url %}
+{% with object.cover.url as cover %}
+{{ block.super }}
+{% endwith %}
+{% endwith %}
+{% endblock %}
+
+
+{% block title %}
+{% if title %}
+    {{ block.super }}
+{% elif object %}
+    {{ object.display_title }}
+{% endif %}
+{% endblock %}
+
+
+{% block content %}
+{% if content %}
+    {{ content }}
+{% elif object %}
+    {{ block.super }}
+    {{ object.display_headline }}
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/page_card.html

@@ -0,0 +1,13 @@
+{% extends widget|default:"./card.html" %}
+
+{% block outer %}
+{% if object %}
+    {% with content=object.get_display_excerpt() %}
+    {% with title=object.get_display_title() %}
+    {{ block.super }}
+    {% endwith %}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}

aircox/templates/aircox/widgets/page_item.html

@@ -3,3 +3,11 @@
 {% block card_title %}
 {% block title %}{{ block.super }}{% endblock %}
 {% endblock %}
+
+{% block card_subtitle %}
+{% block subtitle %}{{ block.super }}{% endblock %}
+{% endblock %}
+
+{% block card_class %}
+{% block class %}{{ block.super }}{% endblock %}
+{% endblock %}

aircox/templates/aircox/widgets/page_list.html

@@ -5,10 +5,10 @@ Context:
 - object_list: object list
 - list_url: url to complete list page
 {% endcomment %}
-{% load i18n %}
+{% load i18n aircox %}
 
 {% for object in object_list %}
-{% include object.item_template_name %}
+{% widget object.item_template_name %}
 {% endfor %}
 
 {% if list_url %}

aircox/templates/aircox/widgets/track_item.html

@@ -5,9 +5,16 @@ Context:
 - object: track to render
 {% endcomment %}
 
-<span class="has-text-info is-size-5">&#9836;</span>
+<span class="content">
-<span>{{ object.title }}</span>
+    <span class="has-text-info is-size-5">&#9836;</span>
-<span class="has-text-grey-dark has-text-weight-light">
+    {% if log %}
-&mdash; {{ object.artist }}
+    <span>{{ log.date|date:"H:i" }} &mdash; </span>
-{% if object.info %}(<i>{{ object.info }}</i>){% endif %}
+    {% endif %}
+    <span class="has-text-weight-bold">{{ object.title }}</span>
+    {% if object.artist and object.artist != object.title %}
+    <span>
+    &mdash; {{ object.artist }}
+    {% if object.info %}(<i>{{ object.info }}</i>){% endif %}
+    </span>
+    {% endif %}
 </span>

aircox/templates/aircox/widgets/wide.html

@@ -0,0 +1,42 @@
+{% load i18n %}
+
+{% block outer %}
+<article class="preview preview-card columns wide{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
+    {% block inner %}
+    <header class="headings column preview-cover"
+        style="background-image: url({{ object.cover.url }})">
+    {% block headings %}
+        <div>
+            <a href="{{ url|escape }}" class="heading title">{% block title %}{% endblock %}</a>
+        </div>
+        <div>
+            <span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
+        </div>
+    {% endblock %}
+    </header>
+
+    <div class="height-full column">
+        <section class="content headings-container">
+            {% block content %}
+            {% if content and with_content %}
+            {% autoescape off %}
+                {{ content|striptags|linebreaks }}
+            {% endautoescape %}
+            {% endif %}
+            {% endblock %}
+        </section>
+
+        <div class="actions">
+        {% block actions %}
+            <a class="button btn-hg float-right" href="{{ object.get_absolute_url|escape }}">
+                <span class="icon">
+                    <i class="fas fa-external-link"></i>
+                </span>
+                <label>{% translate "More infos" %}</label>
+            </a>
+        {% endblock %}
+        </div>
+    </div>
+    {% endblock %}
+</article>
+{% endblock %}

aircox/templatetags/aircox.py

@@ -3,14 +3,32 @@ import random
 
 from django import template
 from django.contrib.admin.templatetags.admin_urls import admin_urlname
+from django.template.loader import render_to_string
 from django.urls import reverse
 
 from aircox.models import Diffusion, Log
 
+
 random.seed()
 register = template.Library()
 
 
+@register.simple_tag(name="page_widget", takes_context=True)
+def do_page_widget(context, widget, object, dir="aircox/widgets", **ctx):
+    """Render widget for the provided page and context."""
+    ctx["request"] = context["request"]
+    ctx["object"] = object
+    ctx["widget"] = widget
+    ctx["widget_template"] = f"{dir}/{widget}.html"
+    return render_to_string(object.get_template_name(widget), ctx)
+
+
+@register.filter(name="page_template")
+def do_page_template(self, page, component):
+    """For a provided page object and component name, return template name."""
+    return page.get_template(component)
+
+
 @register.filter(name="admin_url")
 def do_admin_url(obj, arg, pass_id=True):
     """Reverse admin url for object."""

aircox/views/base.py

@@ -8,6 +8,7 @@ __all__ = ("BaseView", "BaseAPIView")
 
 
 class BaseView(TemplateResponseMixin, ContextMixin):
+    header_template_name = "aircox/widgets/header.html"
     has_sidebar = True
     """Show side navigation."""
     has_filters = False
@@ -38,6 +39,7 @@ class BaseView(TemplateResponseMixin, ContextMixin):
         kwargs.setdefault("station", self.station)
         kwargs.setdefault("page", self.get_page())
         kwargs.setdefault("has_filters", self.has_filters)
+        kwargs.setdefault("header_template_name", self.header_template_name)
 
         has_sidebar = kwargs.setdefault("has_sidebar", self.has_sidebar)
         if has_sidebar and "sidebar_object_list" not in kwargs:

aircox/views/home.py

@@ -27,14 +27,15 @@ class HomeView(BaseView, ListView):
 
     def get_next_diffs(self):
         now = tz.now()
-        current_diff = Diffusion.objects.on_air().now(now).first()
+        query = Diffusion.objects.on_air().select_related("episode")
-        next_diffs = Diffusion.objects.on_air().after(now)
+        current_diff = query.now(now).first()
+        next_diffs = query.after(now)
         if current_diff:
             diffs = [current_diff] + list(
-                next_diffs.exclude(pk=current_diff.pk)[:2]
+                next_diffs.exclude(pk=current_diff.pk)[:9]
             )
         else:
-            diffs = next_diffs[:3]
+            diffs = next_diffs[:10]
         return diffs
 
     def get_last_publications(self):
@@ -52,8 +53,16 @@ class HomeView(BaseView, ListView):
         return items
 
     def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
+        next_diffs = self.get_next_diffs()
-        context["logs"] = self.get_logs(context["object_list"])
+        current_diff = next_diffs and next_diffs[0]
-        context["next_diffs"] = self.get_next_diffs()
+
-        context["last_publications"] = self.get_last_publications()[:5]
+        kwargs.update(
-        return context
+            {
+                "object": current_diff.episode,
+                "diffusion": current_diff,
+                "logs": self.get_logs(self.object_list),
+                "next_diffs": next_diffs,
+                "last_publications": self.get_last_publications()[:5],
+            }
+        )
+        return super().get_context_data(**kwargs)

assets/package.json

@@ -12,7 +12,8 @@
     "@fortawesome/fontawesome-free": "^6.0.0",
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,7 +21,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "bulma": "^0.9.3",
+    "bulma": "^0.9.4",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.49.9",

assets/src/app.js

@@ -1,13 +1,47 @@
+import 'vue3-carousel/dist/carousel.css'
 import components from './components'
 
+import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
+
 const App = {
     el: '#app',
     delimiters: ['[[', ']]'],
-    components: {...components},
+    components: {
+        ...components,
+        Slide,
+        Carousel,
+        Pagination,
+        Navigation,
+    },
 
     computed: {
         player() { return window.aircox.player; },
     },
+
+    data() {
+        return {
+            carouselBreakpoints: {
+                400: {
+                    itemsToShow: 1
+                },
+                600: {
+                    itemsToShow: 1.75
+                },
+                800: {
+                    itemsToShow: 3
+                },
+                1024: {
+                    itemsToShow: 4
+                },
+                1280: {
+                    itemsToShow: 4
+                },
+                1380: {
+                    itemsToShow: 5
+                },
+            }
+        }
+    }
 }
 
 export const PlayerApp = {

assets/src/assets/styles.scss

@@ -1,5 +1,50 @@
 @charset "utf-8";
 
+
+$font-special: "bagnard";
+$font-special-url: url("assets/Bagnard.otf");
+
+$black: #000;
+$white: #fff;
+
+$mp-1: 0.2em;
+$mp-2: 0.4em;
+$mp-3: 0.8em;
+$mp-4: 1.2em;
+$mp-5: 1.6em;
+$mp-6: 2em;
+$mp-7: 4em;
+
+$text-size-small: 0.6em;
+$text-size-smaller: 0.8em;
+$text-size: 1em;
+$text-size-medium: 1.2em;
+$text-size-bigger: 1.6em;
+$text-size-big: 2em;
+
+$h1-size: 40px;
+$h2-size: 32px;
+$h3-size: 28px;
+$h4-size: 24px;
+$h5-size: 20px;
+$h6-size: 14px;
+
+$weight-light: 100;
+$weight-lighter: 300;
+$weight-normal: 400;
+$weight-bolder: 500;
+$weight-bold: 700;
+
+$screen-very-small: 400px;
+//TODO: switch small & smaller
+$screen-small: 600px;
+$screen-smaller: 800px;
+$screen-normal: 1024px;
+$screen-wider: 1280px;
+$screen-wide: 1380px;
+
+
+
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/sass/components/dropdown.sass";
 
@@ -325,3 +370,324 @@ aside {
     width: 100%;
     border: none;
 }
+
+
+// -- layout
+
+:root {
+    --text-color: black;
+    --highlight-color: rgba(255, 255, 0, 1);
+    --highlight-color-alpha: rgba(255, 255, 0, 0.6);
+    --highlight-color-2: rgb(0, 0, 254);
+    --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
+    --heading-height: 30em;
+    --heading-title-bg-color: rgba(255, 255, 0, 1);
+    --heading-bg-color: var(--highlight-color);
+    --heading-bg-highlight-color: var(--highlight-color-2);
+
+    --preview-media-height: 10em;
+    --preview-media-cover-size: 10em;
+
+    --preview-cover-size: 24em;
+    --preview-cover-small-size: 14em;
+}
+
+.page a {
+    background-color: var(--highlight-color-alpha);
+    color: var(--text-color);
+}
+
+
+// ---- helpers
+.d-inline { display: inline; }
+.d-block { display: block; }
+.d-inline-block { display: inline-block; }
+
+.p-relative { position: relative }
+.p-absolute { position: absolute }
+.p-fixed { position: fixed }
+.p-sticky { position: sticky }
+.p-static { position: static }
+
+.height-full { height: 100%; }
+.flex-push-right { margin-left: auto; }
+
+
+.is-clickable { cursor: pointer; }
+
+// ---- components
+.btn-hg, .btn-outline-hg {
+    border: 0.1em var(--highlight-color) solid;
+    background-color: var(--highlight-color-alpha) !important;
+    border-radius: 0.2em;
+}
+
+
+.button {
+    &.action {
+        border-color: var(--highlight-color-2-alpha);
+        justify-content: center;
+        padding: $mp-2 !important;
+        min-width: 2em;
+
+        .icon { margin: 0em !important; }
+
+        label {
+            margin-left: $mp-2;
+        }
+    }
+
+}
+
+.list-filters {
+    text-align: right;
+}
+
+.content {
+    font-size: $text-size-medium;
+}
+
+
+// ---- items
+
+.preview {
+    position: relative;
+    background-size: cover;
+
+    &.preview-card {
+        &:not(.wide) {
+            max-width: 30em;
+        }
+    }
+
+    &.preview-item {
+        width: 100%;
+    }
+
+    &.columns, .headings.columns {
+        margin: 0em;
+        .column { padding: 0em; }
+    }
+
+    .title {
+        font-weight: $weight-bold;
+        font-size: $text-size-bigger;
+    }
+    .subtitle {
+        font-weight: $weight-bolder;
+        font-size: $text-size-bigger;
+    }
+    .content, .actions {
+        font-size: $text-size-medium;
+    }
+
+    .headings {
+        background-size: cover;
+
+        * { margin: 0em; padding: 0em; }
+
+        a {
+            color: var(--text-color);
+        }
+    }
+}
+
+.heading, .headings-container > * {
+    display: inline-block;
+
+    &:not(:empty) {
+        background-color: var(--heading-bg-color);
+        padding: $mp-1;
+        margin-top: 0em !important;
+        vertical-align: top;
+
+        &.highlight {
+            background-color: var(--heading-bg-highlight-color);
+            color: var(--highlight-color);
+        }
+    }
+
+    &.title {
+        background-color: var(--heading-title-bg-color);
+    }
+}
+
+.actions {
+    &.no-label label {
+        display: none;
+    }
+}
+
+
+
+
+.list-item {
+    width: 100%;
+
+    &:not(:last-child) {
+        margin-bottom: calc($mp-4 / 2);
+    }
+
+    &:not(:first-child) {
+        margin-top: calc($mp-4 / 2);
+    }
+
+    .headings {
+        padding-top: 0em;
+        margin-bottom: $mp-3 !important;
+        background-color: var(--heading-bg-color);
+    }
+
+    .media-content {
+        height: var(--preview-cover-small-size);
+        display: flex;
+        flex-direction: column;
+
+        .content { flex-grow: 1; }
+
+        .actions {
+            flex-grow: 0;
+            text-align: right;
+        }
+    }
+}
+
+
+// ---- cards
+.preview-cover {
+    background-size: cover;
+    height: var(--preview-cover-size);
+    width: var(--preview-cover-size);
+
+    &.small {
+        min-width: unset;
+        height: var(--preview-cover-small-size);
+        width: var(--preview-cover-small-size) !important;
+    }
+}
+
+.preview-card {
+    height: var(--preview-cover-size);
+    min-width: var(--preview-cover-size);
+
+    .card-grid & {
+        min-width: unset;
+    }
+
+    .headings {
+        width: 100%;
+        min-height: 100%;
+
+        padding-top: $mp-3;
+
+        & > div:not(:last-child) {
+            margin-bottom: $mp-3;
+        }
+
+        nav a {
+            font-size: 1em;
+        }
+    }
+
+    .heading {
+        margin-bottom: $mp-3;
+    }
+
+    .actions {
+        position: absolute;
+        bottom: $mp-3;
+        right: $mp-3;
+
+        label {
+            display: none;
+        }
+    }
+}
+
+
+
+.header {
+    background-size: cover;
+
+    .preview {
+        height: var(--heading-height);
+
+        &.no-cover {
+            height: unset;
+        }
+
+        .headings, > .container {
+            width: 100%;
+        }
+
+        > .container, {
+            height: 100%;
+        }
+    }
+
+    .preview-card {
+        max-width: unset;
+    }
+
+    .title {
+        font-size: $h1-size;
+    }
+    .subtitle {
+        font-size: $h2-size;
+    }
+    .content {
+        display: inline !important;
+        font-size: $text-size-medium;
+        font-weight: $weight-bolder;
+        text-align: right;
+
+
+        p {
+            margin-bottom: $mp-3
+        }
+    }
+
+}
+
+
+// -- program grid
+.preview-card {
+    header {
+        .info {
+            float: right;
+        }
+    }
+
+    &.is-active {
+        border-bottom: 1px var(--highlight-color) solid;
+    }
+
+}
+
+
+
+.card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: $mp-4;
+}
+
+@media screen and (max-width: $screen-wide) {
+    .preview:not(.list-item) {
+        height: 20em !important;
+    }
+
+    .card-grid .preview-card {
+        height: 20em;
+    }
+}
+
+@media screen and (max-width: $screen-normal) {
+    .card-grid {
+        grid-template-columns: 1fr 1fr;
+
+        .preview-card:nth-child(3) {
+            display: none;
+        }
+    }
+}

assets/src/components/ACarousel.vue

@@ -0,0 +1,23 @@
+<template>
+  <carousel :items-to-show="1.5">
+    <slot></slot>
+    <template #addons>
+        <navigation />
+        <pagination />
+    </template>
+  </carousel>
+</template>
+
+<script>
+// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Pagination, Navigation } from 'vue3-carousel'
+
+export default {
+  components: {
+    Carousel,
+    Pagination,
+    Navigation,
+  },
+}
+</script>

assets/src/components/ADropdown.vue

@@ -0,0 +1,43 @@
+<template>
+<div>
+    <div :class="itemClass" @click="noButton && toggle()">
+        <slot name="button">
+            <span :class="['float-right', buttonClass]" @click="toggle()">
+                <span class="icon">
+                    <i v-if="!active" :class="buttonIconOpen"></i>
+                    <i v-if="active" :class="buttonIconClose"></i>
+                </span>
+            </span>
+        </slot>
+        <slot name="item"></slot>
+    </div>
+    <div :class="contentClass" v-if="active">
+        <slot></slot>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            "active": this.open,
+        }
+    },
+
+    props: {
+        itemClass: String,
+        buttonClass: String,
+        buttonIconOpen: { type: String, default:"fa fa-angle-down"},
+        buttonIconClose: { type: String, default:"fa fa-angle-up"},
+        contentClass: String,
+        open: {type: Boolean, default: false},
+        noButton: {type: Boolean, default: false},
+    },
+
+    methods: {
+        toggle() {
+            this.active = !this.active
+        }
+    },
+}
+</script>

assets/src/components/index.js

@@ -1,4 +1,5 @@
 import AAutocomplete from './AAutocomplete.vue'
+import ADropdown from "./ADropdown.vue"
 import AEpisode from './AEpisode.vue'
 import AList from './AList.vue'
 import APage from './APage.vue'
@@ -14,7 +15,7 @@ import AStreamer from './AStreamer.vue'
  * Core components
  */
 export const base = {
-    AAutocomplete, AEpisode, AList, APage, APlayer, APlaylist,
+    AAutocomplete, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
     AProgress, ASoundItem,
 }