✨ Add inline option to detailbox

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",
+            ),
+        ),
+    ]

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):

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 %}

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'

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) }
+        }
+    })
+  })

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;
+}