amarth/customer-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

too lazy to think of a message, so enjoy this pointless text. Good luck future me...
All checks were successful
Test action / Print hello world (push) Successful in 6m12s
Details

Browse source
This commit is contained in:
Chris Kruining 2025-09-22 14:25:07 +00:00
parent a502a50176
commit ff31c28d38
46 changed files with 1403 additions and 1397 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/list/index.ts Normal file → Executable file
View file

@ -1 +1 @@
export { List } from "./list";
export { List } from "./list";

184
src/components/list/list.module.css Normal file → Executable file
View file

@ -1,92 +1,92 @@
.container {
--_space: var(--size-6);
display: grid;
grid: auto auto / auto auto;
grid-template-areas:
"heading metadata"
"list list";
justify-content: space-between;
inline-size: 100%;
padding-inline: var(--_space);
}
.heading {
grid-area: heading;
font-size: var(--size-7);
color: var(--text-1);
padding-inline: var(--_space);
}
.metadata {
grid-area: metadata;
color: var(--text-2);
}
.list {
grid-area: list;
list-style-type: none;
container-type: inline-size;
display: grid;
grid-auto-flow: column;
gap: var(--_space);
padding: calc(8 * var(--_space)) calc(2 * var(--_space)) calc(2.5 * var(--_space));
scroll-padding: calc(2 * var(--_space));
margin: calc(-7 * var(--_space)) calc(-1 * var(--_space)) 0em;
overflow: visible auto;
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
/* the before and afters have unsnappable elements that create bouncy edges to the scroll */
&::before,
&::after {
content: "";
display: block;
}
&::before {
inline-size: 15cqi;
}
&::after {
inline-size: 100cqi;
}
& > li {
scroll-snap-align: start;
container-type: scroll-state;
padding: 0;
position: relative;
isolation: isolate;
z-index: calc(var(--sibling-count) - var(--sibling-index));
&:has(> :hover, > :focus-within) {
z-index: calc(var(--sibling-count) + 1);
}
& > * {
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
animation: slide-in linear both;
animation-timeline: view(inline);
animation-range: cover -100cqi contain 15cqi;
}
}
}
}
}
@keyframes slide-in {
from {
transform: translateX(-100cqi) scale(0.5);
}
}
.container {
--_space: var(--size-6);
display: grid;
grid: auto auto / auto auto;
grid-template-areas:
"heading metadata"
"list list";
justify-content: space-between;
inline-size: 100%;
padding-inline: var(--_space);
}
.heading {
grid-area: heading;
font-size: var(--size-7);
color: var(--text-1);
padding-inline: var(--_space);
}
.metadata {
grid-area: metadata;
color: var(--text-2);
}
.list {
grid-area: list;
list-style-type: none;
container-type: inline-size;
display: grid;
grid-auto-flow: column;
gap: var(--_space);
padding: calc(8 * var(--_space)) calc(2 * var(--_space)) calc(2.5 * var(--_space));
scroll-padding: calc(2 * var(--_space));
margin: calc(-7 * var(--_space)) calc(-1 * var(--_space)) 0em;
overflow: visible auto;
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
/* the before and afters have unsnappable elements that create bouncy edges to the scroll */
&::before,
&::after {
content: "";
display: block;
}
&::before {
inline-size: 15cqi;
}
&::after {
inline-size: 100cqi;
}
& > li {
scroll-snap-align: start;
container-type: scroll-state;
padding: 0;
position: relative;
isolation: isolate;
z-index: calc(var(--sibling-count) - var(--sibling-index));
&:has(> :hover, > :focus-within) {
z-index: calc(var(--sibling-count) + 1);
}
& > * {
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
animation: slide-in linear both;
animation-timeline: view(inline);
animation-range: cover -100cqi contain 15cqi;
}
}
}
}
}
@keyframes slide-in {
from {
transform: translateX(-100cqi) scale(0.5);
}
}

54
src/components/list/list.tsx Normal file → Executable file
View file

@ -1,27 +1,27 @@
import { Accessor, Index, JSX } from "solid-js";
import css from "./list.module.css";
interface ListProps<T> {
label: string;
items: T[];
class?: string;
children: (item: Accessor<T>) => JSX.Element;
}
export function List<T>(props: ListProps<T>) {
return (
<section class={`${css.container} ${props.class ?? ""}`}>
<b role="heading" class={css.heading}>
{props.label}
</b>
<sub class={css.metadata}>{props.items.length} result(s)</sub>
<ul class={css.list}>
<Index each={props.items}>
{(item) => <li>{props.children(item)}</li>}
</Index>
</ul>
</section>
);
}
import { Accessor, Index, JSX } from "solid-js";
import css from "./list.module.css";
interface ListProps<T> {
label: string;
items: T[];
class?: string;
children: (item: Accessor<T>) => JSX.Element;
}
export function List<T>(props: ListProps<T>) {
return (
<section class={`${css.container} ${props.class ?? ""}`}>
<b role="heading" class={css.heading}>
{props.label}
</b>
<sub class={css.metadata}>{props.items.length} result(s)</sub>
<ul class={css.list}>
<Index each={props.items}>
{(item) => <li>{props.children(item)}</li>}
</Index>
</ul>
</section>
);
}