Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

duckdb-wasm-app: Scope some logic out of React into HTML/CSS #1320

Merged
merged 1 commit into from
Dec 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/duckdb-wasm-app/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,13 @@ root.render(
<Route
index
element={
<NavBarContainer>
<Shell padding={[16, 0, 0, 20]} backgroundColor="#333" />
</NavBarContainer>
}
/>
<Route
path="/versus"
element={
<NavBarContainer>
<Versus />
</NavBarContainer>
}
/>
<Route path="*" element={<Navigate to="/" />} />
Expand Down
161 changes: 161 additions & 0 deletions packages/duckdb-wasm-app/static/css/navbar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#root {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.root_div {
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
}
@media only screen and (min-width: 600px) {
.level1 {
position: relative;
display: grid;
grid-template-rows: 100%;
grid-template-columns: var(--nav_bar_width) calc(100% - var(--nav_bar_width));
}
.level2 {
background-color: var(--nav_bar_bg);
color: rgb(255, 255, 255);
line-height: 24px;
text-align: center;
display: grid;
grid-template-rows: 56px auto;
grid-template-columns: 100%;
}
.submenu {
display: grid;
grid-template-rows: repeat(5, 48px);
grid-template-columns: 100%;
}
}
@media only screen and (max-width: 600px) {
.level1 {
position: relative;
display: grid;
grid-template-rows: var(--nav_bar_width) calc(100% - var(--nav_bar_width));
grid-template-columns: 100%;
}
.level2 {
background-color: var(--nav_bar_bg);
color: rgb(255, 255, 255);
line-height: 24px;
text-align: center;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 64px auto;
justify-items: right;
}
.submenu {
display: grid;
grid-template-columns: 28px repeat(4, 56px) 28px;
grid-template-rows: 100%;
}
}
.submenu_item {
position: relative;
font-weight: 400;
background-color: var(--nav_tab_bg);
color: var(--nav_tab_fg);
text-decoration: none;
box-sizing: border-box;
}
.submenu_item > a {
width: 100%;
height: 100%;
display: grid;
text-decoration: none;
vertical-align: middle;
}
.submenu_item > a svg {
justify-self: center;
align-self: center;
color: white;
}
.submenu_item > a > div {
color: white;
display: grid;
justify-content: center;
align-items: center;
}
.submenu_item:hover, .ducklogo:hover {
background-color: var(--nav_tab_bg_active);
color: var(--nav_tab_fg_active);
}
/* -------------------------------------------------------------------- */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 299;
src: url(../../static/assets/Nunito-Light.544d04c96d939f25984c.ttf) format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 399;
src: url(../../static/assets/Nunito-Regular.8b2f37e93bedfaa2976.ttf) format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 499;
src: url(../../static/assets/Nunito-SemiBold.ttf) format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 699;
src: url(../../static/assets/Nunito-Bold.4b67d635abb53cc261c5.ttf) format('truetype');
}
/* -------------------------------------------------------------------- */
:root {
--border_radius: -1px;
--border_color: rgb(219, 220, 220);
--nav_bar_bg: rgb(29, 30, 30);
--nav_bar_button_height: 47px;
--nav_bar_button_margin: 3px 8px;
--nav_bar_width: 63px;
--nav_logo_height: 55px;
--nav_tab_bg: transparent;
--nav_tab_bg_active: rgb(19, 20, 20);
--nav_tab_fg: rgb(254, 255, 255);
--nav_tab_fg_active: rgb(254, 255, 255);
--card_border_color: rgb(199, 200, 200);
--card_header_bg: hsl(209deg 12% 96%);
--card_header_border: 0px solid rgb(215, 215, 215);
font-family: 'Nunito';
}
.xterm .xterm-viewport {
background-color: transparent;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
scrollbar-color: white #333;
scrollbar-width: thin;
}
.xterm-viewport::-webkit-scrollbar {
background-color: #333;
width: 5px;
}
.xterm-viewport::-webkit-scrollbar-thumb {
background: white;
}
67 changes: 43 additions & 24 deletions packages/duckdb-wasm-app/static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,60 @@
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />

<link rel="apple-touch-icon" href="static/favicons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="static/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="static/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="static/favicons/favicon-16x16.png" />
<link rel="manifest" href="static/favicons/site.webmanifest" />
<link rel="mask-icon" href="static/favicons/safari-pinned-tab.svg" c />
<link rel="mask-icon" href="static/favicons/safari-pinned-tab.svg" c="" />
<link rel="shortcut icon" href="static/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-title" content="DuckDB Shell" />
<meta name="msapplication-config" coontent="static/favicons/browserconfig.xml" />
<meta property="og:image" content="static/favicons/sharingduckdb.jpg" />

<title>DuckDB Shell</title>
<style>
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#root {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link href="static/css/navbar.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<div>
<div class="level1" style="height:100%">
<div class="level2">
<a href="https://duckdb.org" style="display: grid; height:auto; width:100%;" title="Go to DuckDB Website">
<div class="ducklogo" style="width:64px; height:64px; display: grid; align-items:center; justify-content:center; color: rgb(255, 240, 0);"><img src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm/dist/img/duckdb.svg" style="width:32px;"></div>
</a>
<div class="submenu">
<div></div>
<div class="submenu_item current">
<a href="/" title="Restart shell">
<div>
<svg width="18px" height="18px">
<use xlink:href="static/img/shell.svg#sym"></use>
</svg>
</div>
</a>
</div>
<div class="submenu_item">
<a href="/docs/" title="Read the Documentation">
<div>
<svg width="18px" height="18px">
<use xlink:href="static/img/book.svg#sym"></use>
</svg>
</div>
</a>
</div>
<div class="submenu_item">
<a href="https://github.com/duckdb/duckdb-wasm" target="blank" title="Check GitHub Repo">
<div><img src="static/img/github.svg" width="18px" height="18px" style="filter:invert(1)"></div>
</a>
</div>
<div class="submenu_item">
<a href="https://discord.duckdb.org" target="blank" title="Join DuckDB's Discord">
<div><img src="static/img/discord.svg" width="18px" height="18px" style="filter:invert(1)"></div>
</a>
</div>
</div>
</div>
<div id="root"></div>
</div>
</div>
</body>
</html>
1 change: 1 addition & 0 deletions packages/duckdb-wasm-app/static/svg/icons/discord.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/duckdb-wasm-app/static/svg/icons/github.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions packages/duckdb-wasm-app/webpack.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,14 @@ export function configure(params) {
from: './static/favicons',
to: './static/favicons',
},
{
from: './static/svg/icons',
to: './static/img',
},
{
from: './static/css',
to: './static/css',
},
{
from: '../duckdb-wasm/docs',
to: './docs',
Expand Down