rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

WIP: Design #135

Closed
thomas wants to merge 64 commits from dev-1.0-118-design into develop-1.0
pull from: dev-1.0-118-design
merge into: rc:develop-1.0
Conversation 1 Commits 64 Files Changed 120 +24742 -6338
85 changed files with 24742 additions and 6338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f05e47af1c - Show all commits

6
aircox/models/log.py
View File

@ -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)

58
aircox/static/aircox/css/chunk-common.css
View File

@ -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;

28
aircox/templates/aircox/base.html
View File

@ -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>

6
aircox/templates/aircox/diffusion_list.html
View File

@ -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">

5
aircox/templates/aircox/episode_detail.html
View File

@ -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 }}

6
aircox/templates/aircox/log_list.html
View File

@ -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">

8
aircox/templates/aircox/program_detail.html
View File

@ -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 }}

7
aircox/templates/aircox/widgets/dated_list_header.html
View File

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

10
aircox/templates/aircox/widgets/episode_header.html
View File

@ -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 %}

20
aircox/templates/aircox/widgets/header.html
View File

@ -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 %}

2
aircox/views/home.py
View File

@ -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()

63
assets/src/assets/styles.scss
View File

@ -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; }