work on design

aircox/models/episode.py

@@ -14,8 +14,6 @@ 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/page.py

@@ -64,6 +64,9 @@ class BasePageQuerySet(InheritanceQuerySet):
     def trash(self):
         return self.filter(status=Page.STATUS_TRASH)
 
+    def by_last(self):
+        return self.order_by("-pub_date")
+
     def parent(self, parent=None, id=None):
         """Return pages having this parent."""
         return (

aircox/static/aircox/css/chunk-common.css

@@ -10901,6 +10901,7 @@ aside .media .subtitle {
   --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);
+  --header-height: 30em;
   --heading-height: 30em;
   --heading-title-bg-color: rgba(255, 255, 0, 1);
   --heading-bg-color: var(--highlight-color);
@@ -10908,12 +10909,21 @@ aside .media .subtitle {
   --preview-media-height: 10em;
   --preview-media-cover-size: 10em;
   --preview-cover-size: 24em;
-  --preview-cover-small-size: 14em;
+  --preview-cover-small-size: 10em;
+  --heading-font-family: default;
 }
 
+h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
+  font-family: var(--heading-font-family);
+}
+
+.page {
+  padding-bottom: 5em;
+}
 .page a {
   background-color: var(--highlight-color-alpha);
-  color: var(--text-color);
+  color: var(--highlight-color-2);
+  text-decoration: none;
 }
 
 .d-inline {
@@ -10967,7 +10977,7 @@ aside .media .subtitle {
 }
 
 .button.action {
-  border-color: var(--highlight-color-2-alpha);
+  background-color: var(--highlight-color);
   justify-content: center;
   padding: 0.4em !important;
   min-width: 2em;
@@ -10978,15 +10988,49 @@ aside .media .subtitle {
 .button.action label {
   margin-left: 0.4em;
 }
+.button .dropdown-trigger {
+  border-radius: 1.5em;
+}
 
 .list-filters {
   text-align: right;
 }
 
-.content {
+.title.is-3 {
+  margin-top: 0.8em;
+}
+
+.content, .navbar-item {
   font-size: 1.2em;
 }
 
+.app-nav .navbar-item {
+  font-size: 1.2em;
+  padding-top: 1.2em;
+  padding-bottom: 1.2em;
+}
+
+.heading, .headings-container > * {
+  display: inline-block;
+}
+.heading:not(:empty), .headings-container > *:not(:empty) {
+  background-color: var(--heading-bg-color);
+  padding: 0.4em;
+  margin-top: 0em !important;
+  vertical-align: top;
+}
+.heading:not(:empty).highlight, .headings-container > *:not(:empty).highlight {
+  background-color: var(--heading-bg-highlight-color);
+  color: var(--highlight-color);
+}
+.heading.title, .headings-container > *.title {
+  background-color: var(--heading-title-bg-color);
+}
+
+.actions.no-label label {
+  display: none;
+}
+
 .preview {
   position: relative;
   background-size: cover;
@@ -11019,33 +11063,14 @@ aside .media .subtitle {
 }
 .preview .headings * {
   margin: 0em;
+}
+.preview .headings .column {
   padding: 0em;
 }
 .preview .headings a {
   color: var(--text-color);
 }
 
-.heading, .headings-container > * {
-  display: inline-block;
-}
-.heading:not(:empty), .headings-container > *:not(:empty) {
-  background-color: var(--heading-bg-color);
-  padding: 0.2em;
-  margin-top: 0em !important;
-  vertical-align: top;
-}
-.heading:not(:empty).highlight, .headings-container > *:not(:empty).highlight {
-  background-color: var(--heading-bg-highlight-color);
-  color: var(--highlight-color);
-}
-.heading.title, .headings-container > *.title {
-  background-color: var(--heading-title-bg-color);
-}
-
-.actions.no-label label {
-  display: none;
-}
-
 .list-item {
   width: 100%;
 }
@@ -11088,23 +11113,12 @@ aside .media .subtitle {
   height: var(--preview-cover-size);
   min-width: var(--preview-cover-size);
 }
+.preview-card:not(.header) {
+  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+}
 .card-grid .preview-card {
   min-width: unset;
 }
-.preview-card .headings {
-  width: 100%;
-  min-height: 100%;
-  padding-top: 0.8em;
-}
-.preview-card .headings > div:not(:last-child) {
-  margin-bottom: 0.8em;
-}
-.preview-card .headings nav a {
-  font-size: 1em;
-}
-.preview-card .heading {
-  margin-bottom: 0.8em;
-}
 .preview-card .actions {
   position: absolute;
   bottom: 0.8em;
@@ -11114,21 +11128,53 @@ aside .media .subtitle {
   display: none;
 }
 
-.header {
+.preview-card-headings {
-  background-size: cover;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 0.8em;
 }
-.header .preview {
+.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
-  height: var(--heading-height);
+  margin-bottom: 0.8em;
 }
-.header .preview.no-cover {
+preview-header:not(.no-cover) .preview-card-headings .heading {
-  height: unset;
+  margin-bottom: 0.8em;
 }
-.header .preview .headings, .header .preview > .container {
+
+.preview-nav {
+  margin-top: 0.8em;
+}
+.preview-nav .nav-item {
+  font-size: 1.6em;
+  font-family: unset;
+  list-style: none;
+  display: inline-block;
+}
+.preview-nav .nav-item:not(:last-child) {
+  margin-right: 0.4em;
+}
+.preview-nav .nav-item a {
+  padding: 0.8em;
+}
+
+.preview-header {
   width: 100%;
 }
-.header .preview > .container {
+.preview-header:not(.no-cover) {
+  min-height: var(--header-height);
+}
+.preview-header.no-cover {
+  height: unset;
+}
+.preview-header .headings, .preview-header > .container {
+  width: 100%;
+}
+.preview-header > .container {
   height: 100%;
 }
+
+.header {
+  background-size: cover;
+}
 .header .preview-card {
   max-width: unset;
 }
@@ -11148,21 +11194,19 @@ aside .media .subtitle {
   margin-bottom: 0.8em;
 }
 
-.preview-card header .info {
-  float: right;
-}
-.preview-card.is-active {
-  border-bottom: 1px var(--highlight-color) solid;
-}
-
 .card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1.2em;
 }
 
+@media screen and (max-width: 1024px) {
+  .page {
+    margin: 0em 1em;
+  }
+}
 @media screen and (max-width: 1380px) {
-  .preview:not(.list-item) {
+  .preview-card:not(.preview-header) {
     height: 20em !important;
   }
   .card-grid .preview-card {

aircox/templates/aircox/base.html

@@ -49,13 +49,8 @@ Usefull context:
         </script>
         <div id="app">
             {% block top-nav-container %}
-            <nav class="navbar" role="navigation" aria-label="main navigation">
+            <nav class="app-nav" role="navigation" aria-label="main navigation">
                 <div class="container">
-                    <div class="navbar-brand">
-                        <a href="/" title="{% translate "Home" %}" class="navbar-item">
-                            <img src="{{ station.logo.url }}" class="logo"/>
-                        </a>
-                    </div>
                     <div class="navbar-menu">
                         <div class="navbar-start">
                             {% block top-nav %}
@@ -65,6 +60,7 @@ Usefull context:
                             {% endfor %}
                             {% endblock %}
                         </div>
+                        {% comment %}
                         <div class="navbar-end">
                             {% block top-nav-tools %}
                             {% endblock %}
@@ -82,6 +78,7 @@ Usefull context:
                             </div>
                             {% endblock %}
                         </div>
+                        {% endcomment %}
                     </div>
                 </div>
             </nav>

aircox/templates/aircox/basepage_list.html

@@ -22,6 +22,7 @@
     {{ station.name }}
 {% endblock %}
 
+
 {% block content-container %}
 {{ block.super }}
 <div class="container">

aircox/templates/aircox/episode_detail.html

@@ -2,6 +2,11 @@
 {% comment %}List of a show's episodes for a specific{% endcomment %}
 {% load i18n aircox %}
 
+{% block header %}
+{% with "aircox/widgets/episode_header.html" as header_template_name %}
+    {{ block.super }}
+{% endwith %}
+{% endblock %}
 
 {% block content %}
 <a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">

aircox/templates/aircox/page_detail.html

@@ -34,8 +34,12 @@ Context:
 {% block comments %}
 {% if comments or comment_form %}
 <section class="container mt-6">
-    <h4 class="title is-4">{% translate "Comments" %}</h4>
+<a-dropdown item-class="title is-3" button-class="button dropdown-trigger">
+    <template #item>
+        {% translate "Comments" %}
+    </template>
 
+    <template #default>
         {% for comment in comments %}
         <div class="media box">
             <div class="media-content">
@@ -83,6 +87,8 @@ Context:
             </div>
         </form>
         {% endif %}
+    </template>
+</a-dropdown>
 </section>
 {% endif %}
 

aircox/templates/aircox/page_list.html

@@ -12,18 +12,12 @@
 {% endif %}
 {% endblock %}
 
-{% block before_list %}
+{% block before_list_ %}
 {% if view.has_filters and object_list %}
 <form method="GET" action="" class="list-filters">
-    <a-dropdown :item-class="dropdown-trigger" :content-class="dropdown-menu">
+    <a-dropdown :item-class="dropdown-trigger"
-        <template #item>
+        button-icon-open="fa-solid fa-bars" button-icon-close="fa-solid fa-bars"
-        {% block filters-item %}
+        :content-class="dropdown-menu">
-            <span class="icon">
-                <i class="fa fa-search"></i>
-            </span>
-        {% endblock %}
-        </template>
-
         <template #default>
             <div class="dropdown-menu">
             {% block filters-content %}

aircox/templates/aircox/program_detail.html

@@ -1,41 +1,51 @@
 {% extends "aircox/page_detail.html" %}
 {% comment %}Detail page of a show{% endcomment %}
-{% load i18n %}
+{% load i18n aircox %}
 
 {% include "aircox/program_sidebar.html" %}
 
 
-{% block header_nav %}
-{% endblock %}
-
-
 {% block content %}
 {{ block.super }}
-<br>
+{% if episodes %}
-{% with has_headline=False %}
-{% if articles %}
 <section>
-    <h4 class="title is-4">{% translate "Articles" %}</h4>
+    <h4 class="title is-3">{% translate "Last Episodes" %}</h4>
-
+    <section class="card-grid">
-    {% for object in articles %}
+        {% for object in episodes|slice:":3" %}
-    {% include "aircox/widgets/page_item.html" %}
+        {% page_widget "card" object %}
         {% endfor %}
+    </section>
 
-    <br>
+    <div class="has-text-right">
-    <nav class="pagination is-centered">
+        <a href="{% url "episode-list" parent_slug=program.slug %}"
-        <ul class="pagination-list">
+            class="button action"
-            <li>
-                <a href="{% url "article-list" parent_slug=program.slug %}"
-                    class="pagination-link"
             aria-label="{% translate "Show all program's articles" %}">
-                    {% translate "More articles" %}
+            {% translate "All episodes" %}
         </a>
-            </li>
+    </div>
-        </ul>
+</section>
-    </nav>
+{% endif %}
+
+
+{% if articles %}
+<section>
+    <h4 class="title is-4">{% translate "Last Articles" %}</h4>
+
+    <section class="card-grid">
+        {% for object in articles|slice:3 %}
+        {% page_widget "card" object %}
+        {% endfor %}
+    </section>
+
+    <div class="has-text-right">
+        <a href="{% url "article-list" parent_slug=program.slug %}"
+            class="button action"
+            aria-label="{% translate "Show all program's articles" %}">
+            {% translate "All articles" %}
+        </a>
+    </div>
 </section>
 {% endif %}
-{% endwith %}
 
 {% endblock %}
 

aircox/templates/aircox/widgets/basepage_card.html

@@ -1,48 +0,0 @@
-{% 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/card.html

@@ -1,23 +1,13 @@
+{% extends "./preview.html" %}
 {% load i18n %}
 
-{% block outer %}
+{% block tag-class %}{{ block.super }} preview-card{% endblock %}
-<article class="preview preview-card {% if not cover %}no-cover {% endif %}{% if is_primary %}is-primary{% endif %}{% block container_class %}{% endblock %}"
+{% block tag-style %}{{ block.super }}{% if cover %} background-image: url({{ cover }});{% endif %}{% endblock %}
-        style="background-image: url({{ cover }})">
+{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
-    {% 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 inner %}
-        {% block actions %}{% endblock %}
+{% block headings-container %}
-    </div>
+    {{ block.super }}
-    </header>
+    {% block actions-container %}{{ block.super }}{% endblock %}
 {% endblock %}
-</article>
 {% endblock %}

aircox/templates/aircox/widgets/dates_menu.html

@@ -12,9 +12,9 @@ An empty date results to a title or a separator
 {% load i18n %}
 
 {% for day in dates %}
-<div>
+<li class="nav-item">
     <a class="heading {% if day == date %}highlight{% endif %}" href="{% url url_name date=day %}">
         {{ day|date:"l d" }}
     </a>
-</div>
+</li>
 {% endfor %}

aircox/templates/aircox/widgets/diffusion_card.html

@@ -1,10 +0,0 @@
-{% 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_header.html

@@ -5,11 +5,3 @@
 {{ 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

@@ -4,12 +4,12 @@
 {% block subtitle %}
 {% if diffusion %}
     {% if timetable %}
-        {{ diffusion.start|date:"g:i" }}
+        {{ diffusion.start|date:"H:i" }}
         —
-        {{ diffusion.end|date:"g:i" }}
+        {{ diffusion.end|date:"H:i" }}
     {% else %}
         {{ diffusion.start|naturalday }},
-        {{ diffusion.start|date:"g:i" }}
+        {{ diffusion.start|date:"H:i" }}
     {% endif %}
 {% else %}
     {{ block.super }}

aircox/templates/aircox/widgets/episode_card.html

@@ -1,36 +0,0 @@
-{% 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/header.html

@@ -1,6 +1,7 @@
 {% extends "./card.html" %}
 
-{% block container_class %}wide{% endblock %}
+{% block tag-class %}preview-header{% endblock %}
+{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
 
 
 {% block headings %}
@@ -9,15 +10,17 @@
         {{ block.super }}
 
         <section class="heading content">
-            {% block content %}
+            {% block content %}{{ block.content }}{% endblock %}
-            {% if content and with_content %}
-            {% autoescape off %}
-                {{ content|linebreaks }}
-            {% endautoescape %}
-            {% endif %}
-            {% endblock %}
         </section>
     </div>
-    {% block header-nav %}{% endblock %}
 </div>
 {% endblock %}
+
+{% block outer %}
+{{ block.super }}
+
+<nav class="preview-nav has-text-right">
+    {% block header-nav %}{% endblock %}
+</nav>
+
+{% endblock %}

aircox/templates/aircox/widgets/log_list_header.html

@@ -8,8 +8,7 @@
 
 
 {% block header-nav %}
-<nav class="column has-text-right">
+<div>
-    {{ block.super }}
     {% include "./dates_menu.html" with url_name="log-list" %}
-</nav>
+</div>
 {% endblock %}

aircox/templates/aircox/widgets/track_item.html

@@ -6,7 +6,7 @@ Context:
 {% endcomment %}
 
 <span class="content">
-    <span class="has-text-info is-size-5">&#9836;</span>
+    <span class="has-text-info">&#9836;</span>
     {% if log %}
     <span>{{ log.date|date:"H:i" }} &mdash; </span>
     {% endif %}

aircox/templates/aircox/widgets/wide.html

@@ -1,42 +1,21 @@
+{% extends "./card.html" %}
 {% load i18n %}
 
-{% block outer %}
+{% block tag_class %}{{ block.super }} wide{% endblock %}
-<article class="preview preview-card columns wide{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
+
 {% block inner %}
+{% block headings-container %}
 <header class="headings column preview-cover"
     style="background-image: url({{ object.cover.url }})">
-    {% block headings %}
+    {% block headings %}{{ block.super }}{% endblock %}
-        <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>
+{% endblock %}
 
 <div class="height-full column">
     <section class="content headings-container">
-            {% block content %}
+        {% block content %}{{ block.super }}{% endblock %}
-            {% if content and with_content %}
-            {% autoescape off %}
-                {{ content|striptags|linebreaks }}
-            {% endautoescape %}
-            {% endif %}
-            {% endblock %}
     </section>
 
-        <div class="actions">
+    {% block actions-container %}{{ block.super }}{% endblock %}
-        {% 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/views/page.py

@@ -43,7 +43,19 @@ class BasePageListView(AttachedToMixin, ParentMixin, BaseView, ListView):
     def get_context_data(self, **kwargs):
         kwargs.setdefault("item_template_name", self.item_template_name)
         kwargs.setdefault("has_headline", self.has_headline)
-        return super().get_context_data(**kwargs)
+        context = super().get_context_data(**kwargs)
+
+        if not context.get("page") and not context.get("title"):
+            model = self.model._meta.verbose_name_plural
+            parent = context.get("parent")
+            if parent:
+                parent = parent.get_display_title()
+                title = _("{model} of {parent}")
+            else:
+                title = _("{model}")
+            context["title"] = title.format(model=model, parent=parent)
+
+        return context
 
 
 class BasePageDetailView(BaseView, DetailView):

aircox/views/program.py

@@ -1,6 +1,6 @@
 from django.urls import reverse
 
-from ..models import Page, Program, StaticPage
+from ..models import Article, Page, Program, StaticPage, Episode
 from .mixins import ParentMixin
 from .page import PageDetailView, PageListView
 
@@ -25,8 +25,20 @@ class BaseProgramMixin:
 class ProgramDetailView(BaseProgramMixin, PageDetailView):
     model = Program
 
-    def get_sidebar_queryset(self):
+    def get_context_data(self, **kwargs):
-        return super().get_sidebar_queryset().filter(parent=self.program)
+        episodes = (
+            Episode.objects.program(self.object)
+            .published()
+            .order_by("-pub_date")
+        )
+        articles = (
+            Article.objects.parent(self.object)
+            .published()
+            .order_by("-pub_date")
+        )
+        return super().get_context_data(
+            articles=articles, episodes=episodes, **kwargs
+        )
 
 
 class ProgramListView(PageListView):

assets/src/assets/styles.scss

@@ -380,6 +380,9 @@ aside {
     --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);
+
+    --header-height: 30em;
+
     --heading-height: 30em;
     --heading-title-bg-color: rgba(255, 255, 0, 1);
     --heading-bg-color: var(--highlight-color);
@@ -389,12 +392,24 @@ aside {
     --preview-media-cover-size: 10em;
 
     --preview-cover-size: 24em;
-    --preview-cover-small-size: 14em;
+    --preview-cover-small-size: 10em;
+
+    --heading-font-family: default;
 }
 
-.page a {
+
+// ---- main theme & layout
+h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
+    font-family: var(--heading-font-family);
+}
+
+.page {
+    padding-bottom: 5em;
+    a {
         background-color: var(--highlight-color-alpha);
-    color: var(--text-color);
+        color: var(--highlight-color-2);
+        text-decoration: none;
+    }
 }
 
 
@@ -415,6 +430,7 @@ aside {
 
 .is-clickable { cursor: pointer; }
 
+
 // ---- components
 .btn-hg, .btn-outline-hg {
     border: 0.1em var(--highlight-color) solid;
@@ -422,10 +438,9 @@ aside {
     border-radius: 0.2em;
 }
 
-
 .button {
     &.action {
-        border-color: var(--highlight-color-2-alpha);
+        background-color: var(--highlight-color);
         justify-content: center;
         padding: $mp-2 !important;
         min-width: 2em;
@@ -437,19 +452,58 @@ aside {
         }
     }
 
+    .dropdown-trigger {
+        border-radius: 1.5em;
     }
+}
+
 
 .list-filters {
     text-align: right;
 }
 
-.content {
+.title.is-3 {
+    margin-top: $mp-3;
+}
+
+.content, .navbar-item {
     font-size: $text-size-medium;
 }
 
+.app-nav .navbar-item {
+    font-size: $text-size-medium;
+    padding-top: $mp-4;
+    padding-bottom: $mp-4;
+}
 
-// ---- items
 
+.heading, .headings-container > * {
+    display: inline-block;
+
+    &:not(:empty) {
+        background-color: var(--heading-bg-color);
+        padding: $mp-2;
+        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;
+    }
+}
+
+// ---- ---- previews & page items
 .preview {
     position: relative;
     background-size: cover;
@@ -484,7 +538,8 @@ aside {
     .headings {
         background-size: cover;
 
-        * { margin: 0em; padding: 0em; }
+        * { margin: 0em; }
+        .column { padding: 0em; }
 
         a {
             color: var(--text-color);
@@ -492,32 +547,6 @@ aside {
     }
 }
 
-.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;
-    }
-}
-
 
 
 
@@ -566,33 +595,19 @@ aside {
     }
 }
 
+
 .preview-card {
     height: var(--preview-cover-size);
     min-width: var(--preview-cover-size);
 
+    &:not(.header) {
+        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
+    }
+
     .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;
@@ -606,11 +621,50 @@ aside {
 
 
 
-.header {
+.preview-card-headings {
-    background-size: cover;
+    width: 100%;
+    min-height: 100%;
 
-    .preview {
+    padding-top: $mp-3;
-        height: var(--heading-height);
+
+    & > div:not(:last-child),
+    & .column > div {
+        margin-bottom: $mp-3;
+    }
+
+    preview-header:not(.no-cover) & .heading {
+        margin-bottom: $mp-3;
+    }
+
+}
+
+
+.preview-nav {
+    margin-top: $mp-3;
+
+    .nav-item {
+        font-size: $text-size-bigger;
+        font-family: unset;
+        list-style: none;
+        display: inline-block;
+
+        &:not(:last-child) {
+            margin-right: $mp-2;
+        }
+
+        a {
+            padding: $mp-3;
+        }
+    }
+}
+
+
+.preview-header {
+    width: 100%;
+
+    &:not(.no-cover) {
+        min-height: var(--header-height);
+    }
 
     &.no-cover {
         height: unset;
@@ -625,6 +679,10 @@ aside {
     }
 }
 
+
+.header {
+    background-size: cover;
+
     .preview-card {
         max-width: unset;
     }
@@ -651,19 +709,6 @@ aside {
 
 
 // -- program grid
-.preview-card {
-    header {
-        .info {
-            float: right;
-        }
-    }
-
-    &.is-active {
-        border-bottom: 1px var(--highlight-color) solid;
-    }
-
-}
-
 
 
 .card-grid {
@@ -672,8 +717,14 @@ aside {
     gap: $mp-4;
 }
 
+@media screen and (max-width: $screen-normal) {
+    .page {
+        margin: 0em 1em;
+    }
+}
+
 @media screen and (max-width: $screen-wide) {
-    .preview:not(.list-item) {
+    .preview-card:not(.preview-header) {
         height: 20em !important;
     }
 

assets/src/components/ADropdown.vue

@@ -1,15 +1,19 @@
 <template>
 <div>
-    <div :class="itemClass" @click="noButton && toggle()">
+    <div :class="['a-dropdown', itemClass, active ? activeClass : '']"
+            style="display: flex; flex-direction: row"
+            @click="noButton && toggle()">
+        <div style="flex:auto">
+            <slot name="item"></slot>
+        </div>
         <slot name="button">
-            <span :class="['float-right', buttonClass]" @click="toggle()">
+            <span :class="[buttonClass]" style="flex-grow:0" @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>
@@ -20,12 +24,13 @@
 export default {
     data() {
         return {
-            "active": this.open,
+            active: this.open,
         }
     },
 
     props: {
         itemClass: String,
+        activeClass: {type: String, default: "is-active"},
         buttonClass: String,
         buttonIconOpen: { type: String, default:"fa fa-angle-down"},
         buttonIconClose: { type: String, default:"fa fa-angle-up"},

instance/settings/base.py

@@ -189,6 +189,7 @@ THUMBNAIL_PROCESSORS = (
 
 # Enabled applications
 INSTALLED_APPS = (
+    "radiocampus",
     "aircox.apps.AircoxConfig",
     "aircox.apps.AircoxAdminConfig",
     "aircox_streamer.apps.AircoxStreamerConfig",