diff --git a/src/back/jdd-components/notice-board/icons/email.svg b/src/back/jdd-components/notice-board/icons/email.svg new file mode 100644 index 0000000..27b8fb6 --- /dev/null +++ b/src/back/jdd-components/notice-board/icons/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/back/jdd-components/notice-board/icons/forum.svg b/src/back/jdd-components/notice-board/icons/forum.svg new file mode 100644 index 0000000..49c14c3 --- /dev/null +++ b/src/back/jdd-components/notice-board/icons/forum.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/back/jdd-components/notice-board/icons/irc.svg b/src/back/jdd-components/notice-board/icons/irc.svg new file mode 100644 index 0000000..7b8d793 --- /dev/null +++ b/src/back/jdd-components/notice-board/icons/irc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/back/jdd-components/notice-board/icons/telegram.svg b/src/back/jdd-components/notice-board/icons/telegram.svg new file mode 100644 index 0000000..5e59353 --- /dev/null +++ b/src/back/jdd-components/notice-board/icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/back/jdd-components/notice-board/icons/telephone.svg b/src/back/jdd-components/notice-board/icons/telephone.svg new file mode 100644 index 0000000..ff910cb --- /dev/null +++ b/src/back/jdd-components/notice-board/icons/telephone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/back/jdd-components/notice-board/notice-board.css b/src/back/jdd-components/notice-board/notice-board.css new file mode 100644 index 0000000..105da27 --- /dev/null +++ b/src/back/jdd-components/notice-board/notice-board.css @@ -0,0 +1,228 @@ +.notice-board { + padding: 96px 0; + position: relative; +} + +.notice-board__anchor-point { + position: absolute; + top: -96px; +} + +.notice-board__background picture { + img { + height: 100%; + width: 100%; + object-fit: cover; + } +} + +.notice-board__background { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.notice-board__background::before { + content: ""; + display: block; + position: absolute; + inset: 0; + background: rgba(85, 53, 93, 0.7); +} + +.notice-board__body { + max-width: 1256px; + margin: 0 auto; + overflow: hidden; +} + +.notice-board__body-inner { + display: grid; + padding: 24px 48px; + grid-template-columns: auto auto; + margin: 0 -24px; + opacity: 0.99; +} + +.notice-board__header-main { + margin: 0 24px 24px 0; + font-weight: 800; + color: white; + line-height: 48px; + font-family: "Inter UI", sans-serif; + font-size: 38px; + grid-row-end: span 2; +} + +.notice-board__content { + padding: 0 24px; +} + +.notice-board__contacts { + grid-column: 2; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 216px)); + flex-wrap: wrap; + justify-content: space-between; + min-width: 500px; +} + +.notice-board__contact { + align-self: center; +} + +.notice-board__contact-icon { + width: min-content; + text-decoration: none; + color: white; + font-weight: bold; + font-family: "Inter UI", sans-serif; + display: flex; + align-items: center; + margin: 12px 0; +} + +.notice-board__contact-icon span { + display: inline-block; + line-height: 24px; + font-size: 12px; + padding-left: 13px; +} + +.notice-board__contact-icon picture { + height: 50px; + width: 50px; + transition: all 0.2s ease-in-out; +} + +.notice-board__contact-icon:hover picture { + filter: brightness(1.2); + transform: scale(1.1); +} + +.notice-board__header-minor { + color: white; + line-height: 32px; + font-family: "Zilla Slab", serif; + font-size: 36px; + font-weight: 300; + max-width: 528px; + flex-grow: 1; + margin: 0 24px 24px 0; +} + +@container (max-width: 1200px) { + .notice-board__body-inner { + display: flex; + flex-flow: row wrap; + padding-top: 24px; + padding-bottom: 24px; + background-color: rgba(82, 149, 163, 0.66); + } + + .notice-board__header-minor { + align-self: center; + } + + .notice-board__contacts { + flex-grow: 1; + } +} + +@container (max-width: 1130px) { + .notice-board__background picture { + height: 100%; + width: 100%; + object-fit: cover; + } + + .notice-board__header-main { + font-size: 32px; + } + + .notice-board__header-minor { + font-size: 24px; + line-height: 24px; + max-width: 100%; + } + + .notice-board__contacts { + width: 100%; + } +} + +@container (max-width: 1000px) { + .notice-board { + padding-top: 48px; + padding-bottom: 48px; + } + + .notice-board__header-main { + font-size: 34px; + } + + .notice-board__content { + font-size: 33px; + } + + .notice-board__contacts { + width: 100%; + } +} + +@container (max-width: 710px) { + .notice-board { + padding-top: 48px; + padding-bottom: 48px; + } + + .notice-board__body-inner { + flex-wrap: wrap; + } + + .notice-board__header-main { + width: 100%; + font-size: 25px; + line-height: 24px; + margin: 0 0 24px; + } + + .notice-board__header-minor { + font-size: 25px; + line-height: 24px; + margin: 0 0 24px; + } + + .notice-board__content { + width: 100%; + } + + .notice-board__contact { + padding: 0; + max-width: initial; + } + + .notice-board__contact-icon span { + padding-left: 8px; + line-height: 48px; + } + + .notice-board__contact-icon picture { + height: 42px; + width: 42px; + } +} + +@container (max-width: 450px) { + .notice-board .notice-board__contacts { + grid-column: 1; + display: grid; + grid-template-columns: 100%; + } +} diff --git a/src/back/jdd-components/notice-board/notice-board.jdd.tsx b/src/back/jdd-components/notice-board/notice-board.jdd.tsx new file mode 100644 index 0000000..35ac5e1 --- /dev/null +++ b/src/back/jdd-components/notice-board/notice-board.jdd.tsx @@ -0,0 +1,104 @@ +import { TempstreamJSX } from "tempstream"; +import type { ComponentToHTMLArgs } from "@sealcode/jdd"; +import { Component, ComponentArguments } from "@sealcode/jdd"; +import TelegramIcon from "./icons/telegram.svg"; +import EmailIcon from "./icons/email.svg"; +import ForumIcon from "./icons/forum.svg"; +import IRCIcon from "./icons/irc.svg"; + +const component_arguments = { + title: new ComponentArguments.ShortText(), + image: new ComponentArguments.Image(), + leftheader: new ComponentArguments.ShortText(), + rightheader: new ComponentArguments.ShortText(), + links: new ComponentArguments.List( + new ComponentArguments.Structured({ + href: new ComponentArguments.ShortText(), + name: new ComponentArguments.ShortText(), + icon: new ComponentArguments.Enum(["Telegram", "Forum", "Email", "IRC"]), + title: new ComponentArguments.ShortText(), + }) + ), +} as const; + +const iconNameToIcon: Record = { + Telegram: TelegramIcon.url, + Email: EmailIcon.url, + Forum: ForumIcon.url, + IRC: IRCIcon.url, +}; + +const renderContact = ({ + href, + name, + icon, + title, +}: { + href: string; + name: string; + icon: string; + title: string; +}) => { + const icon_url = iconNameToIcon[icon]; + if (!icon_url) { + return " "; + } + return ( +
+ + {name} + {name} + +
+ ); +}; + +export class NoticeBoard extends Component { + getArguments() { + return component_arguments; + } + + async toHTML({ + args: { title, image, links, rightheader, leftheader }, + classes, + jdd_context: { render_markdown, render_image, language }, + }: ComponentToHTMLArgs): Promise { + return ( +
+
+ {title && ( +
+ )} +
+ {render_image(image, { + resolutions: [800, 1000, 1200, 1500, 2000], + sizesAttr: "100vw", + alt: "", + })} +
+
+
+

+ {render_markdown(language, leftheader)} +

+ +

+ {render_markdown(language, rightheader)} +

+
+ {links.map(renderContact)} +
+
+
+
+
+ ); + } +}