From e124e6fb158bdfcde0c8b236ec164aa863357652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com> Date: Tue, 6 Sep 2022 13:41:32 +0200 Subject: [PATCH] [ADD] dark theme for article preview --- .../0030_mainarticlepage_is_black.py | 18 ++++++++++++++++++ main/models.py | 2 ++ .../how-we-work/work-article-preview.mustache | 2 +- .../organisms/main-articles-timeline.mustache | 2 +- main/styleguide/source/css/atoms/heading.pcss | 2 +- .../source/css/molecules/articles.pcss | 6 ++++++ main/styleguide/source/css/style.pcss | 1 + .../main/includes/work_article_preview.html | 2 +- 8 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 main/migrations/0030_mainarticlepage_is_black.py create mode 100644 main/styleguide/source/css/molecules/articles.pcss diff --git a/main/migrations/0030_mainarticlepage_is_black.py b/main/migrations/0030_mainarticlepage_is_black.py new file mode 100644 index 00000000..473f1c36 --- /dev/null +++ b/main/migrations/0030_mainarticlepage_is_black.py @@ -0,0 +1,18 @@ +# Generated by Django 4.0.7 on 2022-09-06 11:11 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("main", "0029_mainhomepage_gdpr_and_cookies_page"), + ] + + operations = [ + migrations.AddField( + model_name="mainarticlepage", + name="is_black", + field=models.BooleanField(default=False, verbose_name="Má tmavé pozadí?"), + ), + ] diff --git a/main/models.py b/main/models.py index 5a4d1708..4391ac3f 100644 --- a/main/models.py +++ b/main/models.py @@ -451,6 +451,7 @@ class MainArticlePage( article_type = models.PositiveSmallIntegerField( "Typ článku", choices=ARTICLE_TYPES.choices, default=ARTICLE_TYPES.PRESS_RELEASE ) + is_black = models.BooleanField("Má tmavé pozadí?", default=False) content = StreamField( [ @@ -485,6 +486,7 @@ class MainArticlePage( content_panels = ArticleMixin.content_panels + [ FieldPanel("article_type"), FieldPanel("author_page"), + FieldPanel("is_black"), FieldPanel("region"), FieldPanel("tags"), ] diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache index 76bbdf35..23bc6dea 100644 --- a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache +++ b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache @@ -1,4 +1,4 @@ -<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8"> +<div class="article-box p-7 flex flex-col max-w-xl border border-grey-150 mb-8 {{ classes }}"> <a href="#"> <img src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt="" class="mb-7 w-full"> diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache index 97425639..f108d695 100644 --- a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache +++ b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache @@ -14,7 +14,7 @@ </div> </div> <div class="article-timeline-grid__right-article xl:pt-14"> - {{> molecules-work-article-preview }} + {{> molecules-work-article-preview(classes: "dark-theme") }} </div> </div> </div> diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss index cee18087..7e5a98d1 100644 --- a/main/styleguide/source/css/atoms/heading.pcss +++ b/main/styleguide/source/css/atoms/heading.pcss @@ -200,6 +200,6 @@ p { letter-spacing: -0.01em; } a { - @apply font-semibold; + @apply font-bold; } } diff --git a/main/styleguide/source/css/molecules/articles.pcss b/main/styleguide/source/css/molecules/articles.pcss new file mode 100644 index 00000000..d4aa9578 --- /dev/null +++ b/main/styleguide/source/css/molecules/articles.pcss @@ -0,0 +1,6 @@ +.article-box { + &.dark-theme { + background-color: #4C4C4C; + color: white; + } +} diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss index 27af7104..f2c0a1b3 100644 --- a/main/styleguide/source/css/style.pcss +++ b/main/styleguide/source/css/style.pcss @@ -25,6 +25,7 @@ @import "./atoms/heading.pcss"; @import "./atoms/icons.pcss"; +@import "./molecules/articles.pcss"; @import "./molecules/block-quote.pcss"; @import "./molecules/carousels.pcss"; @import "./molecules/contact_box.pcss"; diff --git a/main/templates/main/includes/work_article_preview.html b/main/templates/main/includes/work_article_preview.html index 84aa4959..a63c4e51 100644 --- a/main/templates/main/includes/work_article_preview.html +++ b/main/templates/main/includes/work_article_preview.html @@ -1,6 +1,6 @@ {% load wagtailimages_tags %} -<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8"> +<div class="article-box {% if article.is_black %}dark-theme {% endif %}p-7 flex flex-col max-w-xl border border-grey-150 mb-8"> {% image article_page.image max-500x500 as image %} <a href="{{ article_page.url }}"> <img -- GitLab