Skip to content

Commit 1b37261

Browse files
SamuelAsherRivelloSamuelAsherRivello
committed
Add chart to each token row
1 parent 4475c4b commit 1b37261

22 files changed

Lines changed: 369 additions & 204 deletions

‎Cargo.lock‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/desktop/assets/tailwind.css‎

Lines changed: 0 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,6 @@
167167
.absolute {
168168
position: absolute;
169169
}
170-
.fixed {
171-
position: fixed;
172-
}
173170
.relative {
174171
position: relative;
175172
}
@@ -206,24 +203,12 @@
206203
.contents {
207204
display: contents;
208205
}
209-
.inline {
210-
display: inline;
211-
}
212206
.table {
213207
display: table;
214208
}
215-
.shrink {
216-
flex-shrink: 1;
217-
}
218-
.grow {
219-
flex-grow: 1;
220-
}
221209
.transform {
222210
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
223211
}
224-
.resize {
225-
resize: both;
226-
}
227212
.truncate {
228213
overflow: hidden;
229214
text-overflow: ellipsis;
@@ -248,9 +233,6 @@
248233
.uppercase {
249234
text-transform: uppercase;
250235
}
251-
.filter {
252-
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
253-
}
254236
.select-none {
255237
-webkit-user-select: none;
256238
user-select: none;
@@ -280,59 +262,6 @@
280262
syntax: "*";
281263
inherits: false;
282264
}
283-
@property --tw-blur {
284-
syntax: "*";
285-
inherits: false;
286-
}
287-
@property --tw-brightness {
288-
syntax: "*";
289-
inherits: false;
290-
}
291-
@property --tw-contrast {
292-
syntax: "*";
293-
inherits: false;
294-
}
295-
@property --tw-grayscale {
296-
syntax: "*";
297-
inherits: false;
298-
}
299-
@property --tw-hue-rotate {
300-
syntax: "*";
301-
inherits: false;
302-
}
303-
@property --tw-invert {
304-
syntax: "*";
305-
inherits: false;
306-
}
307-
@property --tw-opacity {
308-
syntax: "*";
309-
inherits: false;
310-
}
311-
@property --tw-saturate {
312-
syntax: "*";
313-
inherits: false;
314-
}
315-
@property --tw-sepia {
316-
syntax: "*";
317-
inherits: false;
318-
}
319-
@property --tw-drop-shadow {
320-
syntax: "*";
321-
inherits: false;
322-
}
323-
@property --tw-drop-shadow-color {
324-
syntax: "*";
325-
inherits: false;
326-
}
327-
@property --tw-drop-shadow-alpha {
328-
syntax: "<percentage>";
329-
inherits: false;
330-
initial-value: 100%;
331-
}
332-
@property --tw-drop-shadow-size {
333-
syntax: "*";
334-
inherits: false;
335-
}
336265
@layer properties {
337266
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
338267
*, ::before, ::after, ::backdrop {
@@ -342,19 +271,6 @@
342271
--tw-skew-x: initial;
343272
--tw-skew-y: initial;
344273
--tw-leading: initial;
345-
--tw-blur: initial;
346-
--tw-brightness: initial;
347-
--tw-contrast: initial;
348-
--tw-grayscale: initial;
349-
--tw-hue-rotate: initial;
350-
--tw-invert: initial;
351-
--tw-opacity: initial;
352-
--tw-saturate: initial;
353-
--tw-sepia: initial;
354-
--tw-drop-shadow: initial;
355-
--tw-drop-shadow-color: initial;
356-
--tw-drop-shadow-alpha: 100%;
357-
--tw-drop-shadow-size: initial;
358274
}
359275
}
360276
}

‎packages/ui/Cargo.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ edition = "2021"
55

66
[dependencies]
77
dioxus = { workspace = true, features = ["router"] }
8+
dioxus-charts = "0.4"
89
reqwest = { version = "0.12", features = ["json"] }
910
serde = { version = "1", features = ["derive"] }
1011
serde_json = "1"

‎packages/ui/assets/i18n/en-US.ftl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
nav-home = Home
2+
nav-video = Video
23
nav-about = About
34
nav-contact = Contact
45
@@ -44,6 +45,7 @@ not-available = N/A
4445
token-header-asset = Asset
4546
token-header-price = Price
4647
token-header-change = 24h
48+
token-header-seven-day = 7D
4749
token-header-market-cap = Market cap
4850
token-header-volume = Volume
4951
token-logo-alt = {$name} logo

‎packages/ui/assets/i18n/es-MX.ftl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
nav-home = Inicio
2+
nav-video = Video
23
nav-about = Acerca de
34
nav-contact = Contacto
45
@@ -44,6 +45,7 @@ not-available = N/D
4445
token-header-asset = Activo
4546
token-header-price = Precio
4647
token-header-change = 24h
48+
token-header-seven-day = 7D
4749
token-header-market-cap = Cap. de mercado
4850
token-header-volume = Volumen
4951
token-logo-alt = Logo de {$name}

‎packages/ui/assets/i18n/fr-FR.ftl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
nav-home = Accueil
2+
nav-video = Video
23
nav-about = A propos
34
nav-contact = Contact
45
@@ -38,6 +39,7 @@ not-available = N/D
3839
token-header-asset = Actif
3940
token-header-price = Prix
4041
token-header-change = 24h
42+
token-header-seven-day = 7D
4143
token-header-market-cap = Cap. marche
4244
token-header-volume = Volume
4345
token-logo-alt = Logo de {$name}

‎packages/ui/assets/i18n/pt-BR.ftl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
nav-home = Inicio
2+
nav-video = Video
23
nav-about = Sobre
34
nav-contact = Contato
45
@@ -44,6 +45,7 @@ not-available = N/D
4445
token-header-asset = Ativo
4546
token-header-price = Preco
4647
token-header-change = 24h
48+
token-header-seven-day = 7D
4749
token-header-market-cap = Valor de mercado
4850
token-header-volume = Volume
4951
token-logo-alt = Logo de {$name}

‎packages/ui/assets/styling/about.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,18 @@
102102
object-fit: contain;
103103
}
104104

105+
.app-shell--light .about-feature__image--rust {
106+
filter:
107+
drop-shadow(1px 0 0 rgba(255, 255, 255, 0.095))
108+
drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.095))
109+
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.095))
110+
drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.095))
111+
drop-shadow(2px 0 0 rgba(255, 255, 255, 0.07))
112+
drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.07))
113+
drop-shadow(0 2px 0 rgba(255, 255, 255, 0.07))
114+
drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.07));
115+
}
116+
105117
.app-shell--dark .about-feature__image--rust,
106118
.app-shell--dark .about-dioxus__image {
107119
filter:

‎packages/ui/assets/styling/token_list.css‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@
103103
.token-list__header,
104104
.token-list-item {
105105
display: grid;
106-
grid-template-columns: minmax(260px, 2.2fr) minmax(117px, 1.2fr) minmax(65px, 0.9fr) minmax(130px, 1.3fr) minmax(130px, 1.3fr);
106+
grid-template-columns: minmax(260px, 2.2fr) minmax(117px, 1.2fr) minmax(65px, 0.9fr) minmax(130px, 1.3fr) minmax(130px, 1.3fr) minmax(104px, 1fr);
107107
gap: 10px;
108108
align-items: center;
109-
min-width: 962px;
109+
min-width: 1076px;
110110
}
111111

112112
.token-list__header {
@@ -225,6 +225,48 @@
225225
font-weight: 800;
226226
}
227227

228+
.token-sparkline {
229+
display: flex;
230+
align-items: center;
231+
justify-content: flex-start;
232+
min-width: 0;
233+
}
234+
235+
.token-sparkline__chart {
236+
display: block;
237+
width: 92px;
238+
height: 30px;
239+
overflow: visible;
240+
}
241+
242+
.token-sparkline__path {
243+
stroke: currentColor;
244+
}
245+
246+
.token-sparkline--up {
247+
color: var(--app-positive);
248+
}
249+
250+
.token-sparkline--down {
251+
color: var(--app-negative);
252+
}
253+
254+
.token-sparkline__label,
255+
.token-sparkline__empty {
256+
min-width: 0;
257+
overflow: hidden;
258+
text-overflow: ellipsis;
259+
color: currentColor;
260+
font-size: 12px;
261+
font-variant-numeric: tabular-nums;
262+
font-weight: 800;
263+
white-space: nowrap;
264+
}
265+
266+
.token-sparkline__empty {
267+
color: var(--app-text-subtle);
268+
}
269+
228270
.token-state {
229271
margin-bottom: 14px;
230272
padding: 14px 16px;
@@ -274,9 +316,9 @@
274316

275317
.token-list__header,
276318
.token-list-item {
277-
grid-template-columns: minmax(182px, 1.56fr) minmax(91px, 1.04fr) minmax(59px, 0.78fr) minmax(104px, 1.3fr) minmax(104px, 1.3fr);
319+
grid-template-columns: minmax(182px, 1.56fr) minmax(91px, 1.04fr) minmax(59px, 0.78fr) minmax(104px, 1.3fr) minmax(104px, 1.3fr) minmax(84px, 0.94fr);
278320
gap: 8px;
279-
min-width: 670px;
321+
min-width: 800px;
280322
padding: 10px 10px;
281323
}
282324

@@ -301,4 +343,18 @@
301343
width: 28px;
302344
height: 28px;
303345
}
346+
347+
.token-sparkline {
348+
justify-content: flex-start;
349+
}
350+
351+
.token-sparkline__chart {
352+
width: 76px;
353+
height: 24px;
354+
}
355+
356+
.token-sparkline__label,
357+
.token-sparkline__empty {
358+
font-size: 11px;
359+
}
304360
}

‎packages/ui/assets/styling/video.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.video-page {
2+
width: min(1120px, calc(100% - 40px));
3+
margin: 0 auto;
4+
padding: 24px 0 56px;
5+
}
6+
7+
.video-page__frame {
8+
aspect-ratio: 16 / 9;
9+
width: 100%;
10+
overflow: hidden;
11+
border: 1px solid var(--app-border);
12+
border-radius: 8px;
13+
background: var(--app-surface);
14+
box-shadow: var(--app-shadow);
15+
}
16+
17+
.video-page__embed {
18+
display: block;
19+
width: 100%;
20+
height: 100%;
21+
border: 0;
22+
}
23+
24+
@media (max-width: 760px) {
25+
.video-page {
26+
width: min(100% - 28px, 1120px);
27+
padding: 24px 0 42px;
28+
}
29+
}

0 commit comments

Comments
 (0)