diff --git a/ggsql-wasm/demo/build.mjs b/ggsql-wasm/demo/build.mjs index 3fada56f..8b4cc8c2 100644 --- a/ggsql-wasm/demo/build.mjs +++ b/ggsql-wasm/demo/build.mjs @@ -12,7 +12,7 @@ mkdirSync(distDir, { recursive: true }); // Copy static files console.log("Copying static files..."); -copyFileSync(join(__dirname, "src/index.html"), join(distDir, "index.html")); +copyFileSync(join(__dirname, "src/index.qmd"), join(distDir, "index.qmd")); copyFileSync( join(__dirname, "../pkg/ggsql_wasm_bg.wasm"), join(distDir, "ggsql_wasm_bg.wasm"), diff --git a/ggsql-wasm/demo/src/index.html b/ggsql-wasm/demo/src/index.html deleted file mode 100644 index 2aa62f85..00000000 --- a/ggsql-wasm/demo/src/index.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - ggsql playground - - - - - - - -
- - -
- -
- - - -
-
-
-
-
-

Problems

-
-
-
- - - - diff --git a/ggsql-wasm/demo/src/index.qmd b/ggsql-wasm/demo/src/index.qmd new file mode 100644 index 00000000..c72d8850 --- /dev/null +++ b/ggsql-wasm/demo/src/index.qmd @@ -0,0 +1,50 @@ +--- +pagetitle: "ggsql Playground" +page-layout: custom +section-divs: false +toc: false +lightbox: false +repo-actions: false +include-in-header: + - text: | + + +include-after-body: + - text: | + +--- + +```{=html} +
+
+ +
+ +
+
+
+
+
+

Problems

+
+
+
+``` diff --git a/ggsql-wasm/demo/src/styles.css b/ggsql-wasm/demo/src/styles.css index 7ba5de28..b1567282 100644 --- a/ggsql-wasm/demo/src/styles.css +++ b/ggsql-wasm/demo/src/styles.css @@ -16,26 +16,16 @@ body { #app { display: grid; grid-template-columns: 200px 1fr 1fr; - grid-template-rows: 40px 1fr 150px; + grid-template-rows: 1fr 150px; height: 100vh; gap: 1px; - background: #94D2BD; -} - -#header { - grid-column: 1 / -1; - background: #DEF1EB; - padding: 0 16px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #94D2BD; + background: #005F73; + border-top: 2px solid #005F73; + padding-top: 0; } -#header h1 { - font-size: 14px; - font-weight: 700; - color: #005F73; +#app h3 { + margin-top: 0; } #status { @@ -60,7 +50,7 @@ body { } #sidebar { - grid-row: 2 / 4; + grid-row: 1 / 3; background: #DEF1EB; border-right: 1px solid #94D2BD; overflow-y: auto; @@ -284,17 +274,13 @@ body { @media (max-width: 1024px) { #app { grid-template-columns: 1fr; - grid-template-rows: 40px auto 1fr 1fr 100px; - } - - #header { - grid-row: 1; + grid-template-rows: auto 1fr 1fr 100px; } #mobile-toolbar { display: flex; align-items: center; - grid-row: 2; + grid-row: 1; grid-column: 1; background: #DEF1EB; padding: 6px 16px; @@ -317,17 +303,17 @@ body { } #viz-container { - grid-row: 3; + grid-row: 2; grid-column: 1; } #editor-container { - grid-row: 4; + grid-row: 3; grid-column: 1; } #error-panel { - grid-row: 5; + grid-row: 4; grid-column: 1; } }