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