sage
/
kafka-dance-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Darker headings. 

Display JSON example when in IDLE queryState.
This commit is contained in:
Sage Vaillancourt 2022-09-06 11:14:46 -04:00
parent e50c76664d
commit 4e75739b1d
2 changed files with 6 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -11,7 +11,7 @@
--tertiary-color: #edf0f8;
--accent-color: #de09fa;
/*--accent-color: #ff0df8;*/
--heading-color: rgba(0, 0, 0, 0.8);
--heading-color: rgba(0, 0, 0, 0.9);
--text-color: #444444;
--background-without-opacity: rgba(255, 255, 255, 0.7);
--column-width: 42rem;

16
src/routes/+page.svelte
View File

@ -231,14 +231,15 @@
</div>
</div>
</div>
{#if $state.items?.length > 0}
{#if $state.queryState !== queryState.IDLE}
<div class="data-view" style={`font-size: ${fontSizes[jsonDisplay.fontSize]}%`}>
<JsonView json={jsonDisplay.showMetadata ? $state.items : $state.items.map(item => item.value)}
depth={jsonDisplay.expandAll ? Infinity : 1}/>
</div>
{:else }
<div class="data-view no-query-data">
<h2>No query data</h2>
<div class="data-view no-query-data" style={`font-size: ${fontSizes[jsonDisplay.fontSize]}%`}>
<JsonView json={{value: {"Hey": "There's no data here yet!", "When you start a query": "your results will appear here!"}}}
depth={jsonDisplay.expandAll ? Infinity : -1}/>
</div>
{/if}
</div>
@ -391,13 +392,6 @@
*/
.no-query-data {
display: flex;
align-items: center;
justify-content: center;
}
.no-query-data h2 {
font-size: 32px;
color: rgba(0, 0, 0, 0.3);
opacity: 65%;
}
</style>