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

design

Browse Source
This commit is contained in:
bkfox 2023-11-22 21:09:59 +01:00
parent b4c12def13
commit 6a21a9d094
14 changed files with 183 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aircox/filters.py
View File

@ -10,7 +10,7 @@ class PageFilters(filters.FilterSet):
class Meta:
model = Page
fields = {
"category__id": ["in"],
"category__id": ["in", "exact"],
"pub_date": ["exact", "gte", "lte"],
}

10
aircox/models/episode.py
View File

@ -17,7 +17,11 @@ class Episode(Page):
@property
def program(self):
return getattr(self.parent, "program", None)
return self.parent_subclass
@program.setter
def program(self, value):
self.parent = value
@cached_property
def podcasts(self):
@ -40,10 +44,6 @@ class Episode(Page):
podcasts[index]["page_title"] = self.title
return podcasts
@program.setter
def program(self, value):
self.parent = value
class Meta:
verbose_name = _("Episode")
verbose_name_plural = _("Episodes")

8
aircox/models/page.py
View File

@ -221,6 +221,12 @@ class Page(BasePage):
objects = PageQuerySet.as_manager()
@cached_property
def parent_subclass(self):
if self.parent_id:
return Page.objects.get_subclass(id=self.parent_id)
return None
class Meta:
verbose_name = _("Publication")
verbose_name_plural = _("Publications")
@ -300,7 +306,7 @@ class Comment(Renderable, models.Model):
return Page.objects.select_subclasses().filter(id=self.page_id).first()
def get_absolute_url(self):
return self.parent.get_absolute_url()
return self.parent.get_absolute_url() + f"#comment-{self.pk}"
class Meta:
verbose_name = _("Comment")

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

@ -9567,34 +9567,6 @@ a.navbar-item.is-active {
font-weight: 100;
}
/*
.page {
& > .cover {
float: right;
max-width: 45%;
}
.header {
margin-bottom: 1.5em;
}
.headline {
font-size: 1.4em;
padding: 0.2em 0em;
}
p { padding: 0.4em 0em; }
hr { background-color: $grey-light; }
.page-content {
h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
}
}*/
.player {
z-index: 10000;
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
@ -9649,12 +9621,22 @@ a.navbar-item.is-active {
margin: 0em;
}
.media .subtitle {
margin-bottom: 0.4em;
}
.media .media-content .headline {
font-size: 1em;
font-weight: 400;
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
--highlight-color-2: rgb(0, 0, 254);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
--header-height: 30em;
--heading-height: 30em;
--heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2);
--preview-media-height: 10em;
--preview-media-cover-size: 10em;
--preview-cover-size: 24em;
--preview-cover-small-size: 10em;
--heading-font-family: default;
}
body {
@ -9696,24 +9678,6 @@ aside .media .subtitle {
display: inline-block;
}
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
--highlight-color-2: rgb(0, 0, 254);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
--header-height: 30em;
--heading-height: 30em;
--heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2);
--preview-media-height: 10em;
--preview-media-cover-size: 10em;
--preview-cover-size: 24em;
--preview-cover-small-size: 10em;
--heading-font-family: default;
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
}
@ -9726,6 +9690,21 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
color: var(--highlight-color-2);
text-decoration: none;
}
.page .content {
font-size: 2em;
}
.page section.container {
padding-top: 2em;
}
.page section.container > .title {
margin-top: unset;
padding-top: unset !important;
margin-bottom: 1.2em;
}
.page section.container:not(:first-child) {
margin-top: 2em;
border-top: 1px solid black;
}
.d-inline {
display: inline;
@ -9813,24 +9792,20 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
margin-top: 0.8em;
}
.content {
font-size: 1.4em;
}
.heading, .headings-container > * {
.heading {
display: inline-block;
}
.heading:not(:empty), .headings-container > *:not(:empty) {
.heading:not(:empty) {
background-color: var(--heading-bg-color);
padding: 0.4em;
margin-top: 0em !important;
vertical-align: top;
}
.heading:not(:empty).highlight, .headings-container > *:not(:empty).highlight {
.heading:not(:empty).highlight {
background-color: var(--heading-bg-highlight-color);
color: var(--highlight-color);
}
.heading.title, .headings-container > *.title {
.heading.title {
background-color: var(--heading-title-bg-color);
}
@ -9862,15 +9837,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
background-color: var(--highlight-color-2);
color: var(--highlight-color);
}
.nav.primary .navbar-brand {
.nav.primary .nav-brand {
display: inline-block;
margin-right: 0.8em;
padding: 0.8em;
}
.nav.primary .navbar-brand img {
.nav.primary .nav-brand img {
width: 14em !important;
}
.nav.primary .navbar-menu {
.nav.primary .nav-menu {
display: flex;
flex-grow: 1;
}
@ -9892,10 +9867,15 @@ nav li a, nav li .button {
font-size: 1.4em;
}
.page-content {
margin-top: 2em;
margin-bottom: 2em;
}
.preview {
position: relative;
background-size: cover;
margin-bottom: 0.8em;
margin-bottom: 1.2em !important;
}
.preview.preview-card:not(.wide) {
max-width: 30em;
@ -9904,7 +9884,8 @@ nav li a, nav li .button {
width: 100%;
}
.preview.columns, .preview .headings.columns {
margin: 0em;
margin-left: 0em;
margin-right: 0em;
}
.preview.columns .column, .preview .headings.columns .column {
padding: 0em;
@ -9945,7 +9926,7 @@ nav li a, nav li .button {
}
.list-item .headings {
padding-top: 0em;
margin-bottom: 0.8em !important;
margin-bottom: 1.2em !important;
background-color: var(--heading-bg-color);
}
.list-item .subtitle {
@ -9954,16 +9935,16 @@ nav li a, nav li .button {
.list-item .media-content {
display: flex;
flex-direction: column;
}
.list-item:not(.no-cover) .list-item .media-content {
height: var(--preview-cover-small-size);
min-height: var(--preview-cover-small-size);
}
.list-item .media-content .content {
flex-grow: 1;
margin-bottom: auto;
}
.list-item .media-content .actions {
flex-grow: 0;
flex-grow: unset;
text-align: right;
margin-top: auto;
}
.preview-wide {
@ -9975,7 +9956,7 @@ nav li a, nav li .button {
.preview-wide .headings {
width: var(--preview-cover-size);
flex-grow: 0;
margin-right: 0.8em;
margin-right: 1.2em;
}
.preview-wide .content {
font-size: 2em;

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

@ -52,10 +52,10 @@ Usefull context:
{% block nav %}
<nav class="nav primary" role="navigation" aria-label="main navigation">
{% block nav-primary %}
<a class="navbar-brand" href="{% url "home" %}">
<a class="nav-brand" href="{% url "home" %}">
<img src="{{ station.logo.url }}">
</a>
<div class="navbar-menu">
<div class="nav-menu">
{% block nav-primary-menu %}
{% nav_items "top" css_class="nav-item" active_class="active" as items %}
{% for item, render in items %}
@ -82,7 +82,7 @@ Usefull context:
<div class="container content">
{% block content %}
{% if page and page.content %}
<section class="page-content mb-2">{{ page.content|safe }}</section>
<section class="page-content">{{ page.content|safe }}</section>
{% endif %}
{% endblock %}
</div>

20
aircox/templates/aircox/home.html
View File

@ -32,19 +32,25 @@
</section>
{% endif %}
{% if object_list %}
{% if logs %}
<section class="container">
<h2 class="title is-3 p-2">
</h2>
<h2 class="title is-3 p-2">{% translate "It just happened" %}</h2>
{% for object in logs %}
{% include "./widgets/log.html" with widget="item" %}
{% endfor %}
</section>
{% endif %}
{% if last_publications %}
<section class="container">
<h2 class="title is-3 p-2">{% translate "Last publications" %}</h2>
<div role="list">
{% for object in object_list %}
{% page_widget "item" object.episode diffusion=object timetable=True open=True %}
{% for object in last_publications %}
{% page_widget "item" object open=True %}
{% endfor %}
</div>
</section>
{% endif %}
{% endblock %}

15
aircox/templates/aircox/page_detail.html
View File

@ -36,18 +36,9 @@ Context:
<section class="container">
<h2 class="title">{% translate "Comments" %}</h2>
{% for comment in comments %}
<div class="media box">
<div class="media-content">
<p>
<strong class="mr-2">{{ comment.nickname }}</strong>
<time datetime="{{ comment.date }}" title="{{ comment.date }}">
<small>{{ comment.date|naturaltime }}</small>
</time>
<br>
{{ comment.content }}
</p>
</div>
{% for object in comments %}
<div id="comment-{{ object.pk }}">
{% page_widget "item" object %}
</div>
{% endfor %}
</section>

9
aircox/templates/aircox/page_list.html
View File

@ -2,6 +2,15 @@
{% comment %}Display a list of Pages{% endcomment %}
{% load i18n aircox %}
{% block secondary-nav %}
<form class="nav secondary">
{% for id, title in view.categories.items %}
<a class="nav-item{% if category_id == id %} active{% endif %}"
href="?category__id={{ id }}">{{ title }}</a>
{% endfor %}
</form>
{% endblock %}
{% block header %}
{% if page and not object %}
{% with page as object %}

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

@ -5,10 +5,10 @@
{% include "aircox/program_sidebar.html" %}
{% block content %}
{% block content-container %}
{{ block.super }}
{% if episodes %}
<section>
<section class="container">
<h4 class="title is-3">{% translate "Last Episodes" %}</h4>
<section class="card-grid">
{% for object in episodes|slice:":3" %}
@ -19,8 +19,7 @@
<nav class="has-text-right">
<li class="nav-item">
<a href="{% url "episode-list" parent_slug=program.slug %}"
class="button action"
aria-label="{% translate "Show all program's articles" %}">
class="button action">
{% translate "All episodes" %}
</a>
</li>
@ -30,7 +29,7 @@
{% if articles %}
<section>
<section class="container">
<h4 class="title is-4">{% translate "Last Articles" %}</h4>
<section class="card-grid">

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

@ -5,15 +5,16 @@
{% block headings %}
<div class="columns">
<div class="column">
{{ block.super }}
{{ block.super }}
{% spaceless %}
<section class="heading content">
{% block content %}{{ block.content }}{% endblock %}
</section>
{% endspaceless %}
</div>
{% 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 %}

5
aircox/templates/aircox/widgets/log.html
View File

@ -1,4 +1,3 @@
{% extends "./page.html" %}
{% load i18n aircox %}
{% comment %}
List item for a log, either for a logged track or diffusion (as diffusion).
@ -14,8 +13,8 @@ for design review.
{% block outer %}
{% if object|is_diffusion %}
{% include "./diffusion.html" with object=diffusion.episode %}
{% page_widget widget object.episode diffusion=object %}
{% else %}
{% include "aircox/widgets/track_item.html" with object=object.track log=object %}
{% include "./track_item.html" with object=object.track log=object %}
{% endif %}
{% endblock %}

4
aircox/views/home.py
View File

@ -14,7 +14,7 @@ class HomeView(AttachedToMixin, BaseView, ListView):
model = Diffusion
queryset = Diffusion.objects.on_air().select_related("episode")
logs_count = 5
publications_count = 5
publications_count = 7
def get_queryset(self):
return super().get_queryset().date(date.today())
@ -62,7 +62,7 @@ class HomeView(AttachedToMixin, BaseView, ListView):
"diffusion": current_diff,
"logs": self.get_logs(self.object_list),
"next_diffs": next_diffs,
"last_publications": self.get_last_publications()[:5],
"last_publications": self.get_last_publications(),
}
)
return super().get_context_data(**kwargs)

13
aircox/views/page.py
View File

@ -123,12 +123,17 @@ class PageListView(FiltersMixin, BasePageListView):
return qs
def get_context_data(self, **kwargs):
kwargs["categories"] = (
self.model.objects.published()
self.categories = {
id: title
for title, id in self.model.objects.published()
.filter(category__isnull=False)
.values_list("category__title", "category__id")
.distinct()
)
}
cat_id = self.request.GET.get("category__id")
if cat_id:
cat_id = int(cat_id)
kwargs["category_id"] = cat_id
return super().get_context_data(**kwargs)
@ -150,6 +155,8 @@ class PageDetailView(BasePageDetailView):
kwargs["comments"] = Comment.objects.filter(page=self.object).order_by(
"-date"
)
if self.object.parent_subclass:
kwargs["parent"] = self.object.parent_subclass
return super().get_context_data(**kwargs)
@classmethod

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

@ -149,36 +149,6 @@ a.navbar-item.is-active {
}
}
//-- page
/*
.page {
& > .cover {
float: right;
max-width: 45%;
}
.header {
margin-bottom: 1.5em;
}
.headline {
font-size: 1.4em;
padding: 0.2em 0em;
}
p { padding: 0.4em 0em; }
hr { background-color: $grey-light; }
.page-content {
h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
}
}*/
//-- player
.player {
@ -247,18 +217,31 @@ a.navbar-item.is-active {
}
//-- media
.media {
.subtitle {
margin-bottom: 0.4em;
}
.media-content .headline {
font-size: 1em;
font-weight: 400;
}
//-- general
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
--highlight-color-2: rgb(0, 0, 254);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
--header-height: 30em;
--heading-height: 30em;
--heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2);
--preview-media-height: 10em;
--preview-media-cover-size: 10em;
--preview-cover-size: 24em;
--preview-cover-small-size: 10em;
--heading-font-family: default;
}
//-- general
body {
background-color: $body-background-color;
}
@ -295,31 +278,6 @@ aside {
}
// -- layout
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
--highlight-color-2: rgb(0, 0, 254);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
--header-height: 30em;
--heading-height: 30em;
--heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2);
--preview-media-height: 10em;
--preview-media-cover-size: 10em;
--preview-cover-size: 24em;
--preview-cover-small-size: 10em;
--heading-font-family: default;
}
// ---- main theme & layout
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
@ -333,6 +291,25 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
color: var(--highlight-color-2);
text-decoration: none;
}
.content {
font-size: $text-size-big;
}
section.container {
padding-top: $mp-6;
> .title {
margin-top: unset;
padding-top: unset !important;
margin-bottom: $mp-4;
}
&:not(:first-child) {
margin-top: $mp-6;
border-top: 1px solid black;
}
}
}
@ -396,12 +373,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
}
}
.content {
font-size: $text-size-medium;
}
.heading, .headings-container > * {
.heading {
display: inline-block;
&:not(:empty) {
@ -458,7 +430,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
}
&.primary {
.navbar-brand {
.nav-brand {
display: inline-block;
margin-right: $mp-3;
padding: $mp-3;
@ -468,7 +440,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
}
}
.navbar-menu {
.nav-menu {
display: flex;
flex-grow: 1;
}
@ -497,11 +469,17 @@ nav li {
}
// ---- ---- detail
.page-content {
margin-top: $mp-6;
margin-bottom: $mp-6;
}
// ---- ---- previews & page items
.preview {
position: relative;
background-size: cover;
margin-bottom: calc($mp-3);
margin-bottom: $mp-4 !important;
&.preview-card {
&:not(.wide) {
@ -514,7 +492,8 @@ nav li {
}
&.columns, .headings.columns {
margin: 0em;
margin-left: 0em;
margin-right: 0em;
.column { padding: 0em; }
}
@ -557,7 +536,7 @@ nav li {
.headings {
padding-top: 0em;
margin-bottom: $mp-3 !important;
margin-bottom: $mp-4 !important;
background-color: var(--heading-bg-color);
}
@ -568,16 +547,17 @@ nav li {
.media-content {
display: flex;
flex-direction: column;
min-height: var(--preview-cover-small-size);
.list-item:not(.no-cover) & {
height: var(--preview-cover-small-size);
.content {
flex-grow: 1;
margin-bottom: auto;
}
.content { flex-grow: 1; }
.actions {
flex-grow: 0;
flex-grow: unset;
text-align: right;
margin-top: auto;
}
}
}
@ -594,7 +574,7 @@ nav li {
& .headings {
width: var(--preview-cover-size);
flex-grow: 0;
margin-right: $mp-3;
margin-right: $mp-4;
}
& .content {