From 59a9cbc42fd94b58e564fa648d3606e8ca32e671 Mon Sep 17 00:00:00 2001
From: Kara Engelhardt <kara.engelhardt@okfn.de>
Date: Mon, 2 Dec 2024 19:02:24 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20inline=20option=20to=20detail?=
 =?UTF-8?q?box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...025_detailsboxcmsplugin_inline_and_more.py | 33 +++++++++++++++++++
 fragdenstaat_de/fds_blog/models.py            |  1 +
 .../templates/fds_blog/detailsbox.html        | 27 +++++++++++----
 frontend/javascript/misc.ts                   |  1 +
 frontend/javascript/misc/inline-detailbox.ts  | 11 +++++++
 frontend/styles/blog.scss                     | 20 ++++++++++-
 6 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 fragdenstaat_de/fds_blog/migrations/0025_detailsboxcmsplugin_inline_and_more.py
 create mode 100644 frontend/javascript/misc/inline-detailbox.ts

diff --git a/fragdenstaat_de/fds_blog/migrations/0025_detailsboxcmsplugin_inline_and_more.py b/fragdenstaat_de/fds_blog/migrations/0025_detailsboxcmsplugin_inline_and_more.py
new file mode 100644
index 000000000..a96c6a816
--- /dev/null
+++ b/fragdenstaat_de/fds_blog/migrations/0025_detailsboxcmsplugin_inline_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.16 on 2024-12-02 15:27
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("fds_blog", "0024_alter_category_donation_banner"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="detailsboxcmsplugin",
+            name="inline",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name="article",
+            name="content_template",
+            field=models.CharField(
+                choices=[
+                    ("fds_blog/_article_detail.html", "Default template"),
+                    ("fds_blog/content/_article_no_image.html", "No image in article"),
+                    ("fds_blog/content/_article_video_header.html", "Video header"),
+                ],
+                default="fds_blog/_article_detail.html",
+                help_text="Template used to display the article's content.",
+                max_length=250,
+                verbose_name="content template",
+            ),
+        ),
+    ]
diff --git a/fragdenstaat_de/fds_blog/models.py b/fragdenstaat_de/fds_blog/models.py
index fb7ec7398..ebcb7aaf5 100644
--- a/fragdenstaat_de/fds_blog/models.py
+++ b/fragdenstaat_de/fds_blog/models.py
@@ -691,6 +691,7 @@ def __str__(self):
 class DetailsBoxCMSPlugin(CMSPlugin):
     title = models.CharField(max_length=100, blank=True)
     content = models.TextField(blank=True)
+    inline = models.BooleanField(default=False)
 
 
 class InfotextboxCMSPlugin(CMSPlugin):
diff --git a/fragdenstaat_de/fds_blog/templates/fds_blog/detailsbox.html b/fragdenstaat_de/fds_blog/templates/fds_blog/detailsbox.html
index 0dbda3f5a..8b39c3cb5 100644
--- a/fragdenstaat_de/fds_blog/templates/fds_blog/detailsbox.html
+++ b/fragdenstaat_de/fds_blog/templates/fds_blog/detailsbox.html
@@ -2,9 +2,24 @@
 {% load markup %}
 {% load static %}
 {% load blog_tags %}
-<details>
-    <summary>
-        <strong>{{ instance.title }}</strong>
-    </summary>
-    {{ instance.content|safe }}
-</details>
+{% spaceless %}
+    {% if instance.inline %}
+        {% if request.resolver_match.url_name == "cms_placeholder_edit_plugin" %}
+            <a class="inline_detailbox--title">{{ instance.title }}⊕</a>
+        {% else %}
+            <span class="inline_detailbox">
+                <a class="inline_detailbox--title">{{ instance.title }}</a>
+                <template>
+                    <div class="inline_detailbox--content">{{ instance.content|safe }}</div>
+                </template>
+            </span>
+        {% endif %}
+    {% else %}
+        <details>
+            <summary>
+                <strong>{{ instance.title }}</strong>
+            </summary>
+            {{ instance.content|safe }}
+        </details>
+    {% endif %}
+{% endspaceless %}
diff --git a/frontend/javascript/misc.ts b/frontend/javascript/misc.ts
index 16bfba8ca..76c2f632e 100644
--- a/frontend/javascript/misc.ts
+++ b/frontend/javascript/misc.ts
@@ -7,3 +7,4 @@ import './misc/secpol-violation'
 import './misc/shuffle-items'
 import './misc/userfill-forms'
 import './misc/video-modals'
+import './misc/inline-detailbox'
diff --git a/frontend/javascript/misc/inline-detailbox.ts b/frontend/javascript/misc/inline-detailbox.ts
new file mode 100644
index 000000000..1e277ea75
--- /dev/null
+++ b/frontend/javascript/misc/inline-detailbox.ts
@@ -0,0 +1,11 @@
+const containers = document.querySelectorAll('.inline_detailbox')
+containers.forEach((container) => {
+    const template = container.getElementsByTagName('template')[0];
+    container.addEventListener('click', () => {
+        if (container.toggleAttribute("expanded")) {
+            container.appendChild(template.content.cloneNode(true));
+        } else {
+            for (const elem of container.getElementsByClassName("inline_detailbox--content")) { container.removeChild(elem) }
+        }
+    })
+  })
diff --git a/frontend/styles/blog.scss b/frontend/styles/blog.scss
index 364748371..6fa5b08fe 100644
--- a/frontend/styles/blog.scss
+++ b/frontend/styles/blog.scss
@@ -111,7 +111,8 @@ $blog-standout-width: 72rem;
   }
 
   > details,
-  > div.infotextbox {
+  > div.infotextbox,
+  .inline_detailbox--content {
     color: var(--#{$prefix}primary-text-emphasis);
     background-color: var(--#{$prefix}primary-bg-subtle);
 
@@ -123,6 +124,10 @@ $blog-standout-width: 72rem;
       padding-bottom: 1rem;
     }
   }
+
+  .inline_detailbox--content {
+    display: flex
+  }
 }
 
 .blog-article .text-container {
@@ -198,3 +203,16 @@ aside.article-banner {
     }
   }
 }
+
+.inline_detailbox > .inline_detailbox--title::after {
+  content: " ⊕";
+}
+
+
+.inline_detailbox[expanded] > .inline_detailbox--title::after {
+  content: " ⊖";
+}
+
+.inline_detailbox {
+  padding-bottom: 1em;
+}