Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd62794a

Browse files
authored
Modern style (#14)
1 parente726c69 commitd62794a

File tree

3 files changed

+129
-35
lines changed

3 files changed

+129
-35
lines changed

‎package.json

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name":"parquet-viewer",
2+
"name":"hyperparam-space",
33
"private":true,
44
"version":"0.1.0",
55
"license":"MIT",
@@ -13,25 +13,25 @@
1313
"test":"vitest run"
1414
},
1515
"dependencies": {
16-
"@huggingface/hub":"1.0.0",
17-
"@hyparam/components":"0.1.13",
18-
"hightable":"0.9.0",
16+
"@huggingface/hub":"1.0.1",
17+
"@hyparam/components":"0.1.18",
18+
"hightable":"0.10.0",
1919
"react":"18.3.1",
2020
"react-dom":"18.3.1"
2121
},
2222
"devDependencies": {
2323
"@types/react":"18.3.18",
2424
"@types/react-dom":"18.3.1",
2525
"@vitejs/plugin-react":"4.3.4",
26-
"@vitest/coverage-v8":"2.1.8",
27-
"eslint":"9.17.0",
28-
"eslint-plugin-react":"7.37.2",
26+
"@vitest/coverage-v8":"3.0.7",
27+
"eslint":"9.21.0",
28+
"eslint-plugin-react":"7.37.4",
2929
"eslint-plugin-react-hooks":"5.1.0",
30-
"eslint-plugin-react-refresh":"0.4.16",
31-
"globals":"15.14.0",
32-
"typescript":"5.7.2",
33-
"typescript-eslint":"8.18.1",
34-
"vite":"5.4.11",
35-
"vitest":"2.1.8"
30+
"eslint-plugin-react-refresh":"0.4.19",
31+
"globals":"16.0.0",
32+
"typescript":"5.7.3",
33+
"typescript-eslint":"8.25.0",
34+
"vite":"6.2.0",
35+
"vitest":"3.0.7"
3636
}
3737
}

‎src/components/Home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
5959
<formonSubmit={onUrlSubmit}style={{display:'flex',gap:'1rem'}}>
6060
<labelhtmlFor="url">URL</label>
6161
<inputname="url"defaultValue="https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet"style={{width:'100%'}}type="url"/>
62-
<buttonstyle={{fontSize:'1rem',padding:'0 0.5rem'}}type="submit">Open</button>
62+
<buttontype="submit">Open</button>
6363
</form>
6464
</section>
6565
</div>

‎src/styles/index.css

Lines changed: 115 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
* {
22
box-sizing: border-box;
3+
font-family:'Mulish','Helvetica Neue', Helvetica, Arial, sans-serif;
34
margin:0;
45
padding:0;
56
}
67

78
#app {
89
display: flex;
9-
font-family:'Mulish','Helvetica Neue', Helvetica, Arial, sans-serif;
1010
flex-direction: column;
1111
height:100vh;
1212
}
1313

1414
/* brand logo */
1515
.brand {
16-
color:#fff;
17-
display: flex;
1816
align-items: center;
19-
filter:drop-shadow(002px#444);
17+
color:#222;
18+
display: flex;
19+
filter:drop-shadow(002px#bbb);
2020
font-family:'Century Gothic','Helvetica Neue', Helvetica, Arial, sans-serif;
2121
font-size:1.1em;
2222
font-weight: bold;
23+
letter-spacing:0.3px;
2324
text-orientation: mixed;
24-
opacity:0.85;
2525
padding:10px12px;
2626
user-select: none;
2727
writing-mode: vertical-rl;
2828
}
2929
.brand:hover {
30-
color:#fff;
31-
filter:drop-shadow(002px#333);
32-
opacity:0.9;
30+
color:#222;
31+
filter:drop-shadow(002px#afa6b9);
3332
text-decoration: none;
3433
}
3534
.brand::before {
@@ -51,7 +50,36 @@ a:hover {
5150
text-decoration: underline;
5251
}
5352
button {
53+
background-color:#111;
54+
color:#eee;
5455
cursor: pointer;
56+
border-radius:12px;
57+
border: none;
58+
font-size:14px;
59+
font-weight:600;
60+
height:32px;
61+
padding:016px;
62+
text-align: center;
63+
}
64+
button:active,
65+
button:focus,
66+
button:hover {
67+
background-color:#333;
68+
}
69+
70+
input {
71+
border:2px solid#ddd;
72+
border-radius:8px;
73+
color:#444;
74+
height:32px;
75+
outline: none;
76+
padding:8px8px8px12px;
77+
transition: border0.3s;
78+
}
79+
input:focus {
80+
border-color:#778;
81+
box-shadow:001px#556;
82+
color:#444;
5583
}
5684

5785
/* layout */
@@ -61,15 +89,42 @@ main {
6189
max-width:100vw;
6290
}
6391

92+
.spinner {
93+
border:6px solid#e8e8e8;
94+
border-top:6px solid#68a;
95+
border-radius:50%;
96+
width:32px;
97+
height:32px;
98+
animation: spin1s linear infinite, fadeIn3s, ease-in-out forwards;
99+
}
100+
@keyframes spin {
101+
0% {transform:rotate(0deg); }
102+
100% {transform:rotate(360deg); }
103+
}
104+
@keyframes fadeIn {
105+
0% {opacity:0; }
106+
100% {opacity:1; }
107+
}
108+
.center {
109+
flex:1;
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
}
114+
64115
/* sidebar */
65116
.nav {
66117
display: flex;
67118
flex-direction: column;
68119
height:100vh;
69120
width:48px;
70-
background-image:linear-gradient(to bottom,#667,#585669);
121+
}
122+
.nav>div {
123+
background-image:linear-gradient(to bottom,#f2f2f2,#e4e4e4);
71124
box-shadow:004pxrgba(10,10,10,0.5);
72125
height:100vh;
126+
width:48px;
127+
z-index:30;
73128
}
74129

75130
/* content area */
@@ -93,19 +148,38 @@ main {
93148
/* top navbar */
94149
.top-header {
95150
align-items: center;
96-
background:linear-gradient(to right,#353540,#24202b);
97-
color:#dde4ea;
98151
display: flex;
152+
font-size:18px;
99153
height:32px;
100154
min-height:32px;
101-
padding-left:8px;
155+
padding:010px020px;
102156
}
103157
.top-headerh1 {
104158
font-size:18px;
105-
margin:0;
159+
margin:4px000;/* top */
160+
user-select: none;
161+
}
162+
163+
.top-header-divided {
164+
border-bottom:1px solid#ddd;
165+
background:#eee;
166+
}
167+
168+
.top-actions {
169+
margin-left: auto;
170+
}
171+
172+
/* search */
173+
.top-headerinput {
174+
border:1px solid transparent;
175+
border-radius:8px;
176+
font-size:12px;
177+
flex-shrink:1;
178+
height:24px;
179+
min-width:0;
106180
}
107-
.top-headera {
108-
color:#e0e8ee;
181+
.top-headerinput:focus {
182+
border:1px solid#778;
109183
}
110184

111185
/* file path */
@@ -133,9 +207,10 @@ main {
133207
opacity:1;
134208
}
135209
.patha {
136-
color:#f0f8ff;
210+
color:#222622;
137211
font-family:'Courier New', Courier, monospace;
138212
font-size:18px;
213+
font-weight:600;
139214
transform:translateY(1px);
140215
/* ^ the monospace font slightly translates to the top, moving it by 1px better aligns with the icons */
141216
text-overflow: ellipsis;
@@ -243,11 +318,13 @@ main {
243318
max-height:0;
244319
padding:0;
245320
background-color:#dd111199;
246-
font-family: monospace;
247321
overflow-y: auto;
248322
transition: max-height0.3s;
249323
white-space: pre-wrap;
250324
}
325+
.error-bar* {
326+
font-family: monospace;
327+
}
251328
.show-error {
252329
max-height:30%;
253330
padding:10px;
@@ -310,7 +387,7 @@ main {
310387
border-top:1px solid#bbb;
311388
color:#444;
312389
display: flex;
313-
padding:8px12px;
390+
padding:8px16px8px20px;
314391
text-decoration: none;
315392
}
316393
.file-lista:hover {
@@ -359,7 +436,7 @@ main {
359436
}
360437
.view-header {
361438
align-items: center;
362-
background-color:#ccc;
439+
background-color:#f2f2f2;
363440
color:#444;
364441
display: flex;
365442
gap:16px;
@@ -428,6 +505,21 @@ main {
428505
margin-top:16px;
429506
}
430507

508+
/* table overrides */
509+
.table-container .table-corner {
510+
background:url('https://hyperparam.app/assets/table/space.svg')#f9f4ff no-repeat center6px;
511+
}
512+
main .table-container .tableth {
513+
background-color:#f1f1f3;
514+
}
515+
main .tabletd {
516+
cursor: pointer;
517+
}
518+
main .tabletbodytr:hoverth:first-child {
519+
background-color:#ccd;
520+
border-right:1px solid#ccc;
521+
}
522+
431523
.slideContainer {
432524
display: flex;
433525
flex:1;
@@ -472,16 +564,18 @@ main {
472564
.slideClose:hover {
473565
background: none;
474566
border: none;
475-
color: inherit;
567+
color:#888;
568+
font-size:16px;
476569
height:24px;
477570
margin-right: auto;
478571
outline: none;
572+
transition: color0.3s;
479573
}
480574
.slideClose::before {
481575
content:"\27E9\27E9";
482576
}
483577
.slideClose:hover {
484-
font-weight: bold;
578+
color:#000;
485579
}
486580

487581
/* viewers */

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp