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

design

Browse Source
This commit is contained in:
bkfox 2024-02-01 17:29:35 +01:00
parent cab6cacd0b
commit ad90255570
17 changed files with 87 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
aircox/static/aircox/css/admin.css
View File

@ -9,10 +9,11 @@
--subtitle-2-sz: 1.4rem;
--subtitle-3-sz: 1.2rem;
--heading-font-family: default;
--heading-bg: var(--hg-color);
--heading-bg: var(--main-color);
--heading-fg: var(--text-color);
--heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2);
--heading-hg-bg: var(--secondary-color);
--heading-link-hv-fg: var(--link-fg);
--cover-w: 14rem;
--cover-h: 14rem;
--cover-small-w: 10rem;
@ -91,6 +92,9 @@
font-size: var(--title-3-sz);
}
.subtitle, .header.preview .subtitle {
color: var(--text-color-light);
}
.subtitle.is-1, .header.preview .subtitle.is-1 {
font-size: var(--subtitle-1-sz);
}
@ -101,6 +105,10 @@
font-size: var(--subtitle-3-sz);
}
.title + .subtitle {
padding-top: 0em !important;
}
.headings a, a.heading, a.subtitle {
text-decoration: none !important;
}
@ -109,7 +117,6 @@
display: inline-block;
}
.heading:not(:empty) {
color: var(--heading-fg);
padding: 0.4rem;
margin-top: 0em !important;
vertical-align: top;
@ -155,6 +162,9 @@
.preview .headings a {
color: var(--text-color);
}
.preview .headings a:hover {
color: var(--heading-link-hv-fg) !important;
}
.preview.tiny .content {
font-size: 1rem;
}
@ -270,10 +280,6 @@
flex-grow: 1;
}
:root {
--preview-card-width: 20rem;
}
.preview-card {
display: flex;
flex-direction: column;
@ -282,49 +288,13 @@
margin-bottom: auto;
background-color: var(--preview-bg) !important;
transition: box-shadow 0.2s;
/*
height: var(--preview-cover-size);
width: var(--preview-cover-size);
&.small {
height: var(--preview-cover-small-size);
width: var(--preview-cover-small-size);
}
&.tiny {
height: var(--preview-cover-tiny-size);
width: var(--preview-cover-tiny-size);
}
&:not(.header) {
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
}
.heading {
background-color: var(--preview-heading-bg-color);
}
.title {
max-height: calc( var(--preview-cover-size) / 2 );
overflow: hidden;
}
.card-grid & {
min-width: unset;
}
.actions {
position: absolute;
bottom: v.$mp-3;
right: v.$mp-3;
label {
display: none;
}
}*/
}
.preview-card:hover figure {
box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
}
.preview-card:hover a {
color: var(--heading-link-hv-fg);
}
.preview-card .headings {
margin-top: 0.4rem;
}
@ -335,7 +305,7 @@
overflow: hidden;
}
.preview-card .headings .subtitle {
font-size: 1.4rem;
font-size: 1.2rem;
}
.preview-card .card-content {
flex-grow: 1;
@ -343,6 +313,7 @@
}
.preview-card .card-content figure {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
border: 1px #c4c4c4 solid;
height: var(--cover-h);
width: var(--cover-w);
}
@ -353,12 +324,6 @@
right: 0rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.2rem;
}
.list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
@ -366,7 +331,7 @@
gap: 1.2rem;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
.list-grid {
grid-template-columns: 1fr;
}

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

@ -6972,6 +6972,7 @@ input.half-field:not(:active):not(:hover) {
:root {
--body-bg: #fff;
--text-color: black;
--text-color-light: #555;
--main-color: #EFCA08;
--main-color-light: #F4da51;
--main-color-dark: #F49F0A;

79
aircox/static/aircox/css/public.css
View File

@ -9,10 +9,11 @@
--subtitle-2-sz: 1.4rem;
--subtitle-3-sz: 1.2rem;
--heading-font-family: default;
--heading-bg: var(--hg-color);
--heading-bg: var(--main-color);
--heading-fg: var(--text-color);
--heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2);
--heading-hg-bg: var(--secondary-color);
--heading-link-hv-fg: var(--link-fg);
--cover-w: 14rem;
--cover-h: 14rem;
--cover-small-w: 10rem;
@ -91,6 +92,9 @@
font-size: var(--title-3-sz);
}
.subtitle, .header.preview .subtitle {
color: var(--text-color-light);
}
.subtitle.is-1, .header.preview .subtitle.is-1 {
font-size: var(--subtitle-1-sz);
}
@ -101,6 +105,10 @@
font-size: var(--subtitle-3-sz);
}
.title + .subtitle {
padding-top: 0em !important;
}
.headings a, a.heading, a.subtitle {
text-decoration: none !important;
}
@ -109,7 +117,6 @@
display: inline-block;
}
.heading:not(:empty) {
color: var(--heading-fg);
padding: 0.4rem;
margin-top: 0em !important;
vertical-align: top;
@ -155,6 +162,9 @@
.preview .headings a {
color: var(--text-color);
}
.preview .headings a:hover {
color: var(--heading-link-hv-fg) !important;
}
.preview.tiny .content {
font-size: 1rem;
}
@ -270,10 +280,6 @@
flex-grow: 1;
}
:root {
--preview-card-width: 20rem;
}
.preview-card {
display: flex;
flex-direction: column;
@ -282,49 +288,13 @@
margin-bottom: auto;
background-color: var(--preview-bg) !important;
transition: box-shadow 0.2s;
/*
height: var(--preview-cover-size);
width: var(--preview-cover-size);
&.small {
height: var(--preview-cover-small-size);
width: var(--preview-cover-small-size);
}
&.tiny {
height: var(--preview-cover-tiny-size);
width: var(--preview-cover-tiny-size);
}
&:not(.header) {
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
}
.heading {
background-color: var(--preview-heading-bg-color);
}
.title {
max-height: calc( var(--preview-cover-size) / 2 );
overflow: hidden;
}
.card-grid & {
min-width: unset;
}
.actions {
position: absolute;
bottom: v.$mp-3;
right: v.$mp-3;
label {
display: none;
}
}*/
}
.preview-card:hover figure {
box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
}
.preview-card:hover a {
color: var(--heading-link-hv-fg);
}
.preview-card .headings {
margin-top: 0.4rem;
}
@ -335,7 +305,7 @@
overflow: hidden;
}
.preview-card .headings .subtitle {
font-size: 1.4rem;
font-size: 1.2rem;
}
.preview-card .card-content {
flex-grow: 1;
@ -343,6 +313,7 @@
}
.preview-card .card-content figure {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
border: 1px #c4c4c4 solid;
height: var(--cover-h);
width: var(--cover-w);
}
@ -353,12 +324,6 @@
right: 0rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.2rem;
}
.list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
@ -366,7 +331,7 @@
gap: 1.2rem;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
.list-grid {
grid-template-columns: 1fr;
}
@ -7362,14 +7327,12 @@ a.tag:hover {
}
.page section.container {
margin-top: 0.6rem;
margin-bottom: 1.2rem;
}
.page section.container > .title {
font-size: var(--title-2-sz);
clear: both;
margin-bottom: 1.2rem;
}
.page section.container:not(:last-child) {
margin-bottom: 0.6rem;
margin: 0.6rem 0;
}
.dropdown-item {

2
aircox/static/aircox/js/chunk-common.js
View File

@ -225,7 +225,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\**********************************************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {\n page: _ctx.page,\n podcasts: $data.podcasts\n })]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AEpisode.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {\n page: _ctx.page,\n podcasts: $data.podcasts\n });\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AEpisode.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
/***/ }),

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

@ -1,30 +1,2 @@
{% extends "aircox/page_detail.html" %}
{% comment %}Detail page for regular articles{% endcomment %}
{% load i18n %}
{% block sidebar %}
{{ block.super }}
{% if sidebar_object_list %}
<section>
{% comment %}Translators: in page detail sidebar{% endcomment %}
<h4 class="title is-4">{% translate "Latest news" %}</h4>
{% for object in sidebar_object_list %}
{% include "aircox/widgets/page_item.html" %}
{% endfor %}
<br>
<nav class="pagination is-centered">
<ul class="pagination-list">
<li>
<a href="{% url "article-list" %}" class="pagination-link"
aria-label="{% translate "Show all news" %}">
{% translate "More news" %}
</a>
</li>
</ul>
</nav>
</section>
{% endif %}
{% endblock %}

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

@ -4,7 +4,6 @@
{% block content-container %}
{{ block.container }}
<a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
<template v-slot="{podcasts,page}">
@ -13,7 +12,7 @@
{% if object.podcasts %}
{% spaceless %}
<section class="container no-border">
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
<h3 class="title">{% translate "Podcasts" %}</h3>
<a-playlist v-if="page" :set="podcasts"
name="{{ page.title }}"
list-class="menu-list" item-class="menu-item"
@ -26,7 +25,7 @@
{% if tracks %}
<section class="container">
<h3 class="title is-3">{% translate "Playlist" %}</h3>
<h3 class="title">{% translate "Playlist" %}</h3>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
@ -48,8 +47,6 @@
</table>
</section>
{% endif %}
</template>
</a-episode>
{% endblock %}

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

@ -55,7 +55,7 @@
{% if podcasts %}
<section class="container">
<h2 class="title is-3 p-2">{% translate "Last podcasts" %}</h2>
<h2 class="title">{% translate "Last podcasts" %}</h2>
{% include "./widgets/carousel.html" with objects=podcasts url_name="podcast-list" url_label=_("All podcasts") %}
</section>
{% endif %}

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

@ -46,7 +46,7 @@ Context:
{% if related_objects %}
<section class="container">
{% with models=object|verbose_name:True %}
<h3 class="title is-3">{% blocktranslate %}Related {{models}}{% endblocktranslate %}</h3>
<h3 class="title">{% blocktranslate %}Related {{models}}{% endblocktranslate %}</h3>
{% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %}
{% endwith %}

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

@ -37,7 +37,7 @@
{% if episodes %}
<section class="container">
<h3 class="title is-3">{% translate "Last Episodes" %}</h3>
<h3 class="title">{% translate "Last Episodes" %}</h3>
{% include "./widgets/carousel.html" with objects=episodes url_name="episode-list" url_parent=object url_label=_("All episodes") %}
</section>
{% endif %}
@ -45,7 +45,7 @@
{% if articles %}
<section class="container">
<h3 class="title is-3">{% translate "Last Articles" %}</h3>
<h3 class="title">{% translate "Last Articles" %}</h3>
{% include "./widgets/carousel.html" with objects=articles url_name="article-list" url_parent=object url_label=_("All articles") %}
</section>
{% endif %}

4
aircox/urls.py
View File

@ -46,7 +46,9 @@ urls = [
name="article-list",
),
path(
_("articles/c/<slug:category_slug>/"), views.ArticleListView.as_view(model=models.Article), name="article-list"
_("articles/c/<slug:category_slug>/"),
views.ArticleListView.as_view(model=models.Article),
name="article-list",
),
path(
_("articles/<slug:slug>/"),

5
aircox/views/article.py
View File

@ -7,13 +7,8 @@ __all__ = ["ArticleDetailView", "ArticleListView"]
class ArticleDetailView(PageDetailView):
model = Article
def get_sidebar_queryset(self):
qs = Article.objects.published().select_related("cover").order_by("-pub_date")
return qs
class ArticleListView(PageListView):
model = Article
has_headline = True
parent_model = Program
attach_to_value = StaticPage.Target.ARTICLES

31
aircox/views/page.py
View File

@ -1,4 +1,4 @@
from django.http import Http404, HttpResponse
from django.http import HttpResponse
from django.utils.translation import gettext_lazy as _
from django.views.generic import DetailView, ListView
from django.urls import reverse
@ -7,7 +7,6 @@ from honeypot.decorators import check_honeypot
from ..filters import PageFilters
from ..forms import CommentForm
from ..models import Comment, Category
from ..utils import Redirect
from .base import BaseView
from .mixins import AttachedToMixin, FiltersMixin, ParentMixin
@ -22,6 +21,13 @@ __all__ = [
class BasePageMixin:
category = None
def get_queryset(self):
query = super().get_queryset().select_subclasses()
user = self.request.user
if not user.is_staff:
query = query.published()
return query.select_related("cover")
def get_category(self, page, **kwargs):
if page:
if getattr(page, "category_id", None):
@ -53,7 +59,7 @@ class BasePageListView(AttachedToMixin, BasePageMixin, ParentMixin, BaseView, Li
return super().get(*args, **kwargs)
def get_queryset(self):
query = super().get_queryset().select_subclasses().published().select_related("cover")
query = super().get_queryset()
if self.category:
query = query.filter(category=self.category)
return query
@ -81,9 +87,6 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
template_name = "aircox/basepage_detail.html"
context_object_name = "page"
def get(self, *args, **kwargs):
return super().get(*args, **kwargs)
def get_context_data(self, **kwargs):
if self.object.cover:
kwargs.setdefault("cover", self.object.cover.url)
@ -91,27 +94,11 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
kwargs.setdefault("title", self.object.display_title)
return super().get_context_data(**kwargs)
def get_queryset(self):
return super().get_queryset().select_related("cover")
# This should not exists: it allows mapping not published pages
# or it should be only used for trashed pages.
def not_published_redirect(self, page):
"""When a page is not published, redirect to the returned url instead
of an HTTP 404 code."""
return None
def get_object(self):
if getattr(self, "object", None):
return self.object
obj = super().get_object()
if not obj.is_published:
redirect_url = self.not_published_redirect(obj)
if redirect_url:
raise Redirect(redirect_url)
raise Http404("%s not found" % self.model._meta.verbose_name)
self.category = self.get_category(obj)
return obj

1
assets/src/assets/common.scss
View File

@ -15,6 +15,7 @@ input.half-field:not(:active):not(:hover) {
:root {
--body-bg: #fff;
--text-color: black;
--text-color-light: #555;
--main-color: #EFCA08;
--main-color-light: #F4da51;

85
assets/src/assets/components.scss
View File

@ -9,10 +9,11 @@
--subtitle-3-sz: 1.2rem;
--heading-font-family: default;
--heading-bg: var(--hg-color);
--heading-bg: var(--main-color);
--heading-fg: var(--text-color);
--heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2);
--heading-hg-bg: var(--secondary-color);
--heading-link-hv-fg: var(--link-fg);
--cover-w: 14rem;
--cover-h: 14rem;
@ -103,11 +104,17 @@
}
.subtitle, .header.preview .subtitle {
color: var(--text-color-light);
&.is-1 { font-size: var(--subtitle-1-sz); }
&.is-2 { font-size: var(--subtitle-2-sz); }
&.is-3 { font-size: var(--subtitle-3-sz); }
}
.title + .subtitle {
padding-top: 0em !important;
}
.headings a, a.heading, a.subtitle {
text-decoration: none !important;
}
@ -117,7 +124,7 @@
&:not(:empty) {
// border-bottom: 1px var(--heading-bg) solid;
color: var(--heading-fg);
// color: var(--heading-fg);
padding: v.$mp-2;
margin-top: 0em !important;
vertical-align: top;
@ -245,9 +252,8 @@
> * { margin: 0em; }
.column { padding: 0em; }
a {
color: var(--text-color);
}
a { color: var(--text-color); }
a:hover { color: var(--heading-link-hv-fg) !important; }
}
&.tiny {
@ -400,10 +406,6 @@
// ---- card
:root {
--preview-card-width: 20rem;
}
.preview-card {
display: flex;
flex-direction: column;
@ -412,11 +414,16 @@
margin-bottom: auto;
background-color: var(--preview-bg) !important;
transition: box-shadow 0.2s;
&:hover figure {
box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
&:hover {
figure {
box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
}
a {
color: var(--heading-link-hv-fg);
}
}
.headings {
@ -427,14 +434,11 @@
}
.title {
// background-color: var(--preview-heading-bg-color);
// max-height: 5rem;
overflow: hidden;
}
.subtitle {
// background-color: var(--main-color-light);
font-size: v.$text-size-medium;
font-size: v.$text-size-2;
}
}
@ -444,6 +448,7 @@
figure {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
border: 1px #c4c4c4 solid;
height: var(--cover-h);
width: var(--cover-w);
}
@ -456,56 +461,10 @@
}
}
/*
height: var(--preview-cover-size);
width: var(--preview-cover-size);
&.small {
height: var(--preview-cover-small-size);
width: var(--preview-cover-small-size);
}
&.tiny {
height: var(--preview-cover-tiny-size);
width: var(--preview-cover-tiny-size);
}
&:not(.header) {
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
}
.heading {
background-color: var(--preview-heading-bg-color);
}
.title {
max-height: calc( var(--preview-cover-size) / 2 );
overflow: hidden;
}
.card-grid & {
min-width: unset;
}
.actions {
position: absolute;
bottom: v.$mp-3;
right: v.$mp-3;
label {
display: none;
}
}*/
}
// ---- grid
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: v.$mp-4;
}
.list-grid {
display: grid;
grid-template-columns: 1fr 1fr;

6
assets/src/assets/public.scss
View File

@ -20,16 +20,14 @@
section.container {
margin-top: v.$mp-3;
margin-bottom: v.$mp-4;
> .title {
font-size: var(--title-2-sz);
clear: both;
margin-bottom: v.$mp-4;
margin: v.$mp-3 0;
}
&:not(:last-child) {
margin-bottom: v.$mp-3;
}
}
}

3
assets/src/assets/vars.scss
View File

@ -45,9 +45,8 @@ $weight-bolder: 500;
$weight-bold: 700;
$screen-very-small: 400px;
//TODO: switch small & smaller
$screen-small: 600px;
$screen-smaller: 800px;
$screen-smaller: 900px;
$screen-normal: 1024px;
$screen-wider: 1280px;
$screen-wide: 1380px;

4
assets/src/components/AEpisode.vue
View File

@ -1,7 +1,5 @@
<template>
<div>
<slot :page="page" :podcasts="podcasts"></slot>
</div>
<slot :page="page" :podcasts="podcasts"></slot>
</template>
<script>