From b1d3a2156fafb9654e005d019c1d58646ed26553 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Mon, 31 Jul 2023 20:54:52 +0200 Subject: [PATCH] update cms previews to new layouts. close #234 --- layouts/_default/single.html | 6 +- layouts/author/single.html | 4 +- layouts/partials/termin.html | 4 +- layouts/partials/tile-modals.html | 6 +- .../page-previews/abiturienten-preview.js | 21 +- .../previews/page-previews/about-preview.js | 38 ++-- .../page-previews/anmeldeformular-preview.js | 14 +- .../page-previews/anmeldung-preview.js | 30 ++- .../previews/page-previews/author-preview.js | 71 ++----- .../previews/page-previews/blog-preview.js | 93 ++++----- .../page-previews/cantorpreis-preview.js | 11 +- .../page-previews/chronik-index-preview.js | 35 ++-- .../previews/page-previews/components/base.js | 4 +- .../page-previews/components/index.js | 4 +- .../previews/page-previews/contest-preview.js | 47 ++--- .../previews/page-previews/event-preview.js | 188 ++++++++---------- .../previews/page-previews/forms-preview.js | 76 +++---- .../previews/page-previews/ganztag-preview.js | 154 +++++++------- .../previews/page-previews/kontakt-preview.js | 16 +- .../previews/page-previews/page-preview.js | 25 +-- .../page-previews/projektwoche-preview.js | 19 +- static/admin/shortcodes/card.js | 30 ++- static/admin/shortcodes/download.js | 32 ++- 23 files changed, 380 insertions(+), 548 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 24f8dc9c..0a024531 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -22,10 +22,8 @@ {{ end }} -
-
-
-
+
+
{{ .Content }}
diff --git a/layouts/author/single.html b/layouts/author/single.html index 620871f7..e9e23744 100644 --- a/layouts/author/single.html +++ b/layouts/author/single.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+
{{ if .Params.image }} @@ -19,7 +19,7 @@
-
+

Geschrieben von {{ .Title }}

diff --git a/layouts/partials/termin.html b/layouts/partials/termin.html index 7e5e0897..9bb6751b 100644 --- a/layouts/partials/termin.html +++ b/layouts/partials/termin.html @@ -1,8 +1,8 @@
- {{ time.Format "2" .date}} - {{ time.Format "Jan 2006" .date}} + {{ time.Format "2" .date}} + {{ time.Format "Jan 2006" .date}} {{ with .enddate }}
bis {{ time.Format "2 Jan 2006" . }}{{ end }}
diff --git a/layouts/partials/tile-modals.html b/layouts/partials/tile-modals.html index 87496125..83e7caf5 100644 --- a/layouts/partials/tile-modals.html +++ b/layouts/partials/tile-modals.html @@ -1,9 +1,7 @@
-
-
- {{ .Content }} -
+
+ {{ .Content }}
diff --git a/static/admin/previews/page-previews/abiturienten-preview.js b/static/admin/previews/page-previews/abiturienten-preview.js index 02b2f9de..7217269a 100644 --- a/static/admin/previews/page-previews/abiturienten-preview.js +++ b/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( - Row([ - h( - "div", - { className: "col-12 mb-4" }, - h("img", { className: "img-fluid w-100", src: imageUrl }) - ), - h("div", { className: "col-12 content" }, widgetFor("body")), - ]) - ) + Container([ + h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }), + ContentJustify(widgetFor("body")), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/about-preview.js b/static/admin/previews/page-previews/about-preview.js index 0282a191..c4ff469d 100644 --- a/static/admin/previews/page-previews/about-preview.js +++ b/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", - { 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") - ) - ) - ) + Section( + Container([ + h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }), + ContentJustify(widgetFor("body")), + ]) ), entry.data.stats.enable ? h( "section", { className: "section bg-primary" }, - h( - "div", - { className: "container" }, - h( - "div", - { className: "row" }, + Container( + Row( widgetsFor("stats").data.zahlen.map((element) => { return h( "div", diff --git a/static/admin/previews/page-previews/anmeldeformular-preview.js b/static/admin/previews/page-previews/anmeldeformular-preview.js index d4b12334..64f6c232 100644 --- a/static/admin/previews/page-previews/anmeldeformular-preview.js +++ b/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", - { className: "section bg-body-tertiary" }, - h( - "div", - { className: "container" }, - h( - "div", - { className: "row" }, + Section( + Container( + Row( h( "div", { className: "col-lg-8 mb-4 mb-lg-0" }, diff --git a/static/admin/previews/page-previews/anmeldung-preview.js b/static/admin/previews/page-previews/anmeldung-preview.js index 0313ca91..acf253e7 100644 --- a/static/admin/previews/page-previews/anmeldung-preview.js +++ b/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", - { className: "section" }, - h( - "div", - { className: "container" }, - h( - "div", - { className: "row mb-4" }, - h("div", { className: "col-md-6 content" }, widgetFor("body")) - ), - h( - "div", - { className: "row" }, + Section( + Container([ + ContentJustify(widgetFor("body")), + Row( widgetsFor("elements").map(function (element, index) { return h( "div", @@ -35,8 +31,8 @@ const AnmeldungPreview = ({ widgetsFor, widgetFor, entry }) => { ) ); }) - ) - ) + ), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/author-preview.js b/static/admin/previews/page-previews/author-preview.js index 7f0891f9..261afe14 100644 --- a/static/admin/previews/page-previews/author-preview.js +++ b/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", - { className: "section bg-light" }, - h( - "div", - { className: "container" }, + Section( + 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: - imageUrl ?? - "https://www.gravatar.com/avatar/" + - md5(entry.data.email) + - "?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 - ) - ) - ) - ) - ) + { className: "text-center" }, + h("img", { + className: "rounded-circle img-fluid mb-4", + src: + imageUrl ?? + "https://www.gravatar.com/avatar/" + + md5(entry.data.email) + + "?s=128&pg&d=identicon", + width: "128px", + height: "128px", + }), + h("h4", { className: "fw-bold" }, entry.data.title), + h("hr"), + widgetFor("body"), + h("hr"), + entry.data.email ? h("i", { className: "mdi mdi-at" }) : null + ), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/blog-preview.js b/static/admin/previews/page-previews/blog-preview.js index 326b7487..9bda0e20 100644 --- a/static/admin/previews/page-previews/blog-preview.js +++ b/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( - Row([ + Container([ + 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" }, - h("img", { className: "img-fluid w-100", src: imageUrl }) - ), - 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 - ) - : "" - ) + { className: "text-body-secondary" }, + h("span", { className: "fw-bold me-1" }, "Geschrieben von:"), + widgetFor("author") ), h( "div", - { key: "border-bottom", className: "col-12 my-4" }, - h("div", { className: "border-bottom" }) + { className: "text-body-secondary" }, + 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", - { - key: "body-content", - className: "col-12 mb-5 content text-justify", - }, - widgetFor("body") - ), - ]) - ) + { className: "text-body-secondary" }, + h("span", { className: "fw-bold me-1" }, "Kategorien:"), + entry.data.categories + ? entry.data.categories.map( + (category, index) => (index != 0 ? ", " : "") + category + ) + : "" + ) + ), + h("div", { className: "border-bottom my-4" }), + h( + "div", + { + className: "content text-justify mb-4", + }, + widgetFor("body") + ), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/cantorpreis-preview.js b/static/admin/previews/page-previews/cantorpreis-preview.js index 43487db6..2a090c2b 100644 --- a/static/admin/previews/page-previews/cantorpreis-preview.js +++ b/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")) ), ]) ) diff --git a/static/admin/previews/page-previews/chronik-index-preview.js b/static/admin/previews/page-previews/chronik-index-preview.js index 1a724609..189b7524 100644 --- a/static/admin/previews/page-previews/chronik-index-preview.js +++ b/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", - { className: "section" }, - h("div", { className: "container" }, widgetFor("body")), + Section( + Container(widgetFor("body")), widgetsFor("infocard").data.enable - ? h( - "div", - { className: "container" }, + ? Container( h( "div", { className: "card mb-3" }, @@ -68,34 +64,31 @@ const ChronikIndexPreview = ({ ) ) : null, - h( - "div", - { className: "container" }, + Container([ h("h2", { className: "mb-4" }, "Informationsseiten"), - h( - "div", - { className: "row" }, + 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 = ({ ) ) ) - ) - ) + ), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/components/base.js b/static/admin/previews/page-previews/components/base.js index 71ecdbe9..3dad68c2 100644 --- a/static/admin/previews/page-previews/components/base.js +++ b/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 }; diff --git a/static/admin/previews/page-previews/components/index.js b/static/admin/previews/page-previews/components/index.js index e2727de3..08e840b5 100644 --- a/static/admin/previews/page-previews/components/index.js +++ b/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 }; diff --git a/static/admin/previews/page-previews/contest-preview.js b/static/admin/previews/page-previews/contest-preview.js index 9cdd374b..7cb4433a 100644 --- a/static/admin/previews/page-previews/contest-preview.js +++ b/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( - "div", - { className: "col-12 mb-4" }, - h("img", { className: "img-fluid w-100", src: imageUrl }) - ) - ) + ? h("img", { className: "img-fluid w-100 mb-4", 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" }, - 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) - ) + { className: "text-start" }, + h("h6", { className: "mb-0 text-uppercase" }, "Klassen"), + h("p", { className: "mb-0" }, entry.data.class) ) ), entry.data.web_url - ? h( - "div", - { 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" }) - ) + ? h("a", { className: "btn btn-primary" }, "Website") + : null ), - Row(h("div", { className: "col-12 content" }, widgetFor("body"))), + h("hr"), + ContentJustify(widgetFor("body")), ]) ), ]; diff --git a/static/admin/previews/page-previews/event-preview.js b/static/admin/previews/page-previews/event-preview.js index eb346a80..a18ff97d 100644 --- a/static/admin/previews/page-previews/event-preview.js +++ b/static/admin/previews/page-previews/event-preview.js @@ -1,145 +1,121 @@ -import { PageHeader, DateFormat } from "./components/index.js"; - -function isFuture(date, enddate) { - let date1 = new Date(date ? date : 0); - let date2 = new Date(enddate ? enddate : 0); - let present = new Date(); - if (date1 >= present || date2 >= present) { - return true; - } else { - return false; - } -} +import { + PageHeader, + DateFormat, + Section, + Container, +} from "./components/index.js"; const EventPreview = ({ widgetsFor, entry }) => { return [ PageHeader(entry), - h( - "section", - { className: "section" }, - h( - "div", - { className: "container" }, + Section( + Container([ + h( + "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: "row" }, - h( - "div", - { className: "col-12" }, + { className: "filtr-container row" }, + widgetsFor("events").map((event) => h( "div", - { className: "row" }, + { className: "filtr-item col-12" }, h( "div", - { className: "col-12" }, - h( - "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) => + { + className: "card hover-shadow border-primary mb-4 p-0", + }, 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", - { - className: - "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc rounded", - }, - h( - "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", - }, - }), - ] + "span", + { className: "h2" }, + event.data.date != null && event.data.date != "" + ? DateFormat({ + date: event.data.date, + format: { day: "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) - ), - event.data.location - ? h( - "div", - { - className: - "d-md-table-cell text-end pe-md-4 p-2 align-middle", - }, - h( - "p", - {}, + h("h4", { className: "card-title" }, event.data.title), + event.data.location + ? h( + "div", + { + className: "card-text", + }, h("i", { className: "mdi mdi-map-marker-radius-outline icon-s text-primary me-2", }), event.data.location ) - ) - : null + : null + ) ) ) ) ) ) - ) - ) + ), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/forms-preview.js b/static/admin/previews/page-previews/forms-preview.js index dd816e6a..bc32b387 100644 --- a/static/admin/previews/page-previews/forms-preview.js +++ b/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", - { className: "section" }, - h( - "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) => + Section( + Container([ + h("h2", { className: "mb-4" }, entry.data.title), + ContentJustify([ + widgetsFor("files").map((file) => + h( + "div", + { + className: "card border-primary rounded-0 hover-shadow mb-2", + }, 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( - "div", - { className: "card-body mb-0" }, - h("h4", { className: "card-title" }, file.data.title), - 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" - ) - ) + h("i", { + className: "mdi mdi-tray-arrow-down me-2", + }), + "Download" ) ) - ), - widgetFor("body") - ) - ) - ) + ) + ), + widgetFor("body"), + ]), + ]) ), ]; }; diff --git a/static/admin/previews/page-previews/ganztag-preview.js b/static/admin/previews/page-previews/ganztag-preview.js index f2c4e6cc..4694f563 100644 --- a/static/admin/previews/page-previews/ganztag-preview.js +++ b/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( - "div", - { className: "col-12 mb-4" }, - h("img", { className: "img-fluid w-100", src: imageUrl }) - ) - ), + h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }), h("h2", {}, entry.data.title), h( "div", - { className: "row align-items-center mb-4" }, - Col12( - Row([ + { className: "row mb-4" }, + 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-calendar-today-outline text-primary icon-md me-2", + }), 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-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) - ) - ) - ), - ]) + { className: "text-start" }, + h("h6", { className: "mb-0 text-uppercase" }, "Zeit"), + h("p", { className: "mb-0" }, entry.data.schedule) + ) + ) ), h( "div", - { className: "col-12 mt-4" }, - h("div", { className: "border-bottom border-primary" }) + { 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 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")), ]) ), ]; diff --git a/static/admin/previews/page-previews/kontakt-preview.js b/static/admin/previews/page-previews/kontakt-preview.js index f2091644..03bdef71 100644 --- a/static/admin/previews/page-previews/kontakt-preview.js +++ b/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" }, - h( - "div", - { className: "container" }, - h( - "div", - { className: "row" }, + { className: "section pb-0" }, + Container( + Row([ h( "div", { className: "col-lg-6 mb-4 mb-lg-0" }, @@ -88,8 +84,8 @@ const KontaktPreview = ({ widgetsFor, entry }) => { ) ) ) - ) - ) + ), + ]) ) ), ]; diff --git a/static/admin/previews/page-previews/page-preview.js b/static/admin/previews/page-previews/page-preview.js index 25fe9308..b70d6642 100644 --- a/static/admin/previews/page-previews/page-preview.js +++ b/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", - { className: "section" }, - h( - "div", - { className: "container" }, - h( - "div", - { className: "row" }, - h( - "div", - { className: "col-12" }, - h("div", { className: "content" }, widgetFor("body")) - ) - ) - ) - ), + Section(Container(ContentJustify(widgetFor("body")))), ]; }; diff --git a/static/admin/previews/page-previews/projektwoche-preview.js b/static/admin/previews/page-previews/projektwoche-preview.js index 3ac8134c..740a7976 100644 --- a/static/admin/previews/page-previews/projektwoche-preview.js +++ b/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([ - Container( - Row(h("div", { className: "col-12 mb-4 content" }, widgetFor("body"))) - ), + h( + "section", + { className: "section superhaufen" }, + Container(ContentJustify(widgetFor("body"))), Container( Row([ widgetsFor("tiles").map((tile) => @@ -47,8 +52,8 @@ const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => { ) ), ]) - ), - ]), + ) + ), ]; }; diff --git a/static/admin/shortcodes/card.js b/static/admin/shortcodes/card.js index cf677f8e..096eb544 100644 --- a/static/admin/shortcodes/card.js +++ b/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", - { className: "card-body mb-0" }, - h( - "h4", - { className: "card-title" }, - h("a", { className: "text-decoration-none", href: link }, title) - ), - h( - "a", - { - className: "mb-0 btn btn-primary btn-sm text-decoration-none", - href: link, - }, - "Mehr anzeigen" - ) + "h4", + { className: "card-title" }, + h("a", { className: "text-decoration-none", href: link }, title) + ), + h( + "a", + { + className: "mb-0 btn btn-primary btn-sm text-decoration-none", + href: link, + }, + "Mehr anzeigen" ) ) ); diff --git a/static/admin/shortcodes/download.js b/static/admin/shortcodes/download.js index 2dda2ee8..388f5f05 100644 --- a/static/admin/shortcodes/download.js +++ b/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", - { className: "card-body mb-0" }, - h( - "h4", - { className: "card-title" }, - h("a", { className: "text-decoration-none", href: link }, title) - ), - h( - "a", - { - className: "mb-0 btn btn-primary btn-sm text-decoration-none", - href: link, - }, - h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }), - "Download" - ) + "h4", + { className: "card-title" }, + h("a", { className: "text-decoration-none", href: link }, title) + ), + h( + "a", + { + className: "mb-0 btn btn-primary btn-sm text-decoration-none", + href: link, + }, + h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }), + "Download" ) ) );