Skip to content

Commit ab7a1eb

Browse files
cprussincprussin
committed
feat(insights): make app responsive
1 parent ea112e6 commit ab7a1eb

Some content is hidden

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

53 files changed

+1451
-603
lines changed

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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: 1 0 theme.spacing(60);
23+
width: theme.spacing(60);
24+
scroll-snap-align: start;
25+
}
26+
27+
.publishersChart,
28+
.priceFeedsChart {
29+
& svg {
30+
cursor: pointer;
31+
}
32+
}
33+
}

‎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/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/NotFound/index.module.scss‎

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

33
.notFound {
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
.searchIcon {
1425
display: grid;
1526
place-content: center;
16-
padding: theme.spacing(8);
27+
padding: theme.spacing(4);
1728
background: theme.color("button", "disabled", "background");
18-
font-size: theme.spacing(12);
29+
font-size: theme.spacing(8);
1930
color: theme.color("button", "disabled", "foreground");
2031
border-radius: theme.border-radius("full");
32+
33+
@include theme.breakpoint("sm") {
34+
padding: theme.spacing(8);
35+
font-size: theme.spacing(12);
36+
}
2137
}
2238

2339
.text {

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

Lines changed: 70 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,97 @@
44
@include theme.max-width;
55

66
.header {
7-
@include theme.h3;
8-
97
color: theme.color("heading");
10-
font-weight: theme.font-weight("semibold");
11-
margin-bottom: theme.spacing(6);
12-
}
138

14-
.stats {
15-
display: flex;
16-
flex-flow: row nowrap;
17-
align-items: stretch;
18-
gap: theme.spacing(6);
19-
20-
& > * {
21-
flex: 1 1 0px;
22-
width: 0;
23-
}
24-
25-
.publishersChart,
26-
.priceFeedsChart {
27-
& svg {
28-
cursor: pointer;
29-
}
30-
}
9+
@include theme.h3;
3110
}
3211

3312
.overviewMainContent {
3413
display: grid;
35-
grid-template-columns: repeat(2, 1fr);
36-
gap: theme.spacing(40);
3714
align-items: center;
38-
padding: theme.spacing(18) 0;
15+
padding-top: theme.spacing(6);
16+
padding-bottom: theme.spacing(30);
3917

40-
.headline {
41-
@include theme.text("3xl", "medium");
18+
@include theme.breakpoint("md") {
19+
grid-template-columns: repeat(2, 1fr);
20+
column-gap: theme.spacing(20);
21+
padding-top: theme.spacing(12);
22+
}
4223

43-
color: theme.color("heading");
44-
line-height: 125%;
45-
margin-top: theme.spacing(8);
46-
margin-bottom: theme.spacing(4);
24+
@include theme.breakpoint("xl") {
25+
column-gap: theme.spacing(40);
4726
}
4827

49-
.message {
50-
@include theme.text("base", "normal");
28+
.intro {
29+
margin-bottom: theme.spacing(6);
30+
31+
.headline {
32+
@include theme.text("3xl", "medium");
33+
34+
color: theme.color("heading");
35+
line-height: 125%;
36+
margin-top: theme.spacing(8);
37+
margin-bottom: theme.spacing(4);
38+
}
39+
40+
.message {
41+
@include theme.text("base", "normal");
5142

52-
color: theme.color("heading");
53-
line-height: 150%;
43+
color: theme.color("heading");
44+
line-height: 150%;
45+
}
5446
}
5547

5648
.tabList {
57-
margin: theme.spacing(12) 0;
49+
margin: theme.spacing(6) 0;
50+
51+
@include theme.breakpoint("md") {
52+
margin: theme.spacing(12) 0;
53+
grid-column: 1;
54+
grid-row: 2;
55+
}
56+
}
57+
58+
.imagePanel {
59+
display: flex;
60+
place-content: center;
61+
62+
@include theme.breakpoint("md") {
63+
grid-row: span 3 / span 3;
64+
grid-column: 2;
65+
}
66+
67+
.darkImage,
68+
.lightImage {
69+
max-height: theme.spacing(80);
70+
71+
@include theme.breakpoint("md") {
72+
max-height: theme.spacing(120);
73+
}
74+
}
75+
76+
.lightImage {
77+
@at-root html[data-theme="dark"] & {
78+
display: none;
79+
}
80+
}
81+
82+
.darkImage {
83+
@at-root html[data-theme="light"] & {
84+
display: none;
85+
}
86+
}
5887
}
5988

6089
.buttons {
6190
display: flex;
6291
flex-flow: row nowrap;
6392
gap: theme.spacing(3);
93+
94+
@include theme.breakpoint("md") {
95+
grid-column: 1;
96+
grid-row: 3;
97+
}
6498
}
6599
}
66100
}
67-
68-
html[data-theme="dark"] .lightImage {
69-
display: none;
70-
}
71-
72-
html[data-theme="light"] .darkImage {
73-
display: none;
74-
}

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

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
activePublishers,
1616
activeFeeds,
1717
} from "../../static-data/stats";
18+
import { Cards } from "../Cards";
1819
import { ChangePercent } from "../ChangePercent";
1920
import { ChartCard } from "../ChartCard";
2021
import { FormattedDate } from "../FormattedDate";
@@ -23,7 +24,7 @@ import { FormattedNumber } from "../FormattedNumber";
2324
export const Overview = () => (
2425
<div className={styles.overview}>
2526
<h1 className={styles.header}>Overview</h1>
26-
<section className={styles.stats}>
27+
<Cards>
2728
<ChartCard
2829
header="Total Volume Traded"
2930
variant="primary"
@@ -104,44 +105,21 @@ export const Overview = () => (
104105
}
105106
stat={activeChains.at(-1)?.chains}
106107
/>
107-
</section>
108+
</Cards>
108109
<Tabs orientation="vertical" className={styles.overviewMainContent ?? ""}>
109-
<section>
110+
<section className={styles.intro}>
110111
<Badge>INSIGHTS</Badge>
111112
<p className={styles.headline}>Get the most from the Pyth Network</p>
112113
<p className={styles.message}>
113114
Insights Hub delivers transparency over the network status and
114-
performance, and maximize productivity while integrating.
115+
performance, and maximizes productivity while integrating.
115116
</p>
116-
<TabList
117-
label="test"
118-
className={styles.tabList ?? ""}
119-
items={[
120-
{
121-
id: "publishers",
122-
header: "Publishers",
123-
body: "Get insights about quality, ranking, and performance of each Publisher contributing to the network.",
124-
},
125-
{
126-
id: "price feeds",
127-
header: "Price Feeds",
128-
body: "See information about every price feed's price, performance, components, and technical aspects all in one place for a better integration experience.",
129-
},
130-
]}
131-
/>
132-
<div className={styles.buttons}>
133-
<Button href="/publishers" variant="solid" size="md">
134-
Publishers
135-
</Button>
136-
<Button href="/price-feeds" variant="outline" size="md">
137-
Price Feeds
138-
</Button>
139-
</div>
140117
</section>
141118
<CrossfadeTabPanels
142119
items={[
143120
{
144121
id: "publishers",
122+
className: styles.imagePanel ?? "",
145123
children: (
146124
<>
147125
<PublishersDark className={styles.darkImage} />
@@ -151,6 +129,7 @@ export const Overview = () => (
151129
},
152130
{
153131
id: "price feeds",
132+
className: styles.imagePanel ?? "",
154133
children: (
155134
<>
156135
<PriceFeedsDark className={styles.darkImage} />
@@ -160,6 +139,30 @@ export const Overview = () => (
160139
},
161140
]}
162141
/>
142+
<TabList
143+
label="test"
144+
className={styles.tabList ?? ""}
145+
items={[
146+
{
147+
id: "publishers",
148+
header: "Publishers",
149+
body: "Get insights about quality, ranking, and performance of each Publisher contributing to the network.",
150+
},
151+
{
152+
id: "price feeds",
153+
header: "Price Feeds",
154+
body: "See information about every price feed's price, performance, components, and technical aspects all in one place for a better integration experience.",
155+
},
156+
]}
157+
/>
158+
<div className={styles.buttons}>
159+
<Button href="/publishers" variant="solid" size="md">
160+
Publishers
161+
</Button>
162+
<Button href="/price-feeds" variant="outline" size="md">
163+
Price Feeds
164+
</Button>
165+
</div>
163166
</Tabs>
164167
</div>
165168
);

0 commit comments

Comments
 (0)