Skip to content

Commit fe92970

Browse files
cprussincprussin
authored
Merge pull request #2408 from pyth-network/cprussin/ui-10-make-app-responsive-handle-small-screen-sizes
feat(insights): make app responsive
2 parents 176ba64 + 2f1d51c commit fe92970

File tree

86 files changed

+3111
-1362
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+3111
-1362
lines changed

‎.github/workflows/ci-turbo-build.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ jobs:
1515
build:
1616
runs-on: ubuntu-latest
1717
steps:
18+
- name: Install libusb
19+
run: sudo apt install -y libusb-1.0-0-dev
1820
- uses: actions/checkout@v4
1921
- uses: Swatinem/rust-cache@v2
2022
- uses: actions/setup-node@v4

‎.github/workflows/ci-turbo-test.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ jobs:
1515
test:
1616
runs-on: ubuntu-latest
1717
steps:
18+
- name: Install libusb
19+
run: sudo apt install -y libusb-1.0-0-dev
1820
- uses: actions/checkout@v4
1921
- uses: actions/setup-node@v4
2022
with:

‎.github/workflows/publish-js.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ jobs:
99
name: Publish Javascript Packages to NPM
1010
runs-on: ubuntu-latest
1111
steps:
12+
- name: Install libusb
13+
run: sudo apt install -y libusb-1.0-0-dev
1214
- uses: actions/checkout@v2
1315
- uses: actions/setup-node@v4
1416
with:

‎apps/insights/src/components/Cards/index.module.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.cards {
4+
display: flex;
5+
flex-flow: row nowrap;
6+
align-items: stretch;
7+
gap: theme.spacing(6);
8+
overflow-x: auto;
9+
margin-left: calc(-1 * #{theme.$max-width-padding});
10+
margin-right: calc(-1 * #{theme.$max-width-padding});
11+
padding: theme.spacing(4) theme.$max-width-padding theme.spacing(4)
12+
theme.$max-width-padding;
13+
scroll-snap-type: x mandatory;
14+
scroll-padding-inline: theme.$max-width-padding;
15+
16+
@include theme.breakpoint("sm") {
17+
padding-top: theme.spacing(6);
18+
padding-bottom: theme.spacing(6);
19+
}
20+
21+
& > * {
22+
flex: none;
23+
width: 70vw;
24+
max-width: theme.spacing(70);
25+
scroll-snap-align: start;
26+
27+
@include theme.breakpoint("sm") {
28+
flex: 1 0 theme.spacing(70);
29+
width: theme.spacing(70);
30+
max-width: unset;
31+
}
32+
}
33+
34+
.publishersChart,
35+
.priceFeedsChart {
36+
& svg {
37+
cursor: pointer;
38+
}
39+
}
40+
}

‎apps/insights/src/components/Cards/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import clsx from "clsx";
2+
import type { ComponentProps } from "react";
3+
4+
import styles from "./index.module.scss";
5+
6+
export const Cards = ({ className, ...props }: ComponentProps<"section">) => (
7+
<section className={clsx(className, styles.cards)} {...props} />
8+
);

‎apps/insights/src/components/EntityList/index.module.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.entityList {
4+
background: theme.color("background", "primary");
5+
border-radius: theme.border-radius("xl");
6+
list-style-type: none;
7+
padding: 0;
8+
margin: 0;
9+
10+
.entityItem {
11+
padding: theme.spacing(3) theme.spacing(4);
12+
border-bottom: 1px solid theme.color("background", "secondary");
13+
outline: theme.spacing(0.5) solid transparent;
14+
outline-offset: -#{theme.spacing(0.5)};
15+
transition:
16+
outline-color 100ms linear,
17+
background-color 100ms linear;
18+
-webkit-tap-highlight-color: transparent;
19+
20+
&[data-focus-visible] {
21+
outline: theme.spacing(0.5) solid theme.color("focus");
22+
}
23+
24+
&[data-href] {
25+
cursor: pointer;
26+
}
27+
28+
&[data-hovered] {
29+
background-color: theme.color("button", "outline", "background", "hover");
30+
}
31+
32+
&[data-pressed] {
33+
background-color: theme.color(
34+
"button",
35+
"outline",
36+
"background",
37+
"active"
38+
);
39+
}
40+
41+
&:first-child {
42+
border-top-left-radius: theme.border-radius("xl");
43+
border-top-right-radius: theme.border-radius("xl");
44+
}
45+
46+
&:last-child {
47+
border-bottom-left-radius: theme.border-radius("xl");
48+
border-bottom-right-radius: theme.border-radius("xl");
49+
border-bottom: none;
50+
}
51+
52+
.itemHeader,
53+
.itemDetailsItem {
54+
display: flex;
55+
flex-flow: row nowrap;
56+
align-items: center;
57+
justify-content: space-between;
58+
}
59+
60+
.itemDetails {
61+
display: grid;
62+
grid-template-columns: 1fr;
63+
gap: theme.spacing(2) theme.spacing(18);
64+
65+
@include theme.breakpoint("sm") {
66+
grid-template-columns: repeat(2, 1fr);
67+
}
68+
69+
.itemDetailsItem {
70+
height: theme.spacing(5);
71+
72+
dt {
73+
@include theme.text("sm", "normal");
74+
75+
color: theme.color("muted");
76+
}
77+
78+
dd {
79+
margin: 0;
80+
}
81+
}
82+
}
83+
}
84+
}

‎apps/insights/src/components/EntityList/index.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import { Skeleton } from "@pythnetwork/component-library/Skeleton";
4+
import {
5+
GridList,
6+
GridListItem,
7+
} from "@pythnetwork/component-library/unstyled/GridList";
8+
import clsx from "clsx";
9+
import type { ComponentProps, ReactNode } from "react";
10+
11+
import styles from "./index.module.scss";
12+
13+
type Props<T extends string> = ComponentProps<typeof GridList<RowConfig<T>>> & {
14+
headerLoadingSkeleton?: ReactNode | undefined;
15+
label: string;
16+
fields: ({
17+
id: T;
18+
name: ReactNode;
19+
} & (
20+
| { loadingSkeleton?: ReactNode | undefined }
21+
| { loadingSkeletonWidth?: number | undefined }
22+
))[];
23+
} & (
24+
| {
25+
isLoading: true;
26+
rows?: RowConfig<T>[] | undefined;
27+
}
28+
| {
29+
isLoading?: false | undefined;
30+
rows: RowConfig<T>[];
31+
}
32+
);
33+
34+
type RowConfig<T extends string> = {
35+
id: string | number;
36+
data: Record<T, ReactNode>;
37+
header: ReactNode;
38+
href?: string;
39+
textValue: string;
40+
};
41+
42+
export const EntityList = <T extends string>({
43+
fields,
44+
isLoading,
45+
rows,
46+
headerLoadingSkeleton,
47+
className,
48+
label,
49+
...props
50+
}: Props<T>) => (
51+
<GridList
52+
className={clsx(styles.entityList, className)}
53+
items={isLoading ? [] : rows}
54+
aria-label={label}
55+
{...props}
56+
>
57+
{isLoading ? (
58+
<GridListItem className={styles.entityItem ?? ""}>
59+
<div className={styles.itemHeader}>{headerLoadingSkeleton}</div>
60+
<dl className={styles.itemDetails}>
61+
{fields.map((field) => (
62+
<div key={field.id} className={styles.itemDetailsItem}>
63+
<dt>{field.name}</dt>
64+
<dd>
65+
{"loadingSkeleton" in field ? (
66+
field.loadingSkeleton
67+
) : (
68+
<Skeleton
69+
width={
70+
"loadingSkeletonWidth" in field
71+
? field.loadingSkeletonWidth
72+
: 20
73+
}
74+
/>
75+
)}
76+
</dd>
77+
</div>
78+
))}
79+
</dl>
80+
</GridListItem>
81+
) : (
82+
({ data, header, ...props }) => (
83+
<GridListItem className={styles.entityItem ?? ""} {...props}>
84+
<div className={styles.itemHeader}>{header}</div>
85+
<dl className={styles.itemDetails}>
86+
{fields.map((field) => (
87+
<div key={field.id} className={styles.itemDetailsItem}>
88+
<dt>{field.name}</dt>
89+
<dd>{data[field.id]}</dd>
90+
</div>
91+
))}
92+
</dl>
93+
</GridListItem>
94+
)
95+
)}
96+
</GridList>
97+
);

‎apps/insights/src/components/Error/index.module.scss‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
11
@use "@pythnetwork/component-library/theme";
22

33
.error {
4-
@include theme.max-width;
5-
64
display: flex;
75
flex-flow: column nowrap;
86
gap: theme.spacing(12);
97
align-items: center;
108
text-align: center;
11-
padding: theme.spacing(36) theme.spacing(0);
9+
padding-top: theme.spacing(8);
10+
padding-bottom: theme.spacing(8);
11+
12+
@include theme.max-width;
13+
14+
@include theme.breakpoint("sm") {
15+
padding-top: theme.spacing(18);
16+
padding-bottom: theme.spacing(18);
17+
}
18+
19+
@include theme.breakpoint("lg") {
20+
padding-top: theme.spacing(36);
21+
padding-bottom: theme.spacing(36);
22+
}
1223

1324
.errorIcon {
14-
font-size: theme.spacing(20);
15-
height: theme.spacing(20);
25+
font-size: theme.spacing(14);
26+
height: theme.spacing(14);
1627
color: theme.color("states", "error", "color");
28+
29+
@include theme.breakpoint("sm") {
30+
font-size: theme.spacing(20);
31+
height: theme.spacing(20);
32+
}
1733
}
1834

1935
.text {

‎apps/insights/src/components/Explain/index.module.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
@use "@pythnetwork/component-library/theme";
22

3-
.trigger {
4-
@each $size, $values in theme.$button-sizes {
5-
&[data-size="#{$size}"] {
6-
margin: -#{theme.map-get-strict($values, "padding")};
3+
.explain {
4+
display: none;
5+
6+
@include theme.breakpoint("sm") {
7+
display: grid;
8+
}
9+
10+
.trigger {
11+
@each $size, $values in theme.$button-sizes {
12+
&[data-size="#{$size}"] {
13+
margin: -#{theme.map-get-strict($values, "padding")};
14+
}
715
}
816
}
917
}

‎apps/insights/src/components/Explain/index.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,25 @@ type Props = {
1313
};
1414

1515
export const Explain = ({ size, title, children }: Props) => (
16-
<AlertTrigger>
17-
<Button
18-
className={styles.trigger ?? ""}
19-
variant="ghost"
20-
size={size}
21-
beforeIcon={(props) => <Info weight="fill" {...props} />}
22-
rounded
23-
hideText
24-
>
25-
Explain {title}
26-
</Button>
27-
<Alert
28-
title={title}
29-
icon={<Lightbulb />}
30-
bodyClassName={styles.description}
31-
>
32-
{children}
33-
</Alert>
34-
</AlertTrigger>
16+
<div className={styles.explain}>
17+
<AlertTrigger>
18+
<Button
19+
className={styles.trigger ?? ""}
20+
variant="ghost"
21+
size={size}
22+
beforeIcon={(props) => <Info weight="fill" {...props} />}
23+
rounded
24+
hideText
25+
>
26+
Explain {title}
27+
</Button>
28+
<Alert
29+
title={title}
30+
icon={<Lightbulb />}
31+
bodyClassName={styles.description}
32+
>
33+
{children}
34+
</Alert>
35+
</AlertTrigger>
36+
</div>
3537
);

0 commit comments

Comments
 (0)