Skip to content

Commit afa55a4

Browse files
platypiiplatypii
committed
Fix styles
1 parent fc37c8b commit afa55a4

File tree

7 files changed

+118
-83
lines changed

7 files changed

+118
-83
lines changed

‎hightable/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
</head>
1010
<body>
1111
<nav class="sidebar">
12-
<a class="brand" href='https://hyparam.github.io/demos/hightable/'>
13-
HighTable
14-
</a>
12+
<div>
13+
<a class="brand" href='https://hyparam.github.io/demos/hightable/'>
14+
HighTable
15+
</a>
16+
</div>
1517
</nav>
1618
<div id="app"></div>
1719
<script type="module" src="/src/main.tsx"></script>

‎hightable/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
},
2222
"devDependencies": {
2323
"@types/react": "18.3.18",
24-
"@types/react-dom": "18.3.1",
24+
"@types/react-dom": "18.3.5",
2525
"@vitejs/plugin-react": "4.3.4",
26-
"@vitest/coverage-v8": "3.0.6",
26+
"@vitest/coverage-v8": "3.0.7",
2727
"eslint": "9.21.0",
2828
"eslint-plugin-react": "7.37.4",
2929
"eslint-plugin-react-hooks": "5.1.0",
3030
"eslint-plugin-react-refresh": "0.4.19",
3131
"typescript": "5.7.3",
32-
"typescript-eslint": "8.24.1",
33-
"vite": "6.1.1",
34-
"vitest": "3.0.6"
32+
"typescript-eslint": "8.25.0",
33+
"vite": "6.2.0",
34+
"vitest": "3.0.7"
3535
}
3636
}

‎hightable/src/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { NavLink } from 'react-router'
44
export default function Layout({ children }: { children: ReactNode }) {
55
return <div className="layout">
66
<nav className="topbar">
7-
<span className="title">HighTable demos</span>
7+
<span className="title">HighTable Demos</span>
88
{/* NavLink makes it easy to show active states */}
99
{
1010
[

‎hightable/src/index.css‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,42 @@ body {
88
display: flex;
99
}
1010

11+
button {
12+
background-color: transparent;
13+
border: 1px solid #666;
14+
color: #222;
15+
border-radius: 8px;
16+
padding: 0 8px;
17+
cursor: pointer;
18+
outline: none;
19+
transition: background-color 0.2s ease-in-out;
20+
}
21+
button:active,
22+
button:focus,
23+
button:hover {
24+
background-color: #eee;
25+
}
26+
1127
/* sidebar */
1228
nav.sidebar {
1329
height: 100vh;
1430
width: 48px;
31+
height: 100vh;
32+
}
33+
nav.sidebar > div {
1534
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
1635
box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
1736
height: 100vh;
37+
position: absolute;
38+
width: 48px;
39+
z-index: 30;
1840
}
19-
2041
/* brand logo */
2142
.brand {
2243
align-items: center;
2344
color: #111;
2445
display: flex;
25-
filter: drop-shadow(0 0 2px #666);
46+
filter: drop-shadow(0 0 2px #bbb);
2647
font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2748
font-size: 1.1em;
2849
font-weight: bold;
@@ -35,7 +56,7 @@ nav.sidebar {
3556
}
3657
.brand:hover {
3758
color: #111;
38-
filter: drop-shadow(0 0 2px #444);
59+
filter: drop-shadow(0 0 2px #afa6b9);
3960
opacity: 1;
4061
text-decoration: none;
4162
}
@@ -60,6 +81,7 @@ nav.sidebar {
6081
flex-direction: column;
6182
}
6283

84+
/* Top bar */
6385
.topbar {
6486
background-color: #fff;
6587
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
@@ -75,14 +97,23 @@ nav.sidebar {
7597
.topbar .title {
7698
color: #444;
7799
font-weight: bold;
100+
margin-right: 10px;
78101
}
79102
.topbar .link {
80103
color: #888;
81104
cursor: pointer;
105+
text-decoration: none;
106+
transition: color 0.2s ease-in-out;
107+
}
108+
.topbar .link:active,
109+
.topbar .link:focus,
110+
.topbar .link:hover {
111+
color: #556;
82112
}
113+
83114
.topbar .link.active {
84-
color: #706fb1;
85-
font-weight: bold;
115+
color: #556;
116+
text-decoration: underline;
86117
}
87118

88119
.content {
@@ -98,5 +129,6 @@ nav.sidebar {
98129
}
99130

100131
.table-corner {
132+
align-items: center;
101133
background: url('https://hyperparam.app/assets/table/hightable.svg') #f9f4ff no-repeat center 6px;
102134
}

‎hyparquet/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
},
2424
"devDependencies": {
2525
"@types/react": "18.3.18",
26-
"@types/react-dom": "18.3.1",
26+
"@types/react-dom": "18.3.5",
2727
"@vitejs/plugin-react": "4.3.4",
28-
"@vitest/coverage-v8": "3.0.6",
28+
"@vitest/coverage-v8": "3.0.7",
2929
"eslint": "9.21.0",
3030
"eslint-plugin-react": "7.37.4",
3131
"eslint-plugin-react-hooks": "5.1.0",
3232
"eslint-plugin-react-refresh": "0.4.19",
3333
"typescript": "5.7.3",
34-
"typescript-eslint": "8.24.1",
35-
"vite": "6.1.1",
36-
"vitest": "3.0.6"
34+
"typescript-eslint": "8.25.0",
35+
"vite": "6.2.0",
36+
"vitest": "3.0.7"
3737
}
3838
}

‎hyparquet/src/Welcome.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,55 @@ export default function Welcome(): ReactNode {
1212
}
1313

1414
return <div id="welcome">
15-
<h1>hyparquet</h1>
16-
<sub>/haɪ pɑːrˈkeɪ/<img src={audioSvg} alt="play hyparquet pronunciation" height="18" width="18" onClick={playAudio} /></sub>
17-
<audio ref={audio} id="audio" src={hyparquetMp3}></audio>
18-
<h2>in-browser parquet file reader</h2>
19-
<p>
20-
<a href="https://www.npmjs.com/package/hyparquet"><img src="https://img.shields.io/npm/v/hyparquet" alt="npm hyparquet" /></a>
21-
<a href="https://github.com/hyparam/hyparquet"><img src="https://img.shields.io/github/stars/hyparam/hyparquet?style=social" alt="star hyparquet" /></a>
22-
</p>
23-
<p>
24-
Online demo of <a href="https://github.com/hyparam/hyparquet">hyparquet</a>: a parser for apache parquet files.
25-
Uses <a href="https://github.com/hyparam/hightable">hightable</a> for high performance windowed table viewing.
26-
</p>
27-
<p>
28-
Drag and drop a parquet file (or url) to see your parquet data. 👀
29-
</p>
30-
<p>
31-
Example files:
32-
</p>
33-
<ul className="quick-links">
34-
<li>
35-
<a
36-
className="aws"
37-
href="?key=https://hyperparam-public.s3.amazonaws.com/wiki-en-00000-of-00041.parquet">
38-
s3://wiki-en-00000-of-00041.parquet
39-
</a>
40-
</li>
41-
<li>
42-
<a
43-
className="azure"
44-
href="?key=https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet">
45-
azure://starcoderdata-js-00000-of-00065.parquet
46-
</a>
47-
</li>
48-
<li>
49-
<a
50-
className="huggingface"
51-
href="?key=https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet?download=true">
52-
huggingface://github-code-00000-of-01126.parquet
53-
</a>
54-
</li>
55-
<li>
56-
<a
57-
className="github"
58-
href="?key=https://raw.githubusercontent.com/hyparam/hyparquet/master/test/files/rowgroups.parquet">
59-
github://rowgroups.parquet
60-
</a>
61-
</li>
62-
</ul>
15+
<div>
16+
<h1>hyparquet</h1>
17+
<sub>/haɪ pɑːrˈkeɪ/<img src={audioSvg} alt="play hyparquet pronunciation" height="18" width="18" onClick={playAudio} /></sub>
18+
<audio ref={audio} id="audio" src={hyparquetMp3}></audio>
19+
<h2>in-browser parquet file reader</h2>
20+
<p>
21+
<a href="https://www.npmjs.com/package/hyparquet"><img src="https://img.shields.io/npm/v/hyparquet" alt="npm hyparquet" /></a>
22+
<a href="https://github.com/hyparam/hyparquet"><img src="https://img.shields.io/github/stars/hyparam/hyparquet?style=social" alt="star hyparquet" /></a>
23+
</p>
24+
<p>
25+
Online demo of <a href="https://github.com/hyparam/hyparquet">hyparquet</a>: a parser for apache parquet files.
26+
Uses <a href="https://github.com/hyparam/hightable">hightable</a> for high performance windowed table viewing.
27+
</p>
28+
<p>
29+
Drag and drop a parquet file (or url) to see your parquet data. 👀
30+
</p>
31+
<p>
32+
Example files:
33+
</p>
34+
<ul className="quick-links">
35+
<li>
36+
<a
37+
className="aws"
38+
href="?key=https://hyperparam-public.s3.amazonaws.com/wiki-en-00000-of-00041.parquet">
39+
s3://wiki-en-00000-of-00041.parquet
40+
</a>
41+
</li>
42+
<li>
43+
<a
44+
className="azure"
45+
href="?key=https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet">
46+
azure://starcoderdata-js-00000-of-00065.parquet
47+
</a>
48+
</li>
49+
<li>
50+
<a
51+
className="huggingface"
52+
href="?key=https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet?download=true">
53+
huggingface://github-code-00000-of-01126.parquet
54+
</a>
55+
</li>
56+
<li>
57+
<a
58+
className="github"
59+
href="?key=https://raw.githubusercontent.com/hyparam/hyparquet/master/test/files/rowgroups.parquet">
60+
github://rowgroups.parquet
61+
</a>
62+
</li>
63+
</ul>
64+
</div>
6365
</div>
6466
}

‎hyparquet/src/index.css‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,11 @@ nav.sidebar > div {
9595
align-items: center;
9696
color: #111;
9797
display: flex;
98-
filter: drop-shadow(0 0 2px #666);
98+
filter: drop-shadow(0 0 2px #bbb);
9999
font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
100100
font-size: 1.1em;
101101
font-weight: bold;
102+
letter-spacing: 0.3px;
102103
opacity: 0.9;
103104
padding: 10px 12px;
104105
text-decoration: none;
@@ -108,7 +109,7 @@ nav.sidebar > div {
108109
}
109110
.brand:hover {
110111
color: #111;
111-
filter: drop-shadow(0 0 2px #444);
112+
filter: drop-shadow(0 0 2px #afa6b9);
112113
opacity: 1;
113114
text-decoration: none;
114115
}
@@ -252,10 +253,12 @@ button.close-button:hover {
252253
.dropdown-button:active,
253254
.dropdown-button:focus,
254255
.dropdown-button:hover {
256+
align-items: center;
255257
background: transparent;
256258
border: none;
257259
color: inherit;
258260
cursor: pointer;
261+
display: flex;
259262
font-size: inherit;
260263
height: 24px;
261264
max-width: 300px;
@@ -311,23 +314,19 @@ button.close-button:hover {
311314

312315
/* welcome */
313316
#welcome {
314-
position: absolute;
315-
bottom: 0;
316-
top: 0;
317-
right: 0;
318-
left: 0;
319-
border: 2px #777;
320-
border-radius: 10px;
321-
color: #444;
322-
margin: 10px;
323-
padding: 10px;
324317
display: flex;
325318
flex-direction: column;
326-
flex: 1;
327319
font-size: 20px;
328-
justify-content: center;
320+
height: 100vh;
329321
max-width: 640px;
330322
margin: 0 auto;
323+
padding: 10px;
324+
overflow-y: auto;
325+
}
326+
#welcome > div {
327+
display: flex;
328+
flex-direction: column;
329+
margin: auto 0;
331330
}
332331
/* quick link buttons */
333332
.quick-links {
@@ -345,7 +344,7 @@ button.close-button:hover {
345344
background-position: 10px center;
346345
background-size: 18px;
347346
border: 1px solid #444;
348-
border-radius: 4px;
347+
border-radius: 8px;
349348
font-size: 8pt;
350349
overflow: hidden;
351350
padding: 12px;
@@ -355,7 +354,7 @@ button.close-button:hover {
355354
width: 100%;
356355
}
357356
.quick-links a:hover {
358-
background-color: #cec;
357+
background-color: #ddf8dd;
359358
}
360359
.huggingface {
361360
background: url('assets/huggingface.svg') no-repeat 8px center;

0 commit comments

Comments
 (0)