add popup banner format

data/homepage.yml

@@ -1,16 +1,14 @@
 top_banner:
   enable: true
-  text: >+
+  text: |
     Unser früherer Schüler Dominic Wagner verunglückte mit 17 Jahren schwer.
     Seitdem braucht er 1:1 Pflege. Bitte unterstützen Sie die Finanzierung
     dafür:
     [https://www.gofundme.com/f/eigenanteil-der-pflegekosten](https://www.gofundme.com/f/eigenanteil-der-pflegekosten)
-
-
-
   color: "#19aa96"
   font_color: "#ffffff"
   icon: plus-box
+  large: true
   temporarily:
     enable: false
     start_date: 2024-11-29

layouts/partials/header.html

@@ -85,9 +85,14 @@
 </header>
 
 {{ $top_banner := .Site.Data.homepage.top_banner }}
-  {{ if and $top_banner.enable }}
-  {{ if or (not $top_banner.temporarily.enable) (and $top_banner.temporarily.enable (and (le ($top_banner.temporarily.start_date | time.AsTime) now) (ge ($top_banner.temporarily.end_date | time.AsTime) now))) }}
-  {{ with $top_banner }}
+{{ if and $top_banner.enable }}
+{{ if or (not $top_banner.temporarily.enable) (and $top_banner.temporarily.enable (and (le ($top_banner.temporarily.start_date | time.AsTime) now) (ge ($top_banner.temporarily.end_date | time.AsTime) now))) }}
+{{ with $top_banner }}
+{{ if .large }}
+  {{ $title := "Willkommen auf der Website des Georg-Cantor-Gymnasiums!" }}
+  {{ partial "modal" (dict "title" $title "content" (.text | markdownify)) }}
+  <script>$(window).on("DOMContentLoaded", () => $('#{{ md5 $title }}').modal('show'));</script>
+{{ else }}
   <div id="top-banner" class="p-3" style="background: {{ .color }}" data-pagefind-ignore>
     <div class="container">
       <div class="no-gutters align-items-center">
@@ -95,8 +100,9 @@
       </div>
     </div>
   </div>
-  {{ end }}
-  {{ end }}
+{{ end }}
+{{ end }}
+{{ end }}
 {{ end }}
 
 <div id="pagefind-search" class="modal fade" data-pagefind-ignore>
@@ -107,4 +113,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

static/admin/config/collections/settings-collection.js

@@ -57,6 +57,12 @@ const SettingsCollection = {
               required: false,
             },
             IconList,
+            {
+              name: "large",
+              label: "Popup-Fenster (Vollbild)",
+              widget: "boolean",
+              required: false,
+            },
             {
               name: "temporarily",
               label: "Zeitschaltung",