Kreative Haufen in CSS (#254)
All checks were successful
website-main / prod-build (push) Successful in 15s
website-main / test-build (push) Successful in 4s

Schließt #211

Reviewed-on: #254
This commit is contained in:
2024-01-02 21:55:31 +01:00
parent 71aac39f00
commit 02c5040281
43 changed files with 886 additions and 426 deletions

View File

@ -1,4 +1,4 @@
import { MarkdownProps } from "../props.js";
import { MarkdownProps, EditorProps } from "../props.js";
import { DraftBoolean, EnableBoolean } from "./widgets.js";
const ChronikjahreCollection = {
@ -13,11 +13,7 @@ const ChronikjahreCollection = {
field: "type",
value: "schulchronik",
},
create: true,
editor: {
preview: false,
size: "half",
},
...EditorProps,
summary_fields: ["title", "draft", "cantorpreisträger", "topics"],
sortable_fields: {
fields: ["title"],
@ -44,7 +40,20 @@ const ChronikjahreCollection = {
label: "Einleitung",
hint: "Text für die Jahreszahl",
required: false,
...MarkdownProps,
widget: "object",
fields: [
EnableBoolean,
{
name: "content",
label: "Text",
condition: {
field: "pretext.enable",
value: true,
},
required: false,
...MarkdownProps,
}
]
},
{
name: "topics",
@ -53,6 +62,7 @@ const ChronikjahreCollection = {
widget: "list",
required: false,
collapsed: true,
max: 4,
fields: [
{
name: "title",
@ -63,6 +73,10 @@ const ChronikjahreCollection = {
{
name: "content",
label: "Inhalt",
condition: {
field: "superhaufen.enable",
value: false,
},
required: false,
...MarkdownProps,
},
@ -80,6 +94,10 @@ const ChronikjahreCollection = {
collection: "superhaufen",
search_fields: ["title"],
value_field: "title",
condition: {
field: "superhaufen.enable",
value: true,
},
required: false,
collapsed: true,
},
@ -96,13 +114,6 @@ const ChronikjahreCollection = {
value_field: "name",
required: false,
},
{
name: "body",
label: "Text",
hint: "Erscheint zusätzlich zu den Kreativen Haufen",
required: false,
...MarkdownProps,
},
],
};

View File

@ -1,78 +1,79 @@
import { PageHeader } from "./components/index.js";
const ChronikPreview = ({ widgetFor, widgetsFor, entry, document, window }) => {
/*return [PageHeader,
h('section', {className: "section"},
h('div', {className: "container"},
h('div', {className: "row"},
h('div', {className: "col-12 mb-4 content"},
widgetsFor('topics').map(function(i, index) {
return h('div', {"id": i.data.id, className: "modal"},
h('div', {className: "modal-dialog modal-lg", "role": "document"},
h('div', {className: "modal-content"},
h('div', {className: "modal-header"},
h('h5', {className: "modal-title"}, i.data.title),
h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
h('span', {"ariaHidden": "true"}, '\u{00d7}')
)
),
h('div', {className: "modal-body"},
h('div', {className: "content"}, i.content)
)
)
)
);
}),
entry.data.pretext != "" && entry.data.pretext != null ? h('div', {"id": "pretext", className: "modal"},
h('div', {className: "modal-dialog modal-lg", "role": "document"},
h('div', {className: "modal-content"},
h('div', {className: "modal-header"},
h('h5', {className: "modal-title"}, entry.data.title),
h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
h('span', {"ariaHidden": "true"}, '\u{00d7}')
)
),
h('div', {className: "modal-body"},
h('div', {className: "content"}, widgetFor('pretext'))
)
)
)
) : null,
h('div', {"id": "wc-canvas"}),
() => {
var topics = [[entry.data.title, 100, "pretext"]];
widgetsFor('topics').map(function(i, index) {
topics.push([i.data.title, 40, i.data.id]);
});
var script = document.createElement('script');
var div = document.getElementById('sc-root');
div.appendChild(script);
WordCloud(
document.getElementById('wc-canvas'),
{
click: function (item) {
if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) {
$('#' + item[2]).modal('show');
}
},
color: function (word, weight) {
return (weight === 100) ? '#ffbc3b' : '#1a1a37';
},
fontFamily: 'Fira Sans, serif',
fontWeight: 800,
list: topics,
shrinkToFit: true,
gridSize: 25,
rotateRatio: 0,
}
);
},
widgetFor('body')
)
)
)
return [
PageHeader(entry),
h(
"section",
{ className: "section" },
h(
"div",
{ className: "container" },
h(
"div",
{ className: "card-group" },
h(
"div",
{ className: "card d-flex flex-row flex-wrap" },
h("img", {
src: "https://cantorgymnasium.de/media/people/gcg.webp",
className: "rounded-circle object-cover m-3",
width: "128px",
height: "128px",
}),
h(
"div",
{ className: "flex-grow card-body min-w-0" },
h("h3", { className: "card-title" }, "Cantorpreisträger"),
h(
"p",
{ className: "h4 card-text" },
widgetFor("cantorpreisträger")
)
)
];*/
),
h(
"div",
{ className: "card d-flex flex-row flex-wrap-reverse" },
h(
"div",
{ className: "flex-grow card-body min-w-0" },
h(
"h3",
{ className: "card-title" },
"Abiturienten " + entry.data.title
),
h("p", { className: "h4 card-text" }, "Abiturdurchschnitt: 0.00")
),
h("img", {
src: "https://cantorgymnasium.de/media/people/gcg.webp",
className: "rounded-circle object-cover m-3",
width: "128px",
height: "128px",
})
)
),
h(
"div",
{ className: "kh-parent" },
h(
"div",
{ className: "kh-jahr h1" },
h("span", {}, entry.data.title)
),
widgetsFor("topics")
.sort((a, b) => b.data.title.length - a.data.title.length)
.map((topic, index) =>
h(
"div",
{ className: "kh h3", "data-id": `${index}` },
h("span", {}, topic.data.title)
)
)
)
)
),
];
};
export default ChronikPreview;

View File

@ -3,7 +3,7 @@ const PreviewStyles = [
"https://assets.cantorgymnasium.de/fonts/fira/fira.css",
"https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.css",
"https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css",
"https://cantorgymnasium.de/css/style.min.css",
"/css/style.min.css",
];
export default PreviewStyles;