From ad902555706b9c641ad8e4da78fdda573b9dbfe2 Mon Sep 17 00:00:00 2001 From: bkfox Date: Thu, 1 Feb 2024 17:29:35 +0100 Subject: [PATCH] design --- aircox/static/aircox/css/admin.css | 73 +++++------------- aircox/static/aircox/css/chunk-common.css | 1 + aircox/static/aircox/css/public.css | 79 +++++-------------- aircox/static/aircox/js/chunk-common.js | 2 +- aircox/templates/aircox/article_detail.html | 28 ------- aircox/templates/aircox/episode_detail.html | 7 +- aircox/templates/aircox/home.html | 2 +- aircox/templates/aircox/page_detail.html | 2 +- aircox/templates/aircox/program_detail.html | 4 +- aircox/urls.py | 4 +- aircox/views/article.py | 5 -- aircox/views/page.py | 31 +++----- assets/src/assets/common.scss | 1 + assets/src/assets/components.scss | 85 ++++++--------------- assets/src/assets/public.scss | 6 +- assets/src/assets/vars.scss | 3 +- assets/src/components/AEpisode.vue | 4 +- 17 files changed, 87 insertions(+), 250 deletions(-) diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css index dbb269b..7de5308 100644 --- a/aircox/static/aircox/css/admin.css +++ b/aircox/static/aircox/css/admin.css @@ -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; } diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index 7b1af2f..343894a 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -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; diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css index 794d585..a773a46 100644 --- a/aircox/static/aircox/css/public.css +++ b/aircox/static/aircox/css/public.css @@ -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 { diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index e4a5b85..952cc86 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -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"); /***/ }), diff --git a/aircox/templates/aircox/article_detail.html b/aircox/templates/aircox/article_detail.html index 5409d07..0de2a20 100644 --- a/aircox/templates/aircox/article_detail.html +++ b/aircox/templates/aircox/article_detail.html @@ -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 %} -
- {% comment %}Translators: in page detail sidebar{% endcomment %} -

{% translate "Latest news" %}

- - {% for object in sidebar_object_list %} - {% include "aircox/widgets/page_item.html" %} - {% endfor %} - -
- -
-{% endif %} -{% endblock %} diff --git a/aircox/templates/aircox/episode_detail.html b/aircox/templates/aircox/episode_detail.html index 65755f3..8ad5be2 100644 --- a/aircox/templates/aircox/episode_detail.html +++ b/aircox/templates/aircox/episode_detail.html @@ -4,7 +4,6 @@ {% block content-container %} -{{ block.container }} {% endblock %} diff --git a/aircox/templates/aircox/home.html b/aircox/templates/aircox/home.html index 7961224..bd4976b 100644 --- a/aircox/templates/aircox/home.html +++ b/aircox/templates/aircox/home.html @@ -55,7 +55,7 @@ {% if podcasts %}
-

{% translate "Last podcasts" %}

+

{% translate "Last podcasts" %}

{% include "./widgets/carousel.html" with objects=podcasts url_name="podcast-list" url_label=_("All podcasts") %}
{% endif %} diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html index 53a2118..c133f3f 100644 --- a/aircox/templates/aircox/page_detail.html +++ b/aircox/templates/aircox/page_detail.html @@ -46,7 +46,7 @@ Context: {% if related_objects %}
{% with models=object|verbose_name:True %} -

{% blocktranslate %}Related {{models}}{% endblocktranslate %}

+

{% blocktranslate %}Related {{models}}{% endblocktranslate %}

{% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %} {% endwith %} diff --git a/aircox/templates/aircox/program_detail.html b/aircox/templates/aircox/program_detail.html index 7fd86f9..eee9336 100644 --- a/aircox/templates/aircox/program_detail.html +++ b/aircox/templates/aircox/program_detail.html @@ -37,7 +37,7 @@ {% if episodes %}
-

{% translate "Last Episodes" %}

+

{% translate "Last Episodes" %}

{% include "./widgets/carousel.html" with objects=episodes url_name="episode-list" url_parent=object url_label=_("All episodes") %}
{% endif %} @@ -45,7 +45,7 @@ {% if articles %}
-

{% translate "Last Articles" %}

+

{% translate "Last Articles" %}

{% include "./widgets/carousel.html" with objects=articles url_name="article-list" url_parent=object url_label=_("All articles") %}
{% endif %} diff --git a/aircox/urls.py b/aircox/urls.py index 97d3c6a..d973f51 100755 --- a/aircox/urls.py +++ b/aircox/urls.py @@ -46,7 +46,9 @@ urls = [ name="article-list", ), path( - _("articles/c//"), views.ArticleListView.as_view(model=models.Article), name="article-list" + _("articles/c//"), + views.ArticleListView.as_view(model=models.Article), + name="article-list", ), path( _("articles//"), diff --git a/aircox/views/article.py b/aircox/views/article.py index 60f856f..62ceac9 100644 --- a/aircox/views/article.py +++ b/aircox/views/article.py @@ -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 diff --git a/aircox/views/page.py b/aircox/views/page.py index 433ab02..e6cbc51 100644 --- a/aircox/views/page.py +++ b/aircox/views/page.py @@ -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 diff --git a/assets/src/assets/common.scss b/assets/src/assets/common.scss index 85e18af..d9911b1 100644 --- a/assets/src/assets/common.scss +++ b/assets/src/assets/common.scss @@ -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; diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss index 3230b88..9d40b5b 100644 --- a/assets/src/assets/components.scss +++ b/assets/src/assets/components.scss @@ -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; diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss index 56d464c..5a55c9c 100644 --- a/assets/src/assets/public.scss +++ b/assets/src/assets/public.scss @@ -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; - } } } diff --git a/assets/src/assets/vars.scss b/assets/src/assets/vars.scss index 850dcfc..7493c8a 100644 --- a/assets/src/assets/vars.scss +++ b/assets/src/assets/vars.scss @@ -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; diff --git a/assets/src/components/AEpisode.vue b/assets/src/components/AEpisode.vue index abeec35..bc14994 100644 --- a/assets/src/components/AEpisode.vue +++ b/assets/src/components/AEpisode.vue @@ -1,7 +1,5 @@