migrate notice-board component
Summary: migrate notice-board component Ref T2920 Reviewers: #testers, kuba-orlik Reviewed By: #testers, kuba-orlik Subscribers: kuba-orlik, jenkins-user Maniphest Tasks: T2920 Differential Revision: https://hub.sealcode.org/D1601
This commit is contained in:
PrzZiomek2
parent
a6446eb296
commit
778beddb5e
1
src/back/jdd-components/notice-board/icons/email.svg
Normal file
1
src/back/jdd-components/notice-board/icons/email.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-telegram fa-w-16" data-icon="telegram" data-prefix="fab" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8" style="fill:#fff"/><path d="M351.1 232.548c1.598-1.27 3.973-.082 3.973 1.925v83.764c0 10.855-8.806 19.661-19.66 19.661H165.016c-10.855 0-19.661-8.806-19.661-19.66v-83.724c0-2.048 2.335-3.195 3.973-1.925 9.175 7.127 21.34 16.18 63.12 46.531 8.643 6.308 23.225 19.58 37.766 19.497 14.623.123 29.491-13.435 37.806-19.497 41.78-30.352 53.904-39.445 63.08-46.572m-100.885 52.92c9.503.165 23.183-11.96 30.065-16.957 54.354-39.445 58.491-42.885 71.025-52.716 2.376-1.843 3.768-4.71 3.768-7.741v-7.783c0-10.854-8.806-19.66-19.66-19.66H165.016c-10.855 0-19.661 8.806-19.661 19.66v7.783c0 3.03 1.393 5.857 3.768 7.741 12.534 9.79 16.671 13.271 71.026 52.716 6.881 4.997 20.562 17.122 30.065 16.958" style="fill:#6d4477;fill-opacity:1;stroke-width:.40960449"/></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
1
src/back/jdd-components/notice-board/icons/forum.svg
Normal file
1
src/back/jdd-components/notice-board/icons/forum.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-telegram fa-w-16" data-icon="telegram" data-prefix="fab" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8" style="fill:#fff"/><path d="M155.318 341.996V240.973s13.154-82.239 101.395-80.716c88.24 1.523 99.75 93.915 94.818 94.423s6.029 82.747-99.202 88.331c-105.232 5.584-97.011-1.015-97.011-1.015z" style="fill:#6d4477;fill-opacity:1;stroke:#6d4477;stroke-width:.95064849px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/></svg>
|
||||
|
After Width: | Height: | Size: 575 B |
1
src/back/jdd-components/notice-board/icons/irc.svg
Normal file
1
src/back/jdd-components/notice-board/icons/irc.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-telegram fa-w-16" data-icon="telegram" data-prefix="fab" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8" style="fill:#fff"/><path d="M253.12 178.395c-69.74 0-126.262 36.178-126.262 80.827 0 19.274 10.555 36.916 28.113 50.79-6.165 19.584-26.781 37.032-27.028 37.226-1.085.894-1.38 2.215-.74 3.381.642 1.166 2.022 1.865 3.6 1.865 32.7 0 57.213-12.357 69.346-19.973 16.128 4.78 34.032 7.538 52.971 7.538 69.74 0 126.262-36.178 126.262-80.827s-56.522-80.827-126.262-80.827" style="fill:#6d4477;fill-opacity:1;stroke-width:.43778849"/><ellipse cx="195.676" cy="257.858" rx="19.176" ry="17.642" style="fill:#f9f9f9;fill-opacity:1;stroke:#000;stroke-opacity:0"/><ellipse cx="-346.698" cy="253.511" rx="85.907" ry=".767" style="fill:#f9f9f9;fill-opacity:1;stroke:#000;stroke-opacity:0"/><ellipse cx="255.676" cy="257.858" rx="19.176" ry="17.642" style="fill:#f9f9f9;fill-opacity:1;stroke:#000;stroke-opacity:0"/><ellipse cx="315.676" cy="257.858" rx="19.176" ry="17.642" style="fill:#f9f9f9;fill-opacity:1;stroke:#000;stroke-opacity:0"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/back/jdd-components/notice-board/icons/telegram.svg
Normal file
1
src/back/jdd-components/notice-board/icons/telegram.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-telegram fa-w-16" data-icon="telegram" data-prefix="fab" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8" style="fill:#fff"/><path d="M345.325 187.262 313.14 338.936c-2.372 10.754-8.778 13.364-17.714 8.303l-49.029-36.14-23.644 22.776c-2.61 2.61-4.824 4.823-9.885 4.823l3.48-49.899 90.861-82.084c3.954-3.48-.87-5.456-6.089-1.977l-112.292 70.697-48.397-15.104c-10.517-3.321-10.755-10.518 2.214-15.579l189.079-72.91c8.777-3.164 16.448 2.134 13.601 15.42" style="fill:#6d4477;fill-opacity:1;stroke-width:.79079205"/></svg>
|
||||
|
After Width: | Height: | Size: 654 B |
1
src/back/jdd-components/notice-board/icons/telephone.svg
Normal file
1
src/back/jdd-components/notice-board/icons/telephone.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="82mm" height="82mm" viewBox="0 0 82 82"><g transform="translate(0 -215)"><circle cx="41.01" cy="255.99" r="41.01" style="fill:#fff;fill-opacity:1;stroke-width:.26458332"/><rect width="24.478" height="45.691" x="28.761" y="233.154" ry="3.167" style="fill:#6d4477;fill-opacity:1;stroke-width:.2119804"/><rect width="19.741" height="37.532" x="31.13" y="235.646" ry="1.735" style="fill:#fff;fill-opacity:1;stroke-width:.22182518"/><ellipse cx="41" cy="276.108" rx="2.034" ry="2.024" style="fill:#fff;fill-opacity:1;stroke-width:.218502"/></g></svg>
|
||||
|
After Width: | Height: | Size: 592 B |
228
src/back/jdd-components/notice-board/notice-board.css
Normal file
228
src/back/jdd-components/notice-board/notice-board.css
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
104
src/back/jdd-components/notice-board/notice-board.jdd.tsx
Normal file
104
src/back/jdd-components/notice-board/notice-board.jdd.tsx
Normal file
@ -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<string, string | undefined> = {
|
||||
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 (
|
||||
<div class="notice-board__contact">
|
||||
<a
|
||||
class="notice-board__contact-icon"
|
||||
href={href}
|
||||
{...(title ? { title } : {})}
|
||||
>
|
||||
<img src={icon_url} alt={name} width="55" height="55" />
|
||||
<span>{name}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export class NoticeBoard extends Component<typeof component_arguments> {
|
||||
getArguments() {
|
||||
return component_arguments;
|
||||
}
|
||||
|
||||
async toHTML({
|
||||
args: { title, image, links, rightheader, leftheader },
|
||||
classes,
|
||||
jdd_context: { render_markdown, render_image, language },
|
||||
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
||||
return (
|
||||
<section class={["nb-root", ...classes]}>
|
||||
<div class="notice-board">
|
||||
{title && (
|
||||
<div
|
||||
class="notice-board__anchor-point"
|
||||
id={render_markdown(language, title)}
|
||||
></div>
|
||||
)}
|
||||
<div class="notice-board__background">
|
||||
{render_image(image, {
|
||||
resolutions: [800, 1000, 1200, 1500, 2000],
|
||||
sizesAttr: "100vw",
|
||||
alt: "",
|
||||
})}
|
||||
</div>
|
||||
<div class="notice-board__body">
|
||||
<div class="notice-board__body-inner">
|
||||
<h2 class="notice-board__header-main">
|
||||
{render_markdown(language, leftheader)}
|
||||
</h2>
|
||||
|
||||
<h3 class="notice-board__header-minor">
|
||||
{render_markdown(language, rightheader)}
|
||||
</h3>
|
||||
<address class="notice-board__contacts">
|
||||
{links.map(renderContact)}
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user