From efac8997f26abb4263b6f3d991950b83ea270cb8 Mon Sep 17 00:00:00 2001
From: Christophe Siraut <d@tobald.eu.org>
Date: Tue, 24 Sep 2024 15:10:50 +0200
Subject: [PATCH] radiocampus: misc adjustments

---
 .../static/radiocampus/radiocampus.css        | 55 +++++++++-----
 radiocampus/templates/aircox/base.html        |  8 ++-
 .../templates/aircox/episode_list.html        | 19 +++++
 radiocampus/templates/aircox/home.html        | 10 ++-
 radiocampus/templates/aircox/public.html      |  3 +-
 .../templates/aircox/timetable_list.html      |  2 +-
 .../templates/aircox/widgets/item.html        |  2 +-
 .../templates/aircox/widgets/preview.html     | 71 +++++++++++++++++++
 8 files changed, 145 insertions(+), 25 deletions(-)
 create mode 100644 radiocampus/templates/aircox/widgets/preview.html

diff --git a/radiocampus/static/radiocampus/radiocampus.css b/radiocampus/static/radiocampus/radiocampus.css
index 509cbd4..4a9f3e1 100644
--- a/radiocampus/static/radiocampus/radiocampus.css
+++ b/radiocampus/static/radiocampus/radiocampus.css
@@ -93,6 +93,7 @@ body.yellow.home #grandlogo img {
 }
 body.yellow .nav .nav-item.active {
     color: #738EF2 !important;
+    text-shadow: -3px 3px 17px rgb(0, 48, 111);
 }
 body.blue #grandlogo img, body.yellow #grandlogo img {
     width: 120px;
@@ -104,11 +105,10 @@ body.blue.home #grandlogo, body.yellow.home #grandlogo {
 }
 body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
     margin: 12px auto 0 auto;
-    width: 960px;
+    width: 100%;
     opacity: 0.8;
 }
 
-
 .a-player-bar {
     border-top: 1px solid #555;
 }
@@ -129,7 +129,8 @@ a.heading.title {
 }
 
 a.heading.title:hover {
-    color: var(--link-hv-fg);
+    /*color: var(--link-hv-fg); */
+    color: #738ef2;
 }
 .button, a.button, button.button {
   border: 0;
@@ -141,6 +142,10 @@ a.heading.title:hover {
 .header.has-cover {
     min-height: unset;
 }
+.item-section {display:flex; align-items:end}
+.fifty {
+    width: 55%;
+}
 .grid.list-emissions {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     grid-auto-flow: dense;
@@ -157,7 +162,7 @@ a.heading.title:hover {
     border-bottom: 1px solid black;
 }
 .lagrille .category {
-    color: grey;
+    color: white;
     margin-left: 10px;
     vertical-align: text-bottom;
     font-size: 0.8rem;
@@ -297,7 +302,7 @@ a.nav-item:hover {
 @media screen and (min-width: 1216px) {
     .container:not(.is-max-desktop):not(.is-max-widescreen) {
         max-width: unset;
-        margin: 10px 64px;
+        margin: 0 64px;
     }
     body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
         max-width: 1152px;
@@ -450,17 +455,19 @@ a.nav-item:hover {
 /* fred fixes */
 .grid.list-emissions:not(.list-home) {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}
 
-.grid.list-emissions:not(.list-home) > .list-item {width: calc(25% - 2rem) !important ;}
+.grid.list-emissions:not(.list-home) > .list-item {width: calc(20% - 2rem) !important ;}
 
 .grid.list-emissions:not(.list-home) > .list-item .preview-cover {max-width: 100% !important;
     display: block;
-    width: 50% !important;
+    width: 100% !important;
     min-width: auto;
     aspect-ratio: 1 / 1;
     height: fit-content;
-background-size: contain;
-background-position: center;
-background-color: white;}
+    background-size: contain;
+    background-position: center;
+    background-color: white;
+    margin-bottom: 0.5rem;
+}
 
 .grid.list-emissions:not(.list-home) .media-content {margin-top: 0;}
 
@@ -483,9 +490,10 @@ background-color: white;}
     min-width: auto;
     aspect-ratio: 1 / 1;
     height: fit-content;
-background-size: contain;
-background-position: center;
-background-color: white;}
+    background-size: contain;
+    background-position: center;
+    background-color: white;
+}
 
 .grid.list-podcasts .media-content {margin-top: 0;}
 
@@ -502,16 +510,16 @@ background-color: white;}
 }
 
 @media screen and (max-width: 1224px) {
-.grid.list-emissions > .list-item {width: calc(33% - 2rem) !important;;}
+.grid.list-emissions:not(.list-home) > .list-item {width: calc(33% - 2rem) !important;;}
 }
 
 @media screen and (max-width: 924px) {
-    .grid.list-emissions > .list-item {width: calc(50% - 2rem) !important;}
+    .grid.list-emissions:not(.list-home) > .list-item {width: calc(50% - 2rem) !important;}
 }
 
-@media screen and (max-width: 690px) {
+@media screen and (max-width: 1024px) {
     .grid.list-emissions > .list-item {width: 100% !important;}
-    .program-list {flex-direction: row;}
+    .program-list {flex-direction: column;}
     .grid.list-podcasts > .list-item {width: 100% !important ;}
 }
 
@@ -538,3 +546,16 @@ background-color: white;}
           }
   }
 }
+
+@media screen and (max-width: 540px) {
+    .media {
+      flex-direction: column;
+    }
+    .grid.list-podcasts .media .media-content {width:100%}
+
+  .grid.list-emissions:not(.list-home) > .list-item {
+   width: 100% !important;
+  }
+}
+
+.list-item .media-content {height:auto;}
diff --git a/radiocampus/templates/aircox/base.html b/radiocampus/templates/aircox/base.html
index 3a2dc1c..5aad1f5 100644
--- a/radiocampus/templates/aircox/base.html
+++ b/radiocampus/templates/aircox/base.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block nav %}
-<div id="grandlogo"><a href="/"><img /></a></div>
+<div id="grandlogo" class="container"><a href="/"><img /></a></div>
 {{ block.super }}
 {% endblock %}
 
@@ -17,3 +17,9 @@
 {{ block.super }}
 {% endif %}
 {% endblock %}
+
+{% block header-cover %}
+{% if cover and not "emissions/episodes" in request.path %}
+<img src="{{ cover }}" ref="cover" class="cover">
+{% endif %}
+{% endblock %}
diff --git a/radiocampus/templates/aircox/episode_list.html b/radiocampus/templates/aircox/episode_list.html
index 82c4511..9128a73 100644
--- a/radiocampus/templates/aircox/episode_list.html
+++ b/radiocampus/templates/aircox/episode_list.html
@@ -21,3 +21,22 @@
 {{ block.super }}
 {% endwith %}
 {% endblock %}
+
+{% 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 %}
diff --git a/radiocampus/templates/aircox/home.html b/radiocampus/templates/aircox/home.html
index 2d8a474..c25acef 100644
--- a/radiocampus/templates/aircox/home.html
+++ b/radiocampus/templates/aircox/home.html
@@ -30,10 +30,14 @@ function display(id) {
 
     if (id == "homedisplay") {
             for(var i = 0; i < h.length; i++) { h[i].setAttribute('style', 'display:inline !important'); }
-            for(var i = 0; i < h.length; i++) { r[i].setAttribute('style', 'display:none !important'); }
+            for(var i = 0; i < r.length; i++) { r[i].setAttribute('style', 'display:none !important'); }
+            document.getElementById('recent-link').classList.remove('active');
+            document.getElementById('home-link').classList.add('active');
         } else {
             for(var i = 0; i < h.length; i++) { h[i].setAttribute('style', 'display:none !important'); }
-            for(var i = 0; i < h.length; i++) { r[i].setAttribute('style', 'display:inline !important'); }
+            for(var i = 0; i < r.length; i++) { r[i].setAttribute('style', 'display:inline !important'); }
+            document.getElementById('recent-link').classList.add('active');
+            document.getElementById('home-link').classList.remove('active');
         }
 
 
@@ -69,7 +73,7 @@ function display(id) {
         <!-- <a href="{% url "timetable-list" date=date %}">{{ date|date:"l d F Y" }}</a> -->
         <section class="clear-both list grid radiocampus-grid" role="list">
         </section>
-        {% with list_class="radiocampus-grid" %}
+        {% with list_class="list-home" %}
         {{ block.super }}
         {% endwith %}
 </div>
diff --git a/radiocampus/templates/aircox/public.html b/radiocampus/templates/aircox/public.html
index 333d19c..8bb0e91 100644
--- a/radiocampus/templates/aircox/public.html
+++ b/radiocampus/templates/aircox/public.html
@@ -19,8 +19,7 @@ content.
 {% block header %}{% if page %}{{ block.super }}{% endif %}{% endblock %}
 
 {% block secondary-nav %}
-{% if not parent and categories %}
-{% else %}
+{% if '/pages/' in request.path %}
 <nav class="nav secondary">
     <div class="nav-menu nav-categories">
      {% nav_items "secondary" css_class="nav-item" active_class="active" as items %}
diff --git a/radiocampus/templates/aircox/timetable_list.html b/radiocampus/templates/aircox/timetable_list.html
index a383c3c..cdd5ee8 100644
--- a/radiocampus/templates/aircox/timetable_list.html
+++ b/radiocampus/templates/aircox/timetable_list.html
@@ -28,7 +28,7 @@
 {% with list_class="grid" %}
 <section class="container clear-both list grid list-grille list-home list-emissions" role="list">
 <section class="container" style="display:flex;justify-content:flex-end;min-height:600px">
-<div>
+<div class="fifty">
 {% block list %}
 {% with object_list=object_list timetable=True  %}
 {% with widget|default:"item" as widget %}
diff --git a/radiocampus/templates/aircox/widgets/item.html b/radiocampus/templates/aircox/widgets/item.html
index 1928297..7871978 100644
--- a/radiocampus/templates/aircox/widgets/item.html
+++ b/radiocampus/templates/aircox/widgets/item.html
@@ -32,7 +32,7 @@
     </span>
     </br>
 
-        <section class="content flex-grow-1">
+        <section class="content flex-grow-1 item-section">
             {% block content %}{{ block.super }}{% endblock %}
         </section>
         {% block actions-container %}{{ block.super }}{% endblock %}
diff --git a/radiocampus/templates/aircox/widgets/preview.html b/radiocampus/templates/aircox/widgets/preview.html
new file mode 100644
index 0000000..ba2fb89
--- /dev/null
+++ b/radiocampus/templates/aircox/widgets/preview.html
@@ -0,0 +1,71 @@
+{% load i18n %}
+{% comment %}
+Content related context:
+- object: object to display
+- cover: cover
+- title: title
+- subtitle: subtitle
+- content: content to display
+
+Components:
+- no_cover: don't show cover
+- no_content: don't show content
+
+Styling related context:
+- is_active: add "active" css class
+- is_small: add "small" css class
+- is_tiny: add "tiny" css class
+- tag
+- tag_class: css class to set to main tag
+- tag_extra: extra tag attributes
+
+{% endcomment %}
+{% load aircox %}
+
+{% block outer %}
+<{{ tag|default:"article" }} id="{{ object|object_id }}" class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}active {% endif %}{% if is_tiny %}tiny{% elif is_small %}small{% endif %}{% block tag-class %}{{ tag_class|default:"" }} {% endblock %}" {% block tag-extra %}{% endblock %}>
+{% block inner %}
+    {% block headings-container %}
+    <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
+    {% block headings %}
+        {% block title-container %}
+        <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}"{% if title %} title="{{ title|escape }}"{% endif %}>
+            {% block title %}{{ title|default:"" }}{% endblock %}
+        </a>
+        {% endblock %}
+        {% block subtitle-container %}
+            <span class="heading subtitle {% block subtitle-class %}{% endblock %}">
+                {% block subtitle %}{{ subtitle|default:"" }}{% endblock %}
+            </span>
+        {% endblock %}
+    {% endblock %}
+    </header>
+    {% endblock %}
+
+    {% block content-container %}
+    <section class="content headings-container">
+        {% block content %}
+        {% if content and not no_content %}
+        {% autoescape off %}
+            {{ content|striptags|linebreaks }}
+        {% endautoescape %}
+        {% endif %}
+
+
+    {% spaceless %}
+    <div class="actions">
+        {% block actions %}
+        {% if admin and object.edit_url_name %}
+            <a href="{% url object.edit_url_name pk=object.pk %}">{% translate "Edit" %}</a>
+        {% endif %}
+        {% endblock %}
+    </div>
+    {% endspaceless %}
+
+        {% endblock %}
+    </section>
+    {% endblock %}
+
+{% endblock %}
+</{{ tag|default:"article" }}>
+{% endblock %}