From b7429e11f0387ef5df1b254b0227a002807061a5 Mon Sep 17 00:00:00 2001
From: Christophe Siraut <d@tobald.eu.org>
Date: Thu, 29 Aug 2024 11:59:49 +0200
Subject: [PATCH] radiocampus: integrate marielle design (step 1)

---
 .../static/radiocampus/radiocampus.css        | 57 ++++++++---
 radiocampus/templates/aircox/page_detail.html | 98 +++++++++++++++++++
 radiocampus/templates/aircox/page_list.html   | 27 +++++
 .../templates/aircox/program_detail.html      | 61 ++++++++++++
 .../templates/aircox/widgets/episode.html     | 71 ++++++++++++++
 .../templates/aircox/widgets/item.html        | 42 ++++++++
 .../templates/aircox/widgets/page.html        | 35 +++++++
 7 files changed, 378 insertions(+), 13 deletions(-)
 create mode 100644 radiocampus/templates/aircox/page_detail.html
 create mode 100644 radiocampus/templates/aircox/page_list.html
 create mode 100644 radiocampus/templates/aircox/program_detail.html
 create mode 100644 radiocampus/templates/aircox/widgets/episode.html
 create mode 100644 radiocampus/templates/aircox/widgets/item.html
 create mode 100644 radiocampus/templates/aircox/widgets/page.html

diff --git a/radiocampus/static/radiocampus/radiocampus.css b/radiocampus/static/radiocampus/radiocampus.css
index dc1f6c5..7acc9dc 100644
--- a/radiocampus/static/radiocampus/radiocampus.css
+++ b/radiocampus/static/radiocampus/radiocampus.css
@@ -11,13 +11,14 @@
     --a-sound-bg: #f6ed80;
     --body-bg: unset;
     --break-color: transparent;
-    --button-bg: #F4F88D;
+    --button-bg: #e9e9ed;
     --button-fg: #222;
     --button-hv-bg: #F4F88D;
     --button-hv-fg: #1d3cab;
     --button-active-fg: white;
     --button-active-bg: #738ef2;
     --heading-font-family: "campus_grotesk";
+    --header-height: 320px;
     --heading-link-hv-fg: #aa217b;
     --heading-hg-fg: #fff;
     --link-fg: #3b47ff;
@@ -29,6 +30,7 @@
     --nav-hv-bg: unset;
     --nav-active-bg: unset;
     --nav-active-fg: white;
+    --preview-title-sz: 21px;
     --text-color: #75124e;
     --text-color-light: #bbb;
 }
@@ -61,6 +63,9 @@ body.home .nav.primary {
 body.yellow {
     background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
 }
+body.yellow :root {
+    --nav-active-fg: #f4f88d;
+}
 body.yellow.home {
     background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
     background-attachment: fixed;
@@ -117,9 +122,26 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
 .a-switch-nav span:hover {
     color: #333;
 }
+a.heading.title {
+    color: black;
+}
+
+a.heading.title:hover {
+    color: var(--link-hv-fg);
+}
 .button, a.button, button.button {
   border: 0;
 }
+.header-cover:not(:only-child) {
+    float: left;
+    margin: 0 1.2rem 1.2rem 0;
+}
+.header.has-cover {
+    min-height: unset;
+}
+.mt-3 {
+    margin-top: unset !important;
+}
 .nav.primary .nav-brand {
     display: none;
 }
@@ -135,9 +157,18 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
 }
 .page section.container {
     margin-top: 0;
-    padding-top: 0.6rem;
+}
+.schedule {
+    background-color: unset;
+    font-size: 0.9em;
+    margin: 0 0.2rem;
+    opacity: 0.6;
+    padding: 0 0.2rem 0.2rem 0.2rem;
 }
 
+.schedules {
+    margin-bottom: 0.4rem !important;
+}
 
 @media screen and (max-width: 400px) {
     body {
@@ -146,6 +177,9 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
 }
 
 @media screen and (max-width: 1024px) {
+    :root {
+        --header-height: 200px;
+    }
     .page {
         margin-top: 0;
         padding-top: var(--nav-primary-height);
@@ -171,18 +205,9 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
     .nav .nav-item {
         color: white !important;
     }
-    body.yellow .nav .nav-item.active {
+    .nav .nav-item.active {
         color: white !important;
     }
-
-    /* yellow theme is not implemented for small screens */
-    body.yellow {
-        background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top/auto 520px;
-    }
-    body.yellow.home {
-        background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
-    }
-
     .navs .nav + .nav {
         flex-grow: 1 !important;
     }
@@ -218,6 +243,13 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
   border-color: transparent !important;
 }
 
+.list-item:not(.wide) .media {
+    padding: 0.2rem;
+}
+
+.media-content .content p, .episode-date {
+    opacity: 0.7;
+}
 
 /*
 .nav-urls .urls a, .nav-urls .urls span {
@@ -262,7 +294,6 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
     padding-left: 12px;
 }
 
-
 .nav.secondary {
     opacity: 0.9;
 }
diff --git a/radiocampus/templates/aircox/page_detail.html b/radiocampus/templates/aircox/page_detail.html
new file mode 100644
index 0000000..10be065
--- /dev/null
+++ b/radiocampus/templates/aircox/page_detail.html
@@ -0,0 +1,98 @@
+{% extends "aircox/public.html" %}
+{% load static i18n humanize honeypot aircox %}
+{% comment %}
+Base template used to display a Page
+
+Context:
+- page: page
+- parent: parent page
+- related_objects: list of object to display as related publications
+- related_url: url to the full list of related_objects
+{% endcomment %}
+
+{% block breadcrumbs %}
+{% if parent %}
+    {% include "./widgets/breadcrumbs.html" with page=parent %}
+    {% if page %}
+    <a href="{% url page.list_url_name parent_slug=parent.slug %}">
+        {{ page|verbose_name:True }}
+    </a>
+    {% endif %}
+{% elif page %}
+    {% include "./widgets/breadcrumbs.html" with page=page no_title=True %}
+{% endif %}
+{% endblock %}
+
+{% block title-container %}
+{{ block.super }}
+{% block page-actions %}
+    {% include "aircox/widgets/page_actions.html" %}
+{% endblock %}
+{% endblock %}
+
+{% block main %}
+{{ block.super }}
+
+{% block episodes %}
+{% endblock %}
+
+{% block related %}
+{% if related_objects %}
+<section class="container">
+    {% with models=object|verbose_name:True %}
+    <h2 class="title is-2">{% blocktranslate %}Related {{models}}{% endblocktranslate %}</h2>
+
+    {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %}
+    {% endwith %}
+</section>
+{% endif %}
+{% endblock %}
+
+{% block comments %}
+{% if comments %}
+<section class="container">
+    <h2 class="title is-2">{% translate "Comments" %}</h2>
+
+    {% for object in comments %}
+    {% page_widget "item" object %}
+    {% endfor %}
+</section>
+{% endif %}
+
+{% if comment_form %}
+<section class="container">
+    <h2 class="title is-2">{% translate "Post a comment" %}</h2>
+    <form method="POST">
+        {% csrf_token %}
+        {% render_honeypot_field "website" %}
+
+        <div class="field">
+            <div class="control">
+                {{ comment_form.content }}
+            </div>
+        </div>
+
+        {% for field in comment_form %}
+        {% if field.name != "content" %}
+        <div class="field is-horizontal">
+            <label class="label">{{ field.label }}</label>
+            <div class="control">{{ field }}</div>
+        </div>
+        {% if field.errors %}
+        <p class="help is-danger">{{ field.errors }}</p>
+        {% endif %}
+        {% if field.help_text %}
+        <p class="help">{{ field.help_text|safe }}</p>
+        {% endif %}
+        {% endif %}
+        {% endfor %}
+
+        <div class="has-text-right">
+            <button type="submit" class="button">{% translate "Post comment" %}</button>
+        </div>
+    </form>
+</section>
+{% endif %}
+
+{% endblock %}
+{% endblock %}
diff --git a/radiocampus/templates/aircox/page_list.html b/radiocampus/templates/aircox/page_list.html
new file mode 100644
index 0000000..48b92a2
--- /dev/null
+++ b/radiocampus/templates/aircox/page_list.html
@@ -0,0 +1,27 @@
+{% extends "aircox/page_list.html" %}
+{% comment %}Display a list of Pages{% endcomment %}
+{% load i18n aircox %}
+
+{% 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 %}
diff --git a/radiocampus/templates/aircox/program_detail.html b/radiocampus/templates/aircox/program_detail.html
new file mode 100644
index 0000000..620a327
--- /dev/null
+++ b/radiocampus/templates/aircox/program_detail.html
@@ -0,0 +1,61 @@
+{% extends "aircox/page_detail.html" %}
+{% comment %}Detail page of a show{% endcomment %}
+{% load i18n aircox %}
+
+{% block content %}
+
+{% with schedules=object.schedule_set.all %}
+{% if object.active and schedules %}
+<header class="schedules mt-3">
+    {% for schedule in schedules %}
+    <div class="schedule">
+        <div class="heading">
+            <span class="day">{{ schedule.get_frequency_display }}</span>
+            {% with schedule.start|date:"H:i" as start %}
+            {% with schedule.end|date:"H:i" as end %}
+            <time datetime="{{ start }}">{{ start }}</time>
+            &mdash;
+            <time datetime="{{ end }}">{{ end }}</time>
+            {% endwith %}
+            {% endwith %}
+            <small>
+                {% if schedule.is_rerun %}
+                {% with schedule.initial.date as date %}
+                <span title="{% blocktranslate %}Rerun of {{ date }}{% endblocktranslate %}">
+                    ({% translate "Rerun" %})
+                </span>
+                {% endwith %}
+                {% endif %}
+            </small>
+        </div>
+    </div>
+    {% endfor %}
+</header>
+{% endif %}
+{% endwith %}
+
+{{ block.super }}
+
+{% endblock %}
+
+
+{% block episodes %}
+{% if episodes %}
+<section class="container">
+    <h2 class="title is-2">{% translate "Last Episodes" %}</h2>
+    {% include "./widgets/carousel.html" with objects=episodes url_name="episode-list" url_parent=object url_label=_("All episodes") %}
+</section>
+{% endif %}
+{% endblock %}
+
+{% block main %}
+{{ block.super }}
+
+{% if articles %}
+<section class="container">
+    <h2 class="title is-2">{% translate "Last Articles" %}</h2>
+    {% include "./widgets/carousel.html" with objects=articles url_name="article-list" url_parent=object url_label=_("All articles") %}
+</section>
+{% endif %}
+
+{% endblock %}
diff --git a/radiocampus/templates/aircox/widgets/episode.html b/radiocampus/templates/aircox/widgets/episode.html
new file mode 100644
index 0000000..69665d6
--- /dev/null
+++ b/radiocampus/templates/aircox/widgets/episode.html
@@ -0,0 +1,71 @@
+{% extends "./page.html" %}
+{% load i18n humanize aircox %}
+
+{% block outer %}
+{% with diffusion.is_now as is_active %}
+    {{ block.super }}
+{% endwith %}
+{% endblock %}
+
+{% block subtitle %}
+{% if diffusion %}
+    {% if timetable %}
+        {{ diffusion.start|date:"H:i" }}
+        &mdash;
+        {{ diffusion.end|date:"H:i" }}
+    {% else %}
+        {{ diffusion.start|naturalday }},
+        {{ diffusion.start|date:"H:i" }}
+    {% endif %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block actions-container %}
+{% if admin and diffusion %}
+<div class="flex-row">
+    <div class="flex-grow-1">
+        {% if diffusion.type == diffusion.TYPE_ON_AIR %}
+        <span class="tag is-info">
+            <span class="icon is-small">
+                {% if diffusion.is_live %}
+                <i class="fa fa-microphone"
+                    title="{% translate "Live diffusion" %}"></i>
+                {% else %}
+                <i class="fa fa-music"
+                    title="{% translate "Differed diffusion" %}"></i>
+                {% endif %}
+            </span>
+            &nbsp;
+            {{ diffusion.get_type_display }}
+        </span>
+        {% elif diffusion.type == diffusion.TYPE_CANCEL %}
+        <span class="tag is-danger">
+            {{ diffusion.get_type_display }}</span>
+        {% elif diffusion.type == diffusion.TYPE_UNCONFIRMED %}
+        <span class="tag is-warning">
+            {{ diffusion.get_type_display }}</span>
+        {% endif %}
+    </div>
+    {{ block.super }}
+</div>
+{% else %}
+{{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block actions %}
+{{ block.super }}
+{% if object.episodesound_set.available.public.count %}
+<button type="button" class="button action" @click="player.playButtonClick($event)"
+        data-sounds="{{ object.podcasts|json }}">
+    <span class="icon is-small">
+        <span class="fas fa-play" title="{% translate "Listen" %}"></span>
+    </span>
+    <!--<label>{% translate "Listen" %}</label> -->
+</button>
+{% endif %}
+
+{% endblock %}
diff --git a/radiocampus/templates/aircox/widgets/item.html b/radiocampus/templates/aircox/widgets/item.html
new file mode 100644
index 0000000..b735e87
--- /dev/null
+++ b/radiocampus/templates/aircox/widgets/item.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">
+    {% 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 %}
diff --git a/radiocampus/templates/aircox/widgets/page.html b/radiocampus/templates/aircox/widgets/page.html
new file mode 100644
index 0000000..7bb5956
--- /dev/null
+++ b/radiocampus/templates/aircox/widgets/page.html
@@ -0,0 +1,35 @@
+{% extends widget_template %}
+{% load i18n aircox %}
+
+
+{% block outer %}
+{% with cover|default:object.cover_url as cover %}
+{% with url|default:object.get_absolute_url as url %}
+{{ block.super }}
+{% endwith %}
+{% endwith %}
+{% endblock %}
+
+
+{% block title %}
+{% if title %}
+    {{ block.super }}
+{% elif object %}
+    {{ object.display_title }}
+{% endif %}
+{% endblock %}
+
+
+{% block content %}
+{% if not content and object %}
+    {% with object.display_headline as content %}
+        {{ block.super }}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+{% block actions %}
+{{ block.super }}
+{% endblock %}