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; --tertiary-color: #edf0f8;
--accent-color: #de09fa; --accent-color: #de09fa;
/*--accent-color: #ff0df8;*/ /*--accent-color: #ff0df8;*/
--heading-color: rgba(0, 0, 0, 0.8); --heading-color: rgba(0, 0, 0, 0.9);
--text-color: #444444; --text-color: #444444;
--background-without-opacity: rgba(255, 255, 255, 0.7); --background-without-opacity: rgba(255, 255, 255, 0.7);
--column-width: 42rem; --column-width: 42rem;

16
src/routes/+page.svelte
View File

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