page headers
This commit is contained in:
bkfox
parent
1de9548111
commit
f05e47af1c
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
background-size: cover;
|
||||
.header.preview-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.6rem;
|
||||
min-height: unset;
|
||||
padding-top: 0.6rem !important;
|
||||
}
|
||||
.header .preview-card {
|
||||
max-width: unset;
|
||||
.header.preview-header .headings {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@
|
|||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% with "./widgets/dated_list_header.html" as header_template_name %}
|
||||
{{ block.super }}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
{% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}
|
||||
|
||||
{% block secondary-nav %}
|
||||
<nav class="nav secondary">
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
{% extends "./header.html" %}
|
||||
|
||||
{% block outer %}
|
||||
{% with date|date:"l d F Y" as subtitle %}
|
||||
{{ block.super }}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
max-width: unset;
|
||||
.headings {
|
||||
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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user