radiocampus: integrate marielle design, episodes page

radiocampus/static/radiocampus/radiocampus.css

@@ -17,6 +17,8 @@
     --button-hv-fg: #1d3cab;
     --button-active-fg: white;
     --button-active-bg: #738ef2;
+    --cover-small-h: 10rem;
+    --cover-small-w: 10rem;
     --heading-font-family: "campus_grotesk";
     --header-height: 320px;
     --heading-link-hv-fg: #aa217b;
@@ -139,6 +141,15 @@ a.heading.title:hover {
 .header.has-cover {
     min-height: unset;
 }
+.grid.listfive {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-auto-flow: dense;
+    gap: 0.2rem;
+}
+.grid.listfive .media-content {
+    margin-top: 0.4rem;
+    font-size: 0.84rem;
+}
 .today {
    color:  yellow;
    font-size: 1.4em !important;
@@ -162,6 +173,10 @@ a.heading.title:hover {
 .page section.container {
     margin-top: 0;
 }
+.program-list {
+    flex-direction: column;
+}
+
 .radiocampus-grid {
     display: block;
 }
@@ -217,6 +232,7 @@ a.heading.title:hover {
     }
 }
 
+
 @media screen and (max-width: 1024px) {
     :root {
         --header-height: 200px;
@@ -237,6 +253,9 @@ a.heading.title:hover {
     .dropdown.is-right .dropdown-menu {
         left: 0;
     }
+    .grid.listfive {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
     #grandlogo {
         display: none;
     }
@@ -276,6 +295,12 @@ a.heading.title:hover {
     }
 }
 
+@media screen and (max-width: 900px) {
+  .grid.listfive {
+        grid-template-columns: 1fr 1fr;
+  }
+}
+
 .list-item .headings {
     margin-bottom: .2rem !important;
 }

radiocampus/templates/aircox/page_list.html

@@ -1,12 +1,46 @@
-{% extends "aircox/page_list.html" %}
+{% extends "aircox/basepage_list.html" %}
 {% comment %}Display a list of Pages{% endcomment %}
 {% load i18n aircox %}
 
+{% block secondary-nav %}
+{% if not parent and categories %}
+<nav class="nav secondary">
+    <div class="nav-menu nav-categories">
+        {% for cat in categories %}
+        <a class="nav-item{% if cat == category %} active{% endif %}"
+            href="{% url request.resolver_match.url_name category_slug=cat.slug %}">
+            {{ cat.title }}
+        </a>
+        {% endfor %}
+    </div>
+    <a-switch class="button burger"
+        el=".nav-categories" group="nav" icon="fas fa-tags"
+        aria-label="{% translate "Categories" %}">
+    </a-switch>
+</nav>
+{% endif %}
+{% endblock %}
+
+{% block title %}
+{% if parent %}{{ parent.title }}
+{% else %}{{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block header %}
+{% if page and not object %}
+    {% with page as object %}
+    {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
 {% block breadcrumbs %}
 {% if parent and model.list_url_name %}
     {% include "./widgets/breadcrumbs.html" with page=parent %}
     <a href="{% url model.list_url_name %}">{{ model|verbose_name:True }}</a>
-{% elif page.title == "Podcasts" and not category %}
 {% elif page and model.list_url_name %}
     <a href="{% url model.list_url_name %}">{{ page.title }}</a>
     {% if category %}
@@ -25,3 +59,24 @@
 {% endblock %}
 
 {% block content-container %}{% endblock %}
+
+{% block list-pagination %}
+{% include "./widgets/page_pagination.html" %}
+{% endblock %}
+
+{% block list-container %}
+<section class="container clear-both list grid {{ list_class|default:"" }} listfive" role="list">
+{% block list %}
+{% with has_headline=True %}
+    {% for object in object_list %}
+        {% block list_object %}
+            {% page_widget item_widget|default:"program" object %}
+        {% endblock %}
+    {% empty %}
+        {% blocktranslate %}There is nothing published here...{% endblocktranslate %}
+    {% endfor %}
+{% endwith %}
+{% endblock %}
+</section>
+
+{% endblock %}

radiocampus/templates/aircox/podcast_list.html

@@ -0,0 +1,62 @@
+{% extends "aircox/basepage_list.html" %}
+{% comment %}Display a list of Pages{% endcomment %}
+{% load i18n aircox %}
+
+{% block secondary-nav %}
+{% if not parent and categories %}
+<nav class="nav secondary">
+    <div class="nav-menu nav-categories">
+        {% for cat in categories %}
+        <a class="nav-item{% if cat == category %} active{% endif %}"
+            href="{% url request.resolver_match.url_name category_slug=cat.slug %}">
+            {{ cat.title }}
+        </a>
+        {% endfor %}
+    </div>
+    <a-switch class="button burger"
+        el=".nav-categories" group="nav" icon="fas fa-tags"
+        aria-label="{% translate "Categories" %}">
+    </a-switch>
+</nav>
+{% endif %}
+{% endblock %}
+
+{% block title %}
+{% if parent %}{{ parent.title }}
+{% else %}{{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block header %}
+{% if page and not object %}
+    {% with page as object %}
+    {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block breadcrumbs %}
+{% if parent and model.list_url_name %}
+    {% include "./widgets/breadcrumbs.html" with page=parent %}
+    <a href="{% url model.list_url_name %}">{{ model|verbose_name:True }}</a>
+{% elif page.title == "Podcasts" and not category %}
+{% elif page and model.list_url_name %}
+    <a href="{% url model.list_url_name %}">{{ page.title }}</a>
+    {% if category %}
+    <a href="{% url request.resolver_match.url_name category_slug=category.slug %}">
+        {{ category.title }}
+    </a>
+    {% endif %}
+{% else %}
+    <a href="{% url request.resolver_match.url_name %}">{{ model|verbose_name:True }}</a>
+    {% if category %}
+    <a href="{% url request.resolver_match.url_name category_slug=category.slug %}">
+        {{ category.title }}
+    </a>
+    {% endif %}
+{% endif %}
+{% endblock %}
+
+{% block content-container %}{% endblock %}

radiocampus/templates/aircox/widgets/program.html

@@ -0,0 +1,42 @@
+{% extends "./preview.html" %}
+{% load i18n aircox %}
+
+{% block tag-class %}{{ block.super }} list-item is-fullwidth{% endblock %}
+
+{% block headings %}
+{% endblock %}
+
+{% block inner %}
+{% block headings-container %}{{ block.super }}{% endblock %}
+{% block content-container %}
+<div class="media program-list">
+    {% if object.cover and not no_cover %}
+    <a href="{{ object.get_absolute_url }}"
+        class="media-left preview-cover small"
+        style="background-image: url({{ object.cover.url }})">
+    </a>
+    {% endif %}
+    <div class="media-content flex-column">
+
+        {% if object|model_name == "Episode" %}
+        <div class="episode-date">
+        {{ object.pub_date|date:"d/m/Y" }}<Br/>
+        </div>
+        {% endif %}
+    <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">
+        {% block title %}{{ title|default:"" }}{% endblock %}
+    </a>
+    <span class="heading subtitle {% block subtitle-class %}{% endblock %}">
+        {% block subtitle %}{{ subtitle|default:"" }}{% endblock %}
+    </span>
+    </br>
+
+        <section class="content flex-grow-1">
+            {% block content %}{{ block.super }}{% endblock %}
+        </section>
+        {% block actions-container %}{{ block.super }}{% endblock %}
+    </div>
+</div>
+{% endblock %}
+
+{% endblock %}