page headers

aircox/models/log.py

@@ -163,13 +163,11 @@ class Log(Renderable, models.Model):
         object_list += [cls(obj) for obj in items]
 
     @classmethod
-    def merge_diffusions(cls, logs, diffs, count=None, diff_count=None):
+    def merge_diffusions(cls, logs, diffs, count=None, diff_count=None, log_slice=None):
         """Merge logs and diffusions together.
 
         `logs` can either be a queryset or a list ordered by `Log.date`.
         """
-        # TODO: limit count
-        # FIXME: log may be iterable (in stats view)
         if isinstance(logs, models.QuerySet):
             logs = list(logs.order_by("-date"))
         diffs = diffs.on_air().before().order_by("-start")
@@ -211,6 +209,8 @@ class Log(Renderable, models.Model):
                 )
                 if index is not None and index > 0:
                     logs = logs[index:]
+                    if log_slice:
+                        logs = logs[:log_slice]
 
             # - add diff
             object_list.append(diff)

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

@@ -8049,6 +8049,19 @@ body {
   background-color: hsl(0deg, 0%, 96%);
 }
 
+@media screen and (max-width: 1280px) {
+  body {
+    font-size: 1.2em;
+  }
+}
+@media screen and (max-width: 1024px) {
+  body {
+    font-size: 1em;
+  }
+  :root {
+    --header-height: 20rem;
+  }
+}
 section > .toolbar {
   background-color: rgba(0, 0, 0, 0.05);
   padding: 1em;
@@ -8229,10 +8242,13 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 }
 
 .schedules {
-  margin-top: -0.6rem !important;
+  margin: 0;
   padding-top: 0;
 }
 
+.schedule {
+  margin-bottom: 0.4rem;
+}
 .schedule .day {
   font-weight: 700;
   margin-right: 0.6rem;
@@ -8527,7 +8543,7 @@ nav li a, nav li .button {
 .preview .headings {
   background-size: cover;
 }
-.preview .headings * {
+.preview .headings > * {
   margin: 0em;
 }
 .preview .headings .column {
@@ -8537,6 +8553,11 @@ nav li a, nav li .button {
   color: var(--text-color);
 }
 
+@media screen and (max-width: 600px) {
+  .preview .content {
+    display: none;
+  }
+}
 .preview-cover {
   background-size: cover;
   background-color: transparent !important;
@@ -8616,6 +8637,9 @@ nav li a, nav li .button {
 .preview-wide {
   height: var(--preview-cover-size);
 }
+.preview-wide .headings {
+  height: var(--preview-cover-size);
+}
 .preview-wide:not(.header) .headings {
   box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
 }
@@ -8626,7 +8650,7 @@ nav li a, nav li .button {
   margin-right: 1.2rem;
 }
 .preview-wide .content {
-  font-size: 2rem;
+  font-size: 1.6rem;
   flex-grow: 1;
 }
 
@@ -8659,11 +8683,20 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   margin-bottom: 0.6rem;
 }
 
-.header {
+.header.preview-header {
-  background-size: cover;
+  display: flex;
+  align-items: start;
+  gap: 0.6rem;
+  min-height: unset;
+  padding-top: 0.6rem !important;
 }
-.header .preview-card {
+.header.preview-header .headings {
-  max-width: unset;
+  flex-grow: 1;
+  padding-top: 0 !important;
+}
+.header img {
+  height: var(--preview-cover-size);
+  max-width: calc(var(--preview-cover-size) * 2);
 }
 .header .title {
   font-size: 40px;
@@ -8671,15 +8704,6 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
 .header .subtitle {
   font-size: 32px;
 }
-.header .content {
-  display: inline !important;
-  font-size: 1.4rem;
-  font-weight: 500;
-  text-align: right;
-}
-.header .content p {
-  margin-bottom: 0.6rem;
-}
 
 .card-grid {
   display: grid;
@@ -8705,7 +8729,7 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   position: absolute;
   display: flex;
   flex-direction: column;
-  top: calc(var(--preview-cover-size) - 1.4rem);
+  top: 50%;
 }
 .a-carousel-button-container button.prev, .a-carousel-button-container .button.prev {
   left: -0.6em;

aircox/templates/aircox/base.html

@@ -76,9 +76,33 @@ Usefull context:
             {% block main-container %}
             <main class="page">
             {% block main %}
-                <header class="container header {% if cover %}has-cover{% endif %}">
+                <header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
                 {% block header %}
-                    {% include header_template_name|default:"./widgets/header.html" %}
+                <div class="headings preview-card-headings">
+                    {% block headings %}
+                        <div>
+                            <h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
+                        </div>
+                        <div>
+                            <span class="heading subtitle is-3">
+                            {% block subtitle %}
+                                {% if subtitle %}
+                                    {{ subtitle }}
+                                {% elif parent and parent.is_published %}
+                                    <a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
+                                        <span class="icon">
+                                            <i class="fa fa-angles-right"></i>
+                                        </span>
+                                        {{ parent.title }}
+                                    </a>
+                            {% endif %}
+                            </span>
+                            {% endblock %}
+                            </span>
+                        </div>
+                    {% endblock %}
+                    </div>
+                    <img src="{{ cover }}">
                 {% endblock %}
                 </header>
 

aircox/templates/aircox/diffusion_list.html

@@ -12,11 +12,7 @@
 {% endif %}
 {% endblock %}
 
-{% block header %}
+{% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}
-{% with "./widgets/dated_list_header.html" as header_template_name %}
-    {{ block.super }}
-{% endwith %}
-{% endblock %}
 
 {% block secondary-nav %}
 <nav class="nav secondary">

aircox/templates/aircox/episode_detail.html

@@ -2,11 +2,6 @@
 {% 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-container %}
 {{ block.container }}

aircox/templates/aircox/log_list.html

@@ -15,12 +15,6 @@
 
 {% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}
 
-{% block header %}
-{% with "./widgets/dated_list_header.html" as header_template_name %}
-    {{ block.super }}
-{% endwith %}
-{% endblock %}
-
 
 {% block secondary-nav %}
 <nav class="nav secondary">

aircox/templates/aircox/program_detail.html

@@ -4,11 +4,12 @@
 
 {% include "aircox/program_sidebar.html" %}
 
+{% block headings %}
 
-{% block content-container %}
 {% with schedules=program.schedule_set.all %}
+{{ block.super }}
 {% if schedules %}
-<section class="container schedules">
+<section class="schedules">
     {% for schedule in schedules %}
     <div class="schedule">
         <div class="heading">
@@ -35,6 +36,9 @@
 </section>
 {% endif %}
 {% endwith %}
+{% endblock %}
+
+{% block content-container %}
 
 {{ block.super }}
 

aircox/templates/aircox/widgets/dated_list_header.html

@@ -1,7 +0,0 @@
-{% extends "./header.html" %}
-
-{% block outer %}
-{% with date|date:"l d F Y" as subtitle %}
-{{ block.super }}
-{% endwith %}
-{% endblock %}

aircox/templates/aircox/widgets/episode_header.html

@@ -1,10 +0,0 @@
-{% extends "aircox/widgets/header.html" %}
-
-{% block header-nav %}
-{{ block.super }}
-<div>
-    <a class="heading" href="{{ object.program.get_absolute_url }}">
-        {{ object.program.display_title }}
-    </a>
-</div>
-{% endblock %}

aircox/templates/aircox/widgets/header.html

@@ -1,20 +0,0 @@
-{% extends "./card.html" %}
-
-{% block tag-class %}preview-header{% endblock %}
-{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
-
-
-{% block headings %}
-{{ block.super }}
-
-{% if parent and parent.is_published %}
-<div>
-    <a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
-        <span class="icon">
-            <i class="fa fa-angles-right"></i>
-        </span>
-        {{ parent.title }}
-    </a>
-</div>
-{% endif %}
-{% endblock %}

aircox/views/home.py

@@ -29,7 +29,7 @@ class HomeView(AttachedToMixin, BaseView, ListView):
         if diffs:
             min_date = diffs[-1].start - timedelta(hours=1)
             logs = logs.after(min_date)
-        return Log.merge_diffusions(logs, object_list, diff_count=self.related_count)
+        return Log.merge_diffusions(logs, object_list, diff_count=self.related_count, log_slice=20)
 
     def get_next_diffs(self):
         now = tz.now()

assets/src/assets/styles.scss

@@ -157,6 +157,19 @@ body {
     background-color: $body-background-color;
 }
 
+
+@media screen and (max-width: $screen-wider) {
+    body { font-size: 1.2em; }
+}
+
+@media screen and (max-width: $screen-normal) {
+    body { font-size: 1em; }
+
+    :root {
+        --header-height: 20rem;
+    }
+}
+
 section > .toolbar {
     background-color: rgba(0,0,0,0.05);
     padding: 1em;
@@ -277,11 +290,13 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 
 
 .schedules {
-    margin-top: calc(0rem - $mp-3) !important;
+    margin: 0;
     padding-top: 0;
 }
 
 .schedule {
+    margin-bottom: $mp-2;
+
     .day {
         font-weight: $weight-bold;
         margin-right: $mp-3;
@@ -638,7 +653,7 @@ nav li {
     .headings {
         background-size: cover;
 
-        * { margin: 0em; }
+        > * { margin: 0em; }
         .column { padding: 0em; }
 
         a {
@@ -647,6 +662,12 @@ nav li {
     }
 }
 
+@media screen and (max-width: $screen-small) {
+    .preview .content {
+        display: none;
+    }
+}
+
 .preview-cover {
     background-size: cover;
     background-color: transparent !important;
@@ -744,6 +765,10 @@ nav li {
 .preview-wide {
     height: var(--preview-cover-size);
 
+    .headings {
+        height: var(--preview-cover-size)
+    }
+
     &:not(.header) .headings {
         box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
     }
@@ -756,7 +781,7 @@ nav li {
     }
 
     & .content {
-        font-size: $text-size-big;
+        font-size: $text-size-bigger;
         flex-grow: 1;
     }
 }
@@ -803,10 +828,22 @@ nav li {
 
 
 .header {
-    background-size: cover;
+    &.preview-header {
+        display: flex;
+        align-items: start;
+        gap: $mp-3;
+        min-height: unset;
+        padding-top: $mp-3 !important;
 
-    .preview-card {
+        .headings {
-        max-width: unset;
+            flex-grow: 1;
+            padding-top: 0 !important;
+        }
+
+    }
+    img {
+        height: var(--preview-cover-size);
+        max-width: calc(var(--preview-cover-size) * 2);
     }
 
     .title {
@@ -815,18 +852,6 @@ nav li {
     .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
-        }
-    }
-
 }
 
 
@@ -857,7 +882,7 @@ nav li {
         position: absolute;
         display: flex;
         flex-direction: column;
-        top: calc(var(--preview-cover-size) - $text-size-medium);
+        top: 50%;
 
         &.prev { left: -$mp-3e; }
         &.next { right: -$mp-3e; }