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,9 +1,7 @@
 <section class="section superhaufen">
   <div class="container">
-    <div class="row">
+    <div class="content text-justify">
-      <div class="col-12 content">
+      {{ .Content }}
-        {{ .Content }}
-      </div>
     </div>
   </div>
   <div class="container">

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("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
-      h(
+        ContentJustify(widgetFor("body")),
-        "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")
-          )
-        )
-      )
     ),
     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,57 +14,28 @@ 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" },
+          { className: "text-center" },
-          h(
+          h("img", {
-            "div",
+            className: "rounded-circle img-fluid mb-4",
-            { className: "col-lg-10 mx-auto" },
+            src:
-            h(
+              imageUrl ??
-              "div",
+              "https://www.gravatar.com/avatar/" +
-              { className: "text-center" },
+                md5(entry.data.email) +
-              h(
+                "?s=128&pg&d=identicon",
-                "figure",
+            width: "128px",
-                {},
+            height: "128px",
-                h("img", {
+          }),
-                  className: "rounded-circle img-fluid mb-4",
+          h("h4", { className: "fw-bold" }, entry.data.title),
-                  src:
+          h("hr"),
-                    imageUrl ??
+          widgetFor("body"),
-                    "https://www.gravatar.com/avatar/" +
+          h("hr"),
-                      md5(entry.data.email) +
+          entry.data.email ? h("i", { className: "mdi mdi-at" }) : null
-                      "?s=128&pg&d=identicon",
+        ),
-                  width: "128px",
+      ])
-                }),
-                h(
-                  "figcaption",
-                  {},
-                  h("h4", { className: "fw-bold" }, entry.data.title)
-                )
-              ),
-              h("hr"),
-              widgetFor("body"),
-              h("hr"),
-              h(
-                "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,67 +19,52 @@ 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",
+          { className: "d-flex flex-wrap gap-2 justify-content-between" },
           h(
             "div",
-            { key: "cover-image", className: "col-12 mb-4" },
+            { className: "text-body-secondary" },
-            h("img", { className: "img-fluid w-100", src: imageUrl })
+            h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
-          ),
+            widgetFor("author")
-          Col12(
-            h(
-              "div",
-              { className: "row mb-3" },
-              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" },
-                h("span", { className: "fw-bold me-1" }, "Datum:"),
-                entry.data.date
-                  ? DateFormat({
-                      date: entry.data.date,
-                      format: {
-                        day: "numeric",
-                        month: "short",
-                        year: "numeric",
-                      },
-                    })
-                  : ""
-              )
-            )
-          ),
-          Row(
-            h(
-              "div",
-              { className: "col-12 mb-md-0 text-body-tertiary" },
-              h("span", { className: "fw-bold me-1" }, "Kategorie:"),
-              entry.data.categories
-                ? entry.data.categories.map(
-                    (category, index) => (index != 0 ? ", " : "") + category
-                  )
-                : ""
-            )
           ),
           h(
             "div",
-            { key: "border-bottom", className: "col-12 my-4" },
+            { className: "text-body-secondary" },
-            h("div", { className: "border-bottom" })
+            h("span", { className: "fw-bold me-1" }, "Datum:"),
+            entry.data.date
+              ? DateFormat({
+                  date: entry.data.date,
+                  format: {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric",
+                  },
+                })
+              : ""
           ),
           h(
             "div",
-            {
+            { className: "text-body-secondary" },
-              key: "body-content",
+            h("span", { className: "fw-bold me-1" }, "Kategorien:"),
-              className: "col-12 mb-5 content text-justify",
+            entry.data.categories
-            },
+              ? entry.data.categories.map(
-            widgetFor("body")
+                  (category, index) => (index != 0 ? ", " : "") + category
-          ),
+                )
-        ])
+              : ""
-      )
+          )
+        ),
+        h("div", { className: "border-bottom my-4" }),
+        h(
+          "div",
+          {
+            className: "content text-justify mb-4",
+          },
+          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,46 +21,28 @@ 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" },
+            { className: "d-flex align-items-center" },
+            h("i", { className: "mdi mdi-crowd text-primary icon-md me-2" }),
             h(
               "div",
-              { className: "d-flex align-items-center" },
+              { className: "text-start" },
-              h("i", { className: "mdi mdi-crowd text-primary icon-md me-2" }),
+              h("h6", { className: "mb-0 text-uppercase" }, "Klassen"),
-              h(
+              h("p", { className: "mb-0" }, entry.data.class)
-                "div",
-                { className: "text-start" },
-                h("h6", { className: "mb-0" }, "KLASSE(N)"),
-                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,145 +1,121 @@
-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(
-      h(
+          "ul",
-        "div",
+          { className: "list-inline text-center filter-controls mb-5" },
-        { className: "container" },
+          h(
+            "li",
+            { className: "list-inline-item m-3 text-uppercase active" },
+            "Alle"
+          ),
+          h(
+            "li",
+            { className: "list-inline-item m-3 text-uppercase" },
+            "Anstehend"
+          ),
+          h(
+            "li",
+            { className: "list-inline-item m-3 text-uppercase" },
+            "Vergangen"
+          )
+        ),
         h(
           "div",
-          { className: "row" },
+          { className: "filtr-container row" },
-          h(
+          widgetsFor("events").map((event) =>
-            "div",
-            { className: "col-12" },
             h(
               "div",
-              { className: "row" },
+              { className: "filtr-item col-12" },
               h(
                 "div",
-                { className: "col-12" },
+                {
-                h(
+                  className: "card hover-shadow border-primary mb-4 p-0",
-                  "ul",
+                },
-                  { className: "list-inline text-center filter-controls mb-5" },
-                  h(
-                    "li",
-                    { className: "list-inline-item m-3 text-uppercase active" },
-                    "Alle"
-                  ),
-                  h(
-                    "li",
-                    { className: "list-inline-item m-3 text-uppercase" },
-                    "Anstehend"
-                  ),
-                  h(
-                    "li",
-                    { className: "list-inline-item m-3 text-uppercase" },
-                    "Vergangen"
-                  )
-                )
-              )
-            ),
-            h(
-              "div",
-              { className: "filtr-container" },
-              widgetsFor("events").map((event) =>
                 h(
                   "div",
-                  { className: "mb-2 mt-2 col-12 filtr-item" },
+                  { className: "row g-0" },
                   h(
                     "div",
                     {
                       className:
-                        "card d-md-table w-100 hover-shadow border-primary ps-0 pe-0 mb-4",
+                        "col-md-3 text-center p-4 bg-primary text-white rounded",
                     },
                     h(
-                      "div",
+                      "span",
-                      {
+                      { className: "h2" },
-                        className:
+                      event.data.date != null && event.data.date != ""
-                          "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc rounded",
+                        ? DateFormat({
-                      },
+                            date: event.data.date,
-                      h(
+                            format: { day: "numeric" },
-                        "span",
+                          })
-                        { className: "h2 d-block" },
-                        event.data.date != null && event.data.date != ""
-                          ? DateFormat({
-                              date: event.data.date,
-                              format: { day: "numeric" },
-                            })
-                          : null
-                      ),
-                      h(
-                        "span",
-                        { className: "d-block" },
-                        event.data.date != null && event.data.date != ""
-                          ? DateFormat({
-                              date: event.data.date,
-                              format: { month: "short", year: "numeric" },
-                            })
-                          : null
-                      ),
-                      event.data.enddate != null && event.data.enddate != ""
-                        ? [
-                            h("br"),
-                            "bis " +
-                              DateFormat({
-                                date: event.data.enddate,
-                                format: {
-                                  day: "numeric",
-                                  month: "short",
-                                  year: "numeric",
-                                },
-                              }),
-                          ]
                         : null
                     ),
+                    h(
+                      "span",
+                      {},
+                      event.data.date != null && event.data.date != ""
+                        ? DateFormat({
+                            date: event.data.date,
+                            format: { month: "short", year: "numeric" },
+                          })
+                        : null
+                    ),
+                    event.data.enddate != null && event.data.enddate != ""
+                      ? [
+                          h("br"),
+                          "bis " +
+                            DateFormat({
+                              date: event.data.enddate,
+                              format: {
+                                day: "numeric",
+                                month: "short",
+                                year: "numeric",
+                              },
+                            }),
+                        ]
+                      : 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
-                    event.data.location
+                        ? h(
-                      ? h(
+                            "div",
-                          "div",
+                            {
-                          {
+                              className: "card-text",
-                            className:
+                            },
-                              "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
-                      : null
+                    )
                   )
                 )
               )
             )
           )
-        )
+        ),
-      )
+      ])
     ),
   ];
 };

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

@@ -1,62 +1,44 @@
-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",
+          widgetsFor("files").map((file) =>
-        { className: "container" },
+            h(
-        h(
+              "div",
-          "div",
+              {
-          { className: "row" },
+                className: "card border-primary rounded-0 hover-shadow mb-2",
-          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" },
+                { className: "card-body mb-0" },
+                h("h4", { className: "card-title" }, file.data.title),
                 h(
-                  "div",
+                  "a",
                   {
                     className:
-                      "card border-primary rounded-0 hover-shadow mb-5",
+                      "text-decoration-none btn btn-primary btn-sm mb-0",
                   },
-                  h(
+                  h("i", {
-                    "div",
+                    className: "mdi mdi-tray-arrow-down me-2",
-                    { className: "card-body mb-0" },
+                  }),
-                    h("h4", { className: "card-title" }, file.data.title),
+                  "Download"
-                    h(
-                      "a",
-                      {
-                        className:
-                          "text-decoration-none btn btn-primary btn-sm mb-0",
-                      },
-                      h("i", {
-                        className: "mdi mdi-tray-arrow-down mb-0 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,98 +25,84 @@ 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(
+          h(
-            Row([
+            "div",
+            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+            h(
+              "div",
+              { className: "d-flex align-items-center" },
+              h("i", {
+                className:
+                  "mdi mdi-calendar-today-outline text-primary icon-md me-2",
+              }),
               h(
                 "div",
-                { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+                { className: "text-start" },
-                h(
+                h("h6", { className: "mb-0 text-uppercase" }, "Zeit"),
-                  "div",
+                h("p", { className: "mb-0" }, entry.data.schedule)
-                  { className: "d-flex align-items-center" },
+              )
-                  h("i", {
+            )
-                    className:
-                      "mdi mdi-calendar-today-outline text-primary icon-md me-2",
-                  }),
-                  h(
-                    "div",
-                    { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "ZEIT"),
-                    h("p", { className: "mb-0" }, entry.data.schedule)
-                  )
-                )
-              ),
-              h(
-                "div",
-                { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-                h(
-                  "div",
-                  { className: "d-flex align-items-center" },
-                  h("i", {
-                    className: "mdi mdi-timer-sand text-primary icon-md me-2",
-                  }),
-                  h(
-                    "div",
-                    { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "DAUER"),
-                    h("p", { className: "mb-0" }, entry.data.duration)
-                  )
-                )
-              ),
-              h(
-                "div",
-                { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-                h(
-                  "div",
-                  { className: "d-flex align-items-center" },
-                  h("i", {
-                    className: "mdi mdi-crowd text-primary icon-md me-2",
-                  }),
-                  h(
-                    "div",
-                    { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "KLASSE(N)"),
-                    h("p", { className: "mb-0" }, entry.data.class)
-                  )
-                )
-              ),
-              h(
-                "div",
-                { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-                h(
-                  "div",
-                  { className: "d-flex align-items-center" },
-                  h("i", {
-                    className:
-                      "mdi mdi-map-marker-radius-outline text-primary icon-md me-2",
-                  }),
-                  h(
-                    "div",
-                    { className: "text-start" },
-                    h("h6", { className: "mb-0" }, "RAUM"),
-                    h("p", { className: "mb-0" }, entry.data.room)
-                  )
-                )
-              ),
-            ])
           ),
           h(
             "div",
-            { className: "col-12 mt-4" },
+            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-            h("div", { className: "border-bottom border-primary" })
+            h(
+              "div",
+              { className: "d-flex align-items-center" },
+              h("i", {
+                className: "mdi mdi-timer-sand text-primary icon-md me-2",
+              }),
+              h(
+                "div",
+                { className: "text-start" },
+                h("h6", { className: "mb-0 text-uppercase" }, "Dauer"),
+                h("p", { className: "mb-0" }, entry.data.duration)
+              )
+            )
+          ),
+          h(
+            "div",
+            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+            h(
+              "div",
+              { className: "d-flex align-items-center" },
+              h("i", {
+                className: "mdi mdi-crowd text-primary icon-md me-2",
+              }),
+              h(
+                "div",
+                { className: "text-start" },
+                h("h6", { className: "mb-0 text-uppercase" }, "Klassen"),
+                h("p", { className: "mb-0" }, entry.data.class)
+              )
+            )
+          ),
+          h(
+            "div",
+            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+            h(
+              "div",
+              { className: "d-flex align-items-center" },
+              h("i", {
+                className:
+                  "mdi mdi-map-marker-radius-outline text-primary icon-md me-2",
+              }),
+              h(
+                "div",
+                { className: "text-start" },
+                h("h6", { className: "mb-0 text-uppercase" }, "Raum"),
+                h("p", { className: "mb-0" }, entry.data.room)
+              )
+            )
           )
         ),
-        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,26 +46,22 @@ 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" },
+        { className: "card-body mb-0" },
         h(
-          "div",
+          "h4",
-          { className: "card-body mb-0" },
+          { className: "card-title" },
-          h(
+          h("a", { className: "text-decoration-none", href: link }, title)
-            "h4",
+        ),
-            { className: "card-title" },
+        h(
-            h("a", { className: "text-decoration-none", href: link }, title)
+          "a",
-          ),
+          {
-          h(
+            className: "mb-0 btn btn-primary btn-sm text-decoration-none",
-            "a",
+            href: link,
-            {
+          },
-              className: "mb-0 btn btn-primary btn-sm text-decoration-none",
+          "Mehr anzeigen"
-              href: link,
-            },
-            "Mehr anzeigen"
-          )
         )
       )
     );

static/admin/shortcodes/download.js

@@ -46,27 +46,23 @@ 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" },
+        { className: "card-body mb-0" },
         h(
-          "div",
+          "h4",
-          { className: "card-body mb-0" },
+          { className: "card-title" },
-          h(
+          h("a", { className: "text-decoration-none", href: link }, title)
-            "h4",
+        ),
-            { className: "card-title" },
+        h(
-            h("a", { className: "text-decoration-none", href: link }, title)
+          "a",
-          ),
+          {
-          h(
+            className: "mb-0 btn btn-primary btn-sm text-decoration-none",
-            "a",
+            href: link,
-            {
+          },
-              className: "mb-0 btn btn-primary btn-sm text-decoration-none",
+          h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }),
-              href: link,
+          "Download"
-            },
-            h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }),
-            "Download"
-          )
         )
       )
     );