Skip to content

Commit fe5052e

Browse files
georgestagggeorgestagg
committed
Tweak demo website style
1 parent 38c0c82 commit fe5052e

3 files changed

Lines changed: 369 additions & 294 deletions

File tree

‎ggsql-wasm/demo/src/index.html‎

Lines changed: 6 additions & 294 deletions
Original file line numberDiff line numberDiff line change
@@ -11,301 +11,7 @@
1111
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@400;600;700&display=swap"
1212
rel="stylesheet"
1313
/>
14-
<style>
15-
* {
16-
margin: 0;
17-
padding: 0;
18-
box-sizing: border-box;
19-
}
2014

21-
body {
22-
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,
23-
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
24-
height: 100vh;
25-
overflow: hidden;
26-
background: #F9F9F9;
27-
color: #001219;
28-
}
29-
30-
#app {
31-
display: grid;
32-
grid-template-columns: 200px 1fr 1fr;
33-
grid-template-rows: 40px 1fr 150px;
34-
height: 100vh;
35-
gap: 1px;
36-
background: #94D2BD;
37-
}
38-
39-
#header {
40-
grid-column: 1 / -1;
41-
background: #DEF1EB;
42-
padding: 0 16px;
43-
display: flex;
44-
align-items: center;
45-
justify-content: space-between;
46-
border-bottom: 1px solid #94D2BD;
47-
}
48-
49-
#header h1 {
50-
font-size: 14px;
51-
font-weight: 700;
52-
color: #005F73;
53-
}
54-
55-
#status {
56-
font-size: 12px;
57-
padding: 3px 10px;
58-
border-radius: 3px;
59-
background: #F9F9F9;
60-
color: #005F73;
61-
}
62-
63-
#status.loading {
64-
background: #E9D8A6;
65-
color: #001219;
66-
}
67-
#status.success {
68-
background: #94D2BD;
69-
color: #001219;
70-
}
71-
#status.error {
72-
background: #f8d7da;
73-
color: #721c24;
74-
}
75-
76-
#sidebar {
77-
grid-row: 2 / 4;
78-
background: #DEF1EB;
79-
border-right: 1px solid #94D2BD;
80-
overflow-y: auto;
81-
display: flex;
82-
flex-direction: column;
83-
}
84-
85-
.sidebar-section {
86-
padding: 10px;
87-
}
88-
89-
.sidebar-section h3 {
90-
font-size: 11px;
91-
text-transform: uppercase;
92-
color: #005F73;
93-
margin-bottom: 8px;
94-
font-weight: 700;
95-
letter-spacing: 0.5px;
96-
}
97-
98-
.table-list {
99-
list-style: none;
100-
}
101-
102-
.table-item {
103-
padding: 4px 8px;
104-
margin: 2px 0;
105-
border-radius: 3px;
106-
cursor: default;
107-
font-size: 13px;
108-
font-family: "Fira Code", "Consolas", "Monaco", monospace;
109-
display: flex;
110-
justify-content: space-between;
111-
align-items: center;
112-
color: #001219;
113-
}
114-
115-
.table-item:hover {
116-
background: rgba(10, 147, 150, 0.1);
117-
}
118-
119-
.table-item-name {
120-
flex: 1;
121-
overflow: hidden;
122-
text-overflow: ellipsis;
123-
white-space: nowrap;
124-
}
125-
126-
.table-item-remove {
127-
opacity: 0;
128-
cursor: pointer;
129-
color: #721c24;
130-
font-size: 16px;
131-
padding: 0 4px;
132-
line-height: 1;
133-
}
134-
135-
.table-item:hover .table-item-remove {
136-
opacity: 1;
137-
}
138-
139-
.file-input-wrapper input[type="file"] {
140-
position: absolute;
141-
left: -9999px;
142-
}
143-
144-
.file-input-label {
145-
display: block;
146-
padding: 6px 8px;
147-
background: #005F73;
148-
color: #F9F9F9;
149-
text-align: center;
150-
border-radius: 3px;
151-
cursor: pointer;
152-
font-size: 12px;
153-
margin-bottom: 6px;
154-
}
155-
156-
.file-input-label:hover {
157-
background: #0A9396;
158-
}
159-
160-
.example-section-header {
161-
font-size: 11px;
162-
text-transform: uppercase;
163-
color: #005F73;
164-
font-weight: 700;
165-
letter-spacing: 0.5px;
166-
margin: 10px 0 4px;
167-
padding: 0 2px;
168-
}
169-
170-
.example-section-header:first-child {
171-
margin-top: 0;
172-
}
173-
174-
.example-button {
175-
display: block;
176-
width: 100%;
177-
padding: 5px 8px;
178-
margin: 3px 0;
179-
background: #F9F9F9;
180-
border: 1px solid #94D2BD;
181-
color: #001219;
182-
border-radius: 3px;
183-
cursor: pointer;
184-
font-size: 12px;
185-
text-align: left;
186-
}
187-
188-
.example-button:hover {
189-
background: #94D2BD;
190-
color: #001219;
191-
}
192-
193-
#editor-container {
194-
background: #F9F9F9;
195-
position: relative;
196-
overflow: hidden;
197-
}
198-
199-
#viz-container {
200-
display: flex;
201-
flex-direction: column;
202-
overflow: scroll;
203-
}
204-
205-
#viz-output {
206-
flex: 1;
207-
padding: 16px;
208-
display: flex;
209-
align-items: flex-start;
210-
justify-content: center;
211-
}
212-
213-
#viz-output .vega-embed {
214-
width: 100%;
215-
}
216-
217-
#viz-output .chart-wrapper {
218-
min-width: 400px;
219-
min-height: 400px;
220-
}
221-
222-
#viz-output table.ggsql-table {
223-
border-collapse: separate;
224-
border-spacing: 0;
225-
font-family: "Fira Code", monospace;
226-
font-size: 12px;
227-
width: auto;
228-
background: #FFFFFF;
229-
}
230-
231-
#viz-output table.ggsql-table th {
232-
background: #DEF1EB;
233-
color: #005F73;
234-
font-weight: 600;
235-
text-align: left;
236-
padding: 6px 12px;
237-
border-bottom: 2px solid #94D2BD;
238-
position: sticky;
239-
top: 0;
240-
z-index: 1;
241-
}
242-
243-
#viz-output table.ggsql-table td {
244-
padding: 4px 12px;
245-
border-bottom: 1px solid #E0E0E0;
246-
white-space: nowrap;
247-
}
248-
249-
#viz-output table.ggsql-table tr:hover td {
250-
background: rgba(10, 147, 150, 0.05);
251-
}
252-
253-
#viz-output table.ggsql-table .truncation-row td {
254-
text-align: center;
255-
color: #005F73;
256-
font-style: italic;
257-
border-bottom: none;
258-
}
259-
260-
#error-panel {
261-
grid-column: 2 / -1;
262-
background: #F9F9F9;
263-
border-top: 1px solid #94D2BD;
264-
overflow-y: auto;
265-
padding: 8px 16px;
266-
font-family: "Fira Code", "Consolas", "Monaco", monospace;
267-
font-size: 12px;
268-
}
269-
270-
.panel-label {
271-
font-size: 11px;
272-
text-transform: uppercase;
273-
color: #005F73;
274-
font-weight: 700;
275-
letter-spacing: 0.5px;
276-
margin-bottom: 6px;
277-
font-family: "Nunito Sans", sans-serif;
278-
}
279-
280-
.error-message {
281-
color: #721c24;
282-
padding: 2px 0;
283-
white-space: pre-wrap;
284-
word-break: break-word;
285-
}
286-
287-
.warning-message {
288-
color: #856404;
289-
padding: 2px 0;
290-
white-space: pre-wrap;
291-
word-break: break-word;
292-
}
293-
294-
@media (max-width: 1024px) {
295-
#app {
296-
grid-template-columns: 1fr;
297-
grid-template-rows: 40px 1fr 1fr 100px;
298-
}
299-
300-
#sidebar {
301-
display: none;
302-
}
303-
304-
#error-panel {
305-
grid-column: 1;
306-
}
307-
}
308-
</style>
30915
</head>
31016
<body>
31117
<div id="app">
@@ -317,6 +23,12 @@ <h1>ggsql playground</h1>
31723
<div id="status" class="loading">Initializing...</div>
31824
</div>
31925

26+
<div id="mobile-toolbar">
27+
<select id="mobile-example-select">
28+
<option value="" disabled selected>Select an example…</option>
29+
</select>
30+
</div>
31+
32032
<div id="sidebar">
32133
<div class="sidebar-section">
32234
<h3>Tables</h3>

‎ggsql-wasm/demo/src/main.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "./styles.css";
12
import vegaEmbed from "vega-embed";
23
import { Warn } from "vega";
34
import { WasmContextManager } from "./context";
@@ -162,6 +163,34 @@ function initializeExamples() {
162163
});
163164
}
164165

166+
function initializeMobileExamples() {
167+
const select = document.getElementById(
168+
"mobile-example-select",
169+
) as HTMLSelectElement;
170+
171+
let currentSection = "";
172+
let optgroup: HTMLOptGroupElement | null = null;
173+
examples.forEach((example, index) => {
174+
if (example.section !== currentSection) {
175+
currentSection = example.section;
176+
optgroup = document.createElement("optgroup");
177+
optgroup.label = currentSection;
178+
select.appendChild(optgroup);
179+
}
180+
const option = document.createElement("option");
181+
option.value = String(index);
182+
option.textContent = example.name;
183+
optgroup!.appendChild(option);
184+
});
185+
186+
select.addEventListener("change", () => {
187+
const idx = parseInt(select.value, 10);
188+
if (!isNaN(idx) && examples[idx]) {
189+
editorManager.setValue(examples[idx].query);
190+
}
191+
});
192+
}
193+
165194
async function main() {
166195
try {
167196
setStatus("Loading WASM module...", "loading");
@@ -181,6 +210,7 @@ async function main() {
181210
tableManager.refresh();
182211

183212
initializeExamples();
213+
initializeMobileExamples();
184214

185215
editorManager.onChange((query) => {
186216
executeQuery(query);

0 commit comments

Comments
 (0)