update cms previews to new layouts. close #234

layouts/_default/single.html

@@ -22,10 +22,8 @@
               {{ end }}
           </div>
         </div>
-        <div class="my-4">
+        <div class="border-bottom my-4"></div>
-          <div class="border-bottom"></div>
+        <div class="content text-justify mb-4">
-        </div>
-        <div class="mb-4 content text-justify">
           {{ .Content }}
         </div>
       </div>

layouts/author/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section class="section bg-light">
+<section class="section">
   <div class="container">
 		<div class="text-center">
 		  {{ if .Params.image }}
@@ -19,7 +19,7 @@
   </div>
 </section>
 
-<section class="section pt-0 bg-light">
+<section class="section pt-0">
   <div class="container">
     <div class="title text-center">
 		  <h2 class="mb-4">Geschrieben von {{ .Title }}</h2>

layouts/partials/termin.html

@@ -1,8 +1,8 @@
 <div class="card hover-shadow border-primary mb-4 p-0">
   <div class="row g-0">
     <div class="col-md-3 text-center p-4 bg-primary text-white rounded">
-      <span class="h2 d-block">{{ time.Format "2" .date}}</span>
+      <span class="h2">{{ time.Format "2" .date}}</span>
-      <span class="d-block">{{ time.Format "Jan 2006" .date}}</span>
+      <span>{{ time.Format "Jan 2006" .date}}</span>
       {{ with .enddate }}<br>bis {{ time.Format "2 Jan 2006" . }}{{ end }}
     </div>
     <div class="col-md-9">

layouts/partials/tile-modals.html

@@ -1,11 +1,9 @@
 <section class="section superhaufen">
   <div class="container">
-    <div class="row">
+    <div class="content text-justify">
-      <div class="col-12 content">
       {{ .Content }}
     </div>
   </div>
-  </div>
   <div class="container">
     <div class="row">
       {{ range .Params.tiles }}

static/admin/previews/page-previews/abiturienten-preview.js

@@ -1,4 +1,9 @@
-import { Container, PageHeader, Section, Row } from "./components/index.js";
+import {
+  Container,
+  PageHeader,
+  Section,
+  ContentJustify,
+} from "./components/index.js";
 
 const AbiturientenPreview = ({ widgetFor, entry, collection, fields }) => {
   const imageField = useMemo(
@@ -15,16 +20,10 @@ const AbiturientenPreview = ({ widgetFor, entry, collection, fields }) => {
   return [
     PageHeader(entry),
     Section(
-      Container(
+      Container([
-        Row([
+        h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
-          h(
+        ContentJustify(widgetFor("body")),
-            "div",
-            { className: "col-12 mb-4" },
-            h("img", { className: "img-fluid w-100", src: imageUrl })
-          ),
-          h("div", { className: "col-12 content" }, widgetFor("body")),
       ])
-      )
     ),
   ];
 };

static/admin/previews/page-previews/about-preview.js

@@ -1,4 +1,10 @@
-import { PageHeader } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Row,
+  Section,
+} from "./components/index.js";
 
 const AboutPreview = ({ widgetFor, widgetsFor, entry, fields, collection }) => {
   const imageField = useMemo(
@@ -14,34 +20,18 @@ const AboutPreview = ({ widgetFor, widgetsFor, entry, fields, collection }) => {
   );
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container([
-      { className: "section" },
-      h(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-12" },
         h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
-            widgetFor("body")
+        ContentJustify(widgetFor("body")),
-          )
+      ])
-        )
-      )
     ),
     entry.data.stats.enable
       ? h(
           "section",
           { className: "section bg-primary" },
-          h(
+          Container(
-            "div",
+            Row(
-            { className: "container" },
-            h(
-              "div",
-              { className: "row" },
               widgetsFor("stats").data.zahlen.map((element) => {
                 return h(
                   "div",

static/admin/previews/page-previews/anmeldeformular-preview.js

@@ -1,17 +1,11 @@
-import { PageHeader } from "./components/index.js";
+import { Container, PageHeader, Row, Section } from "./components/index.js";
 
 const AnmeldeformularPreview = ({ widgetFor, entry }) => {
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container(
-      { className: "section bg-body-tertiary" },
+        Row(
-      h(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
           h(
             "div",
             { className: "col-lg-8 mb-4 mb-lg-0" },

static/admin/previews/page-previews/anmeldung-preview.js

@@ -1,22 +1,18 @@
-import { PageHeader } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Row,
+  Section,
+} from "./components/index.js";
 
 const AnmeldungPreview = ({ widgetsFor, widgetFor, entry }) => {
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container([
-      { className: "section" },
+        ContentJustify(widgetFor("body")),
-      h(
+        Row(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row mb-4" },
-          h("div", { className: "col-md-6 content" }, widgetFor("body"))
-        ),
-        h(
-          "div",
-          { className: "row" },
           widgetsFor("elements").map(function (element, index) {
             return h(
               "div",
@@ -35,8 +31,8 @@ const AnmeldungPreview = ({ widgetsFor, widgetFor, entry }) => {
               )
             );
           })
-        )
+        ),
-      )
+      ])
     ),
   ];
 };

static/admin/previews/page-previews/author-preview.js

@@ -1,4 +1,4 @@
-import { PageHeader, md5 } from "./components/index.js";
+import { Container, PageHeader, Section, md5 } from "./components/index.js";
 
 const AuthorPreview = ({ widgetFor, entry, fields, collection }) => {
   const imageField = useMemo(
@@ -14,24 +14,11 @@ const AuthorPreview = ({ widgetFor, entry, fields, collection }) => {
 
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container([
-      { className: "section bg-light" },
-      h(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-lg-10 mx-auto" },
         h(
           "div",
           { className: "text-center" },
-              h(
-                "figure",
-                {},
           h("img", {
             className: "rounded-circle img-fluid mb-4",
             src:
@@ -40,31 +27,15 @@ const AuthorPreview = ({ widgetFor, entry, fields, collection }) => {
                 md5(entry.data.email) +
                 "?s=128&pg&d=identicon",
             width: "128px",
+            height: "128px",
           }),
-                h(
+          h("h4", { className: "fw-bold" }, entry.data.title),
-                  "figcaption",
-                  {},
-                  h("h4", { className: "fw-bold" }, entry.data.title)
-                )
-              ),
           h("hr"),
           widgetFor("body"),
           h("hr"),
-              h(
+          entry.data.email ? h("i", { className: "mdi mdi-at" }) : null
-                "ul",
+        ),
-                { className: "list-inline" },
+      ])
-                entry.data.email
-                  ? h(
-                      "li",
-                      { className: "list-inline-item" },
-                      h("i", { className: "mdi mdi-at" })
-                    )
-                  : null
-              )
-            )
-          )
-        )
-      )
     ),
   ];
 };

static/admin/previews/page-previews/blog-preview.js

@@ -3,8 +3,6 @@ import {
   PageHeader,
   Section,
   Container,
-  Col12,
-  Row,
 } from "./components/index.js";
 
 const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
@@ -21,26 +19,20 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
   return [
     PageHeader(entry),
     Section(
-      Container(
+      Container([
-        Row([
+        h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
         h(
           "div",
-            { key: "cover-image", className: "col-12 mb-4" },
+          { className: "d-flex flex-wrap gap-2 justify-content-between" },
-            h("img", { className: "img-fluid w-100", src: imageUrl })
-          ),
-          Col12(
           h(
             "div",
-              { className: "row mb-3" },
+            { className: "text-body-secondary" },
-              h(
-                "div",
-                { className: "col-6 mb-md-0 text-body-tertiary" },
             h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
             widgetFor("author")
           ),
           h(
             "div",
-                { className: "col-6 mb-3 mb-md-0 text-body-tertiary" },
+            { className: "text-body-secondary" },
             h("span", { className: "fw-bold me-1" }, "Datum:"),
             entry.data.date
               ? DateFormat({
@@ -52,14 +44,11 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
                   },
                 })
               : ""
-              )
-            )
           ),
-          Row(
           h(
             "div",
-              { className: "col-12 mb-md-0 text-body-tertiary" },
+            { className: "text-body-secondary" },
-              h("span", { className: "fw-bold me-1" }, "Kategorie:"),
+            h("span", { className: "fw-bold me-1" }, "Kategorien:"),
             entry.data.categories
               ? entry.data.categories.map(
                   (category, index) => (index != 0 ? ", " : "") + category
@@ -67,21 +56,15 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
               : ""
           )
         ),
-          h(
+        h("div", { className: "border-bottom my-4" }),
-            "div",
-            { key: "border-bottom", className: "col-12 my-4" },
-            h("div", { className: "border-bottom" })
-          ),
         h(
           "div",
           {
-              key: "body-content",
+            className: "content text-justify mb-4",
-              className: "col-12 mb-5 content text-justify",
           },
           widgetFor("body")
         ),
       ])
-      )
     ),
   ];
 };

static/admin/previews/page-previews/cantorpreis-preview.js

@@ -3,7 +3,7 @@ import {
   Section,
   Container,
   Row,
-  Content,
+  ContentJustify,
 } from "./components/index.js";
 
 const CantorpreisPreview = ({ widgetFor, entry, fields, collection }) => {
@@ -26,19 +26,18 @@ const CantorpreisPreview = ({ widgetFor, entry, fields, collection }) => {
         Row([
           h(
             "div",
-            { className: "col-md-5 mb-5" },
+            { className: "col-md-5 mb-4" },
             h("img", {
-              className: "img-fluid w-75",
+              className: "img-fluid w-100",
               src: imageUrl,
-              alt: entry.data.name,
             })
           ),
           h(
             "div",
-            { className: "col-md-7 mb-5" },
+            { className: "col-md-7" },
             h("h3", {}, entry.data.name),
             h("h6", { className: "text-body-secondary" }, entry.data.title),
-            Content(widgetFor("body"))
+            ContentJustify(widgetFor("body"))
           ),
         ])
       )

static/admin/previews/page-previews/chronik-index-preview.js

@@ -1,4 +1,4 @@
-import { PageHeader } from "./components/index.js";
+import { Container, PageHeader, Section, Row } from "./components/index.js";
 
 const ChronikIndexPreview = ({
   widgetFor,
@@ -20,14 +20,10 @@ const ChronikIndexPreview = ({
   );
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container(widgetFor("body")),
-      { className: "section" },
-      h("div", { className: "container" }, widgetFor("body")),
       widgetsFor("infocard").data.enable
-        ? h(
+        ? Container(
-            "div",
-            { className: "container" },
             h(
               "div",
               { className: "card mb-3" },
@@ -68,34 +64,31 @@ const ChronikIndexPreview = ({
             )
           )
         : null,
-      h(
+      Container([
-        "div",
-        { className: "container" },
         h("h2", { className: "mb-4" }, "Informationsseiten"),
-        h(
+        Row(
-          "div",
-          { className: "row" },
           widgetsFor("links").map((element) =>
             h(
               "div",
-              { className: "col-lg-4 col-sm-6" },
+              { className: "col-lg-4 col-sm-6 d-flex align-items-stretch" },
               h(
                 "div",
                 {
-                  className: "card border-primary rounded-0 hover-shadow mb-4",
+                  className:
+                    "card border-primary rounded-0 hover-shadow mb-2 w-100",
                 },
                 h(
                   "div",
-                  { className: "card-body" },
+                  { className: "card-body d-flex flex-column" },
                   h(
                     "h4",
-                    { className: "card-title text-truncate" },
+                    { className: "card-title text-truncate mt-auto" },
                     h("a", { href: element.data.link }, element.data.title)
                   ),
                   h(
                     "a",
                     {
-                      className: "btn btn-primary btn-sm",
+                      className: "btn btn-primary btn-sm align-self-start",
                       href: element.data.link,
                     },
                     "Mehr anzeigen"
@@ -104,8 +97,8 @@ const ChronikIndexPreview = ({
               )
             )
           )
-        )
+        ),
-      )
+      ])
     ),
   ];
 };

static/admin/previews/page-previews/components/base.js

@@ -2,7 +2,7 @@ const Section = (children) =>
   h("section", { className: "section" }, children);
 const Container = (children) => h("div", { className: "container" }, children);
 const Row = (children) => h("div", { className: "row" }, children);
-const Content = (children) => h("div", { className: "content" }, children);
+const ContentJustify = (children) => h("div", { className: "content text-justify" }, children);
 const Col12 = (children) => h("div", { className: "col-12" }, children);
 
-export { Section, Container, Row, Content, Col12 };
+export { Section, Container, Row, ContentJustify, Col12 };

static/admin/previews/page-previews/components/index.js

@@ -1,6 +1,6 @@
 import PageHeader from "./page-header.js";
 import DateFormat from "./date-format.js";
 import md5 from "./md5.js";
-import { Section, Container, Row, Content, Col12 } from "./base.js";
+import { Section, Container, Row, ContentJustify, Col12 } from "./base.js";
 
-export { PageHeader, DateFormat, md5, Section, Container, Row, Content, Col12 };
+export { PageHeader, DateFormat, md5, Section, Container, Row, ContentJustify, Col12 };

static/admin/previews/page-previews/contest-preview.js

@@ -1,4 +1,9 @@
-import { Container, PageHeader, Row, Section } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Section,
+} from "./components/index.js";
 
 const ContestPreview = ({ widgetFor, entry, fields, collection }) => {
   const imageField = useMemo(() => {
@@ -16,20 +21,11 @@ const ContestPreview = ({ widgetFor, entry, fields, collection }) => {
     Section(
       Container([
         entry.data.image && entry.data.image != "/media/image.webp"
-          ? Row(
+          ? h("img", { className: "img-fluid w-100 mb-4", src: imageUrl })
-              h(
-                "div",
-                { className: "col-12 mb-4" },
-                h("img", { className: "img-fluid w-100", src: imageUrl })
-              )
-            )
           : null,
         h(
           "div",
-          { className: "row mb-4" },
+          { className: "d-flex justify-content-between mb-4" },
-          h(
-            "div",
-            { className: "col-7" },
           h(
             "div",
             { className: "d-flex align-items-center" },
@@ -37,25 +33,16 @@ const ContestPreview = ({ widgetFor, entry, fields, collection }) => {
             h(
               "div",
               { className: "text-start" },
-                h("h6", { className: "mb-0" }, "KLASSE(N)"),
+              h("h6", { className: "mb-0 text-uppercase" }, "Klassen"),
               h("p", { className: "mb-0" }, entry.data.class)
             )
-            )
           ),
           entry.data.web_url
-            ? h(
+            ? h("a", { className: "btn btn-primary" }, "Website")
-                "div",
+            : null
-                { className: "col-5 text-end mb-4 mb-xl-0" },
-                h("a", { className: "btn btn-primary" }, "Website")
-              )
-            : null,
-          h(
-            "div",
-            { className: "col-12 mt-4" },
-            h("div", { className: "border-bottom border-primary" })
-          )
         ),
-        Row(h("div", { className: "col-12 content" }, widgetFor("body"))),
+        h("hr"),
+        ContentJustify(widgetFor("body")),
       ])
     ),
   ];

static/admin/previews/page-previews/event-preview.js

@@ -1,37 +1,15 @@
-import { PageHeader, DateFormat } from "./components/index.js";
+import {
-
+  PageHeader,
-function isFuture(date, enddate) {
+  DateFormat,
-  let date1 = new Date(date ? date : 0);
+  Section,
-  let date2 = new Date(enddate ? enddate : 0);
+  Container,
-  let present = new Date();
+} from "./components/index.js";
-  if (date1 >= present || date2 >= present) {
-    return true;
-  } else {
-    return false;
-  }
-}
 
 const EventPreview = ({ widgetsFor, entry }) => {
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container([
-      { className: "section" },
-      h(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-12" },
-            h(
-              "div",
-              { className: "row" },
-              h(
-                "div",
-                { className: "col-12" },
         h(
           "ul",
           { className: "list-inline text-center filter-controls mb-5" },
@@ -50,31 +28,31 @@ const EventPreview = ({ widgetsFor, entry }) => {
             { className: "list-inline-item m-3 text-uppercase" },
             "Vergangen"
           )
-                )
-              )
         ),
         h(
           "div",
-              { className: "filtr-container" },
+          { className: "filtr-container row" },
           widgetsFor("events").map((event) =>
             h(
               "div",
-                  { className: "mb-2 mt-2 col-12 filtr-item" },
+              { className: "filtr-item col-12" },
               h(
                 "div",
                 {
-                      className:
+                  className: "card hover-shadow border-primary mb-4 p-0",
-                        "card d-md-table w-100 hover-shadow border-primary ps-0 pe-0 mb-4",
                 },
+                h(
+                  "div",
+                  { className: "row g-0" },
                   h(
                     "div",
                     {
                       className:
-                          "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc rounded",
+                        "col-md-3 text-center p-4 bg-primary text-white rounded",
                     },
                     h(
                       "span",
-                        { className: "h2 d-block" },
+                      { className: "h2" },
                       event.data.date != null && event.data.date != ""
                         ? DateFormat({
                             date: event.data.date,
@@ -84,7 +62,7 @@ const EventPreview = ({ widgetsFor, entry }) => {
                     ),
                     h(
                       "span",
-                        { className: "d-block" },
+                      {},
                       event.data.date != null && event.data.date != ""
                         ? DateFormat({
                             date: event.data.date,
@@ -107,31 +85,28 @@ const EventPreview = ({ widgetsFor, entry }) => {
                         ]
                       : null
                   ),
+                  h(
+                    "div",
+                    { className: "col-md-9" },
                     h(
                       "div",
                       {
                         className:
-                          "d-md-table-cell px-4 align-middle mb-4 mb-md-0 p-2",
+                          "card-body h-100 d-flex flex-column justify-content-around",
                       },
-                      h("p", { className: "h4 mb-0 d-block" }, event.data.title)
+                      h("h4", { className: "card-title" }, event.data.title),
-                    ),
                       event.data.location
                         ? h(
                             "div",
                             {
-                            className:
+                              className: "card-text",
-                              "d-md-table-cell text-end pe-md-4 p-2 align-middle",
                             },
-                          h(
-                            "p",
-                            {},
                             h("i", {
                               className:
                                 "mdi mdi-map-marker-radius-outline icon-s text-primary me-2",
                             }),
                             event.data.location
                           )
-                        )
                         : null
                     )
                   )
@@ -139,7 +114,8 @@ const EventPreview = ({ widgetsFor, entry }) => {
               )
             )
           )
-      )
+        ),
+      ])
     ),
   ];
 };

static/admin/previews/page-previews/forms-preview.js

@@ -1,38 +1,22 @@
-import { PageHeader } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Section,
+} from "./components/index.js";
 
 const FormsPreview = ({ widgetsFor, widgetFor, entry }) => {
   return [
     PageHeader(entry),
-    h(
+    Section(
-      "section",
+      Container([
-      { className: "section" },
+        h("h2", { className: "mb-4" }, entry.data.title),
-      h(
+        ContentJustify([
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-12" },
-            h("h2", { className: "mb-4" }, entry.data.title)
-          )
-        ),
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-12 content" },
           widgetsFor("files").map((file) =>
-              h(
-                "div",
-                { className: "container mb-0" },
             h(
               "div",
               {
-                    className:
+                className: "card border-primary rounded-0 hover-shadow mb-2",
-                      "card border-primary rounded-0 hover-shadow mb-5",
               },
               h(
                 "div",
@@ -45,18 +29,16 @@ const FormsPreview = ({ widgetsFor, widgetFor, entry }) => {
                       "text-decoration-none btn btn-primary btn-sm mb-0",
                   },
                   h("i", {
-                        className: "mdi mdi-tray-arrow-down mb-0 me-2",
+                    className: "mdi mdi-tray-arrow-down me-2",
                   }),
                   "Download"
                 )
               )
             )
-              )
           ),
-            widgetFor("body")
+          widgetFor("body"),
-          )
+        ]),
-        )
+      ])
-      )
     ),
   ];
 };

static/admin/previews/page-previews/ganztag-preview.js

@@ -1,14 +1,12 @@
 import {
-  Col12,
   Container,
+  ContentJustify,
   PageHeader,
-  Row,
   Section,
 } from "./components/index.js";
 
 const GanztagPreview = ({
   widgetFor,
-  widgetsFor,
   entry,
   fields,
   collection,
@@ -27,19 +25,11 @@ const GanztagPreview = ({
     PageHeader(entry),
     Section(
       Container([
-        Row(
+        h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
-          h(
-            "div",
-            { className: "col-12 mb-4" },
-            h("img", { className: "img-fluid w-100", src: imageUrl })
-          )
-        ),
         h("h2", {}, entry.data.title),
         h(
           "div",
-          { className: "row align-items-center mb-4" },
+          { className: "row mb-4" },
-          Col12(
-            Row([
           h(
             "div",
             { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
@@ -53,7 +43,7 @@ const GanztagPreview = ({
               h(
                 "div",
                 { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "ZEIT"),
+                h("h6", { className: "mb-0 text-uppercase" }, "Zeit"),
                 h("p", { className: "mb-0" }, entry.data.schedule)
               )
             )
@@ -70,7 +60,7 @@ const GanztagPreview = ({
               h(
                 "div",
                 { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "DAUER"),
+                h("h6", { className: "mb-0 text-uppercase" }, "Dauer"),
                 h("p", { className: "mb-0" }, entry.data.duration)
               )
             )
@@ -87,7 +77,7 @@ const GanztagPreview = ({
               h(
                 "div",
                 { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "KLASSE(N)"),
+                h("h6", { className: "mb-0 text-uppercase" }, "Klassen"),
                 h("p", { className: "mb-0" }, entry.data.class)
               )
             )
@@ -105,20 +95,14 @@ const GanztagPreview = ({
               h(
                 "div",
                 { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "RAUM"),
+                h("h6", { className: "mb-0 text-uppercase" }, "Raum"),
                 h("p", { className: "mb-0" }, entry.data.room)
               )
             )
-              ),
-            ])
-          ),
-          h(
-            "div",
-            { className: "col-12 mt-4" },
-            h("div", { className: "border-bottom border-primary" })
           )
         ),
-        Row(h("div", { className: "col-12 content" }, widgetFor("body"))),
+        h("hr", { className: "mb-4" }),
+        ContentJustify(widgetFor("body")),
       ])
     ),
   ];

static/admin/previews/page-previews/kontakt-preview.js

@@ -1,17 +1,13 @@
-import { PageHeader } from "./components/index.js";
+import { Container, PageHeader, Row } from "./components/index.js";
 
 const KontaktPreview = ({ widgetsFor, entry }) => {
   return [
     PageHeader(entry),
     h(
       "section",
-      { className: "section bg-body-tertiary" },
+      { className: "section pb-0" },
-      h(
+      Container(
-        "div",
+        Row([
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
           h(
             "div",
             { className: "col-lg-6 mb-4 mb-lg-0" },
@@ -88,8 +84,8 @@ const KontaktPreview = ({ widgetsFor, entry }) => {
                 )
               )
             )
-          )
+          ),
-        )
+        ])
       )
     ),
   ];

static/admin/previews/page-previews/page-preview.js

@@ -1,25 +1,14 @@
-import { PageHeader } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Section,
+} from "./components/index.js";
 
 const PagePreview = ({ widgetFor, entry }) => {
   return [
     PageHeader(entry),
-    h(
+    Section(Container(ContentJustify(widgetFor("body")))),
-      "section",
-      { className: "section" },
-      h(
-        "div",
-        { className: "container" },
-        h(
-          "div",
-          { className: "row" },
-          h(
-            "div",
-            { className: "col-12" },
-            h("div", { className: "content" }, widgetFor("body"))
-          )
-        )
-      )
-    ),
   ];
 };
 

static/admin/previews/page-previews/projektwoche-preview.js

@@ -1,12 +1,17 @@
-import { Container, PageHeader, Row, Section } from "./components/index.js";
+import {
+  Container,
+  ContentJustify,
+  PageHeader,
+  Row,
+} from "./components/index.js";
 
 const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => {
   return [
     PageHeader(entry),
-    Section([
+    h(
-      Container(
+      "section",
-        Row(h("div", { className: "col-12 mb-4 content" }, widgetFor("body")))
+      { className: "section superhaufen" },
-      ),
+      Container(ContentJustify(widgetFor("body"))),
       Container(
         Row([
           widgetsFor("tiles").map((tile) =>
@@ -47,8 +52,8 @@ const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => {
             )
           ),
         ])
+      )
     ),
-    ]),
   ];
 };
 

static/admin/shortcodes/card.js

@@ -46,10 +46,7 @@ const CardShortcode = {
   preview: ({ title, link }) => {
     return h(
       "div",
-      { className: "container mb-0" },
+      { className: "card border-primary rounded-0 hover-shadow mb-2" },
-      h(
-        "div",
-        { className: "card border-primary rounded-0 hover-shadow mb-5" },
       h(
         "div",
         { className: "card-body mb-0" },
@@ -67,7 +64,6 @@ const CardShortcode = {
           "Mehr anzeigen"
         )
       )
-      )
     );
   },
 };

static/admin/shortcodes/download.js

@@ -46,10 +46,7 @@ const DownloadShortcode = {
   preview: ({ title, link }) => {
     return h(
       "div",
-      { className: "container mb-0" },
+      { className: "card border-primary rounded-0 hover-shadow mb-2" },
-      h(
-        "div",
-        { className: "card border-primary rounded-0 hover-shadow mb-5" },
       h(
         "div",
         { className: "card-body mb-0" },
@@ -68,7 +65,6 @@ const DownloadShortcode = {
           "Download"
         )
       )
-      )
     );
   },
 };