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

#132 | #121: backoffice / dev-1.0-121 #131

Merged
thomas merged 151 commits from dev-1.0-121 into develop-1.0 2024-04-28 20:02:14 +00:00
Conversation 2 Commits 151 Files Changed 348 +87 -250
17 changed files with 87 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ad90255570 - Show all commits

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

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

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

@ -9,10 +9,11 @@
--subtitle-2-sz: 1.4rem; --subtitle-2-sz: 1.4rem;
--subtitle-3-sz: 1.2rem; --subtitle-3-sz: 1.2rem;
--heading-font-family: default; --heading-font-family: default;
--heading-bg: var(--hg-color); --heading-bg: var(--main-color);
--heading-fg: var(--text-color); --heading-fg: var(--text-color);
--heading-hg-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-w: 14rem;
--cover-h: 14rem; --cover-h: 14rem;
--cover-small-w: 10rem; --cover-small-w: 10rem;
@ -91,6 +92,9 @@
font-size: var(--title-3-sz); font-size: var(--title-3-sz);
} }
.subtitle, .header.preview .subtitle {
color: var(--text-color-light);
}
.subtitle.is-1, .header.preview .subtitle.is-1 { .subtitle.is-1, .header.preview .subtitle.is-1 {
font-size: var(--subtitle-1-sz); font-size: var(--subtitle-1-sz);
} }
@ -101,6 +105,10 @@
font-size: var(--subtitle-3-sz); font-size: var(--subtitle-3-sz);
} }
.title + .subtitle {
padding-top: 0em !important;
}
.headings a, a.heading, a.subtitle { .headings a, a.heading, a.subtitle {
text-decoration: none !important; text-decoration: none !important;
} }
@ -109,7 +117,6 @@
display: inline-block; display: inline-block;
} }
.heading:not(:empty) { .heading:not(:empty) {
color: var(--heading-fg);
padding: 0.4rem; padding: 0.4rem;
margin-top: 0em !important; margin-top: 0em !important;
vertical-align: top; vertical-align: top;
@ -155,6 +162,9 @@
.preview .headings a { .preview .headings a {
color: var(--text-color); color: var(--text-color);
} }
.preview .headings a:hover {
color: var(--heading-link-hv-fg) !important;
}
.preview.tiny .content { .preview.tiny .content {
font-size: 1rem; font-size: 1rem;
} }
@ -270,10 +280,6 @@
flex-grow: 1; flex-grow: 1;
} }
:root {
--preview-card-width: 20rem;
}
.preview-card { .preview-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -282,49 +288,13 @@
margin-bottom: auto; margin-bottom: auto;
background-color: var(--preview-bg) !important; background-color: var(--preview-bg) !important;
transition: box-shadow 0.2s; 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 { .preview-card:hover figure {
box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; 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 { .preview-card .headings {
margin-top: 0.4rem; margin-top: 0.4rem;
} }
@ -335,7 +305,7 @@
overflow: hidden; overflow: hidden;
} }
.preview-card .headings .subtitle { .preview-card .headings .subtitle {
font-size: 1.4rem; font-size: 1.2rem;
} }
.preview-card .card-content { .preview-card .card-content {
flex-grow: 1; flex-grow: 1;
@ -343,6 +313,7 @@
} }
.preview-card .card-content figure { .preview-card .card-content figure {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
border: 1px #c4c4c4 solid;
height: var(--cover-h); height: var(--cover-h);
width: var(--cover-w); width: var(--cover-w);
} }
@ -353,12 +324,6 @@
right: 0rem; right: 0rem;
} }
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.2rem;
}
.list-grid { .list-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -366,7 +331,7 @@
gap: 1.2rem; gap: 1.2rem;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 900px) {
.list-grid { .list-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -7362,14 +7327,12 @@ a.tag:hover {
} }
.page section.container { .page section.container {
margin-top: 0.6rem; margin-top: 0.6rem;
margin-bottom: 1.2rem;
} }
.page section.container > .title { .page section.container > .title {
font-size: var(--title-2-sz); font-size: var(--title-2-sz);
clear: both; clear: both;
margin-bottom: 1.2rem; margin: 0.6rem 0;
}
.page section.container:not(:last-child) {
margin-bottom: 0.6rem;
} }
.dropdown-item { .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__) { /***/ (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" %} {% extends "aircox/page_detail.html" %}
{% comment %}Detail page for regular articles{% endcomment %} {% 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 content-container %}
{{ block.container }}
<a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}"> <a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
<template v-slot="{podcasts,page}"> <template v-slot="{podcasts,page}">
@ -13,7 +12,7 @@
{% if object.podcasts %} {% if object.podcasts %}
{% spaceless %} {% spaceless %}
<section class="container no-border"> <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" <a-playlist v-if="page" :set="podcasts"
name="{{ page.title }}" name="{{ page.title }}"
list-class="menu-list" item-class="menu-item" list-class="menu-list" item-class="menu-item"
@ -26,7 +25,7 @@
{% if tracks %} {% if tracks %}
<section class="container"> <section class="container">
<h3 class="title is-3">{% translate "Playlist" %}</h3> <h3 class="title">{% translate "Playlist" %}</h3>
<table class="table is-hoverable is-fullwidth"> <table class="table is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
@ -48,8 +47,6 @@
</table> </table>
</section> </section>
{% endif %} {% endif %}
</template> </template>
</a-episode> </a-episode>
{% endblock %} {% endblock %}

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

@ -55,7 +55,7 @@
{% if podcasts %} {% if podcasts %}
<section class="container"> <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") %} {% include "./widgets/carousel.html" with objects=podcasts url_name="podcast-list" url_label=_("All podcasts") %}
</section> </section>
{% endif %} {% endif %}

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

@ -46,7 +46,7 @@ Context:
{% if related_objects %} {% if related_objects %}
<section class="container"> <section class="container">
{% with models=object|verbose_name:True %} {% 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 %} {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %}
{% endwith %} {% endwith %}

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

@ -37,7 +37,7 @@
{% if episodes %} {% if episodes %}
<section class="container"> <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") %} {% include "./widgets/carousel.html" with objects=episodes url_name="episode-list" url_parent=object url_label=_("All episodes") %}
</section> </section>
{% endif %} {% endif %}
@ -45,7 +45,7 @@
{% if articles %} {% if articles %}
<section class="container"> <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") %} {% include "./widgets/carousel.html" with objects=articles url_name="article-list" url_parent=object url_label=_("All articles") %}
</section> </section>
{% endif %} {% endif %}

4
aircox/urls.py
View File

@ -46,7 +46,9 @@ urls = [
name="article-list", name="article-list",
), ),
path( 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( path(
_("articles/<slug:slug>/"), _("articles/<slug:slug>/"),

5
aircox/views/article.py
View File

@ -7,13 +7,8 @@ __all__ = ["ArticleDetailView", "ArticleListView"]
class ArticleDetailView(PageDetailView): class ArticleDetailView(PageDetailView):
model = Article model = Article
def get_sidebar_queryset(self):
qs = Article.objects.published().select_related("cover").order_by("-pub_date")
return qs
class ArticleListView(PageListView): class ArticleListView(PageListView):
model = Article model = Article
has_headline = True
parent_model = Program parent_model = Program
attach_to_value = StaticPage.Target.ARTICLES 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.utils.translation import gettext_lazy as _
from django.views.generic import DetailView, ListView from django.views.generic import DetailView, ListView
from django.urls import reverse from django.urls import reverse
@ -7,7 +7,6 @@ from honeypot.decorators import check_honeypot
from ..filters import PageFilters from ..filters import PageFilters
from ..forms import CommentForm from ..forms import CommentForm
from ..models import Comment, Category from ..models import Comment, Category
from ..utils import Redirect
from .base import BaseView from .base import BaseView
from .mixins import AttachedToMixin, FiltersMixin, ParentMixin from .mixins import AttachedToMixin, FiltersMixin, ParentMixin
@ -22,6 +21,13 @@ __all__ = [
class BasePageMixin: class BasePageMixin:
category = None 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): def get_category(self, page, **kwargs):
if page: if page:
if getattr(page, "category_id", None): if getattr(page, "category_id", None):
@ -53,7 +59,7 @@ class BasePageListView(AttachedToMixin, BasePageMixin, ParentMixin, BaseView, Li
return super().get(*args, **kwargs) return super().get(*args, **kwargs)
def get_queryset(self): def get_queryset(self):
query = super().get_queryset().select_subclasses().published().select_related("cover") query = super().get_queryset()
if self.category: if self.category:
query = query.filter(category=self.category) query = query.filter(category=self.category)
return query return query
@ -81,9 +87,6 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
template_name = "aircox/basepage_detail.html" template_name = "aircox/basepage_detail.html"
context_object_name = "page" context_object_name = "page"
def get(self, *args, **kwargs):
return super().get(*args, **kwargs)
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
if self.object.cover: if self.object.cover:
kwargs.setdefault("cover", self.object.cover.url) kwargs.setdefault("cover", self.object.cover.url)
@ -91,27 +94,11 @@ class BasePageDetailView(BasePageMixin, BaseView, DetailView):
kwargs.setdefault("title", self.object.display_title) kwargs.setdefault("title", self.object.display_title)
return super().get_context_data(**kwargs) 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): def get_object(self):
if getattr(self, "object", None): if getattr(self, "object", None):
return self.object return self.object
obj = super().get_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) self.category = self.get_category(obj)
return obj return obj

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

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

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

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

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

@ -20,16 +20,14 @@
section.container { section.container {
margin-top: v.$mp-3; margin-top: v.$mp-3;
margin-bottom: v.$mp-4;
> .title { > .title {
font-size: var(--title-2-sz); font-size: var(--title-2-sz);
clear: both; 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; $weight-bold: 700;
$screen-very-small: 400px; $screen-very-small: 400px;
//TODO: switch small & smaller
$screen-small: 600px; $screen-small: 600px;
$screen-smaller: 800px; $screen-smaller: 900px;
$screen-normal: 1024px; $screen-normal: 1024px;
$screen-wider: 1280px; $screen-wider: 1280px;
$screen-wide: 1380px; $screen-wide: 1380px;

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

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