ordered pictogram tiles
Summary: Ref T2922 Reviewers: kuba-orlik Subscribers: jenkins-user Maniphest Tasks: T2922 Differential Revision: https://hub.sealcode.org/D1521
This commit is contained in:
parent
2bd0dd71d4
commit
87f54fb9e0
45
src/back/global_styles/vars.css
Normal file
45
src/back/global_styles/vars.css
Normal file
@ -0,0 +1,45 @@
|
||||
:root {
|
||||
--default-font-color: #222;
|
||||
|
||||
--secondary: #55a4b4;
|
||||
--secondary-light-01: #a4d2db;
|
||||
--secondary-dark-01: #5294a1;
|
||||
--secondary-dark-02: #3c7c88;
|
||||
|
||||
--alto-gray: #e0e0e0;
|
||||
--dove-gray: #6f6e6e;
|
||||
--faint-gray: #ededed;
|
||||
|
||||
--main: #6d4477;
|
||||
|
||||
--main-dark-01: #62386c;
|
||||
--main-dark-02: #56335d;
|
||||
--main-dark-03: #4a2a52;
|
||||
--main-dark-04: #55335d;
|
||||
|
||||
--main-light-01: #744d7e;
|
||||
--main-light-02: #8b7192;
|
||||
--main-light-03: #a686af;
|
||||
--main-bg-text: #fff;
|
||||
|
||||
--main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%);
|
||||
--main-dark-02-bg-secondary: #b5a2ba;
|
||||
|
||||
--wild-sand: #f6f6f6;
|
||||
--london-hue: #beadc3;
|
||||
|
||||
--wild-sand-bg-text: #000;
|
||||
|
||||
--white-bg-text: #6f6e6e;
|
||||
--white-bg-text-secondary: #000;
|
||||
--white-bg-text-gray: #565656;
|
||||
--white-bg-link: #404f6e;
|
||||
--white-on-darker-bg-text: #fff;
|
||||
|
||||
/*px / 24 = N rem*/
|
||||
--container-width: 50rem;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans-serif: "Inter UI", sans-serif;
|
||||
--font-slab-serif: "Zilla Slab", serif;
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
.pictogram-tiles {
|
||||
max-width: var(--container-width);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 2rem;
|
||||
grid-auto-rows: minmax(7rem, auto);
|
||||
grid-row-gap: 1rem;
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile {
|
||||
grid-row: span 2;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile:nth-child(even) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile:nth-child(odd) {
|
||||
grid-column: 2;
|
||||
}
|
||||
.pictogram-tiles__tile:only-child {
|
||||
grid-column: 1 / span 2;
|
||||
max-width: 23rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pictogram-tiles__content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pictogram-tiles__upperSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pictogram-tiles__upperSection span {
|
||||
font-family: var(--font-sans-serif);
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
height: fit-content;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.pictogram-tiles__upperSection span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #000000;
|
||||
opacity: 25%;
|
||||
}
|
||||
.pictogram-tiles__upperSection img {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple a {
|
||||
color: var(--white-on-darker-bg-text);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white a {
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
.pictogram-tiles__lowerSection h3 {
|
||||
grid-row: 1;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
font-family: var(--font-slab-serif);
|
||||
font-weight: 400;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.pictogram-tiles__lowerSection p {
|
||||
grid-row: 2;
|
||||
font-family: var(--font-sans-serif);
|
||||
color: var(--dove-gray);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple {
|
||||
background-color: var(--main);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white {
|
||||
background-color: white;
|
||||
box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__upperSection span {
|
||||
color: var(--main-bg-text);
|
||||
border-color: hsl(287.3, 13.1%, 50.8%);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__upperSection span {
|
||||
color: var(--main);
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection h3 {
|
||||
color: var(--main-bg-text);
|
||||
}
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection p {
|
||||
color: var(--main-bg-text-secondary);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection {
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection p {
|
||||
color: var(--dove-gray);
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 880px) {
|
||||
.pictogram-tiles {
|
||||
display: block;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
.pictogram-tiles__tile {
|
||||
max-width: 21rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pictogram-tiles__tile:nth-child(odd) {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile:nth-child(even) {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 440px) {
|
||||
.pictogram-tiles {
|
||||
padding: 0;
|
||||
}
|
||||
.pictogram-tiles__content {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import type { FlatTemplatable } from "tempstream";
|
||||
import { TempstreamJSX } from "tempstream";
|
||||
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
|
||||
import { Component, ComponentArguments } from "@sealcode/jdd";
|
||||
|
||||
const component_arguments = {
|
||||
elements: new ComponentArguments.List(
|
||||
new ComponentArguments.Structured({
|
||||
color: new ComponentArguments.Enum(["purple", "white"]),
|
||||
iconPath: new ComponentArguments.Image(),
|
||||
iconAlt: new ComponentArguments.ShortText(),
|
||||
title: new ComponentArguments.ShortText(),
|
||||
description: new ComponentArguments.Markdown(),
|
||||
})
|
||||
),
|
||||
} as const;
|
||||
|
||||
export class OrderedPictogramTiles extends Component<typeof component_arguments> {
|
||||
getArguments() {
|
||||
return component_arguments;
|
||||
}
|
||||
|
||||
toHTML({
|
||||
args: { elements },
|
||||
jdd_context: { render_image, render_markdown, language },
|
||||
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
||||
return (
|
||||
<section>
|
||||
<ol class="pictogram-tiles">
|
||||
{elements.map((element, index) => (
|
||||
<li
|
||||
class={`pictogram-tiles__tile pictogram-tiles__tile--${element.color}`}
|
||||
>
|
||||
<div class="pictogram-tiles__content">
|
||||
<div class="pictogram-tiles__upperSection">
|
||||
<span>
|
||||
{(index + 1).toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 2,
|
||||
useGrouping: false,
|
||||
})}
|
||||
</span>
|
||||
{render_image(element.iconPath, {
|
||||
container: {
|
||||
height: 200,
|
||||
width: 200,
|
||||
objectFit: "cover",
|
||||
},
|
||||
alt: element.iconAlt,
|
||||
})}
|
||||
</div>
|
||||
<div class="pictogram-tiles__lowerSection">
|
||||
<h3>{element.title}</h3>
|
||||
{render_markdown(language, element.description)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user