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

A couple CSS tweaks and general clean-up.

This commit is contained in:
Sage Vaillancourt 2022-09-06 16:52:33 -04:00
parent f4db844b7c
commit b2107c5d12
2 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@ -255,3 +255,9 @@ button:focus:not(:focus-visible) {
font-size: 2rem; font-size: 2rem;
} }
} }
@media (max-width: 719px) {
.wide-only {
display: none;
}
}

54
src/routes/+page.svelte
View File

@ -30,12 +30,6 @@ JSON.parse(`{
"purchaseId": "${id}" "purchaseId": "${id}"
}`) }`)
], 3) ], 3)
let realTimeIndex = 0
const randomizeRealTime = () => setTimeout(() => {
realTimeIndex = (realTimeIndex + 1) % fakeObjects.length
randomizeRealTime()
}, 1500)
randomizeRealTime()
let line = 0 let line = 0
let oneShotText = JSON.stringify(fakeObjects[0]) let oneShotText = JSON.stringify(fakeObjects[0])
@ -71,19 +65,15 @@ JSON.parse(`{
} }
} }
$: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50) $: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
const nextFilterText = () => setTimeout(() => {
filterTextIndex = (filterTextIndex + 1) % filterTexts.length let realTimeIndex = 0
nextFilterText() if (typeof window !== 'undefined') {
}, 2800) window.setInterval(() => realTimeIndex = (realTimeIndex + 1) % fakeObjects.length, 1500)
nextFilterText() window.setInterval(() => filterTextIndex = (filterTextIndex + 1) % filterTexts.length, 2800)
}
</script> </script>
<!--
<div class="logo-json-box">
<img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
</div>
-->
<div class="content"> <div class="content">
<div class="eye-catch"> <div class="eye-catch">
<h1>Data should be <span class="fun">Fun</span></h1> <h1>Data should be <span class="fun">Fun</span></h1>
@ -121,8 +111,9 @@ JSON.parse(`{
<h2>Flexible search</h2> <h2>Flexible search</h2>
<h3>Powered by Javascript</h3> <h3>Powered by Javascript</h3>
<div class="data-display"> <div class="data-display">
<div class="data-display-section"> <div class="data-display-section standalone-data-display">
<pre style="width: 90%; margin-top: 0; padding-bottom: 0.5em; border-bottom: solid #fbc; border-radius: 0; border-width: 1px;"><span style="color: #533;">=&gt;</span> {filterTexts[filterTextIndex]}</pre> <pre><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</pre>
<hr>
<pre>{filteredObject}</pre> <pre>{filteredObject}</pre>
</div> </div>
</div> </div>
@ -134,6 +125,22 @@ JSON.parse(`{
padding-top: 1em; padding-top: 1em;
} }
.standalone-data-display pre {
width: 90%;
margin-top: 0;
}
.data-display-section hr {
margin-top: -0.5em;
border-radius: 0;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #fbc;
}
.with-kafka-dance span { .with-kafka-dance span {
padding-right: 0.2em; padding-right: 0.2em;
display: flex; display: flex;
@ -142,8 +149,6 @@ JSON.parse(`{
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.data-display-section h3 {
}
.data-display-section { .data-display-section {
padding: 1em 1em 0; padding: 1em 1em 0;
border-radius: 4px; border-radius: 4px;
@ -218,8 +223,6 @@ JSON.parse(`{
img.big-photo { img.big-photo {
display: inline-block; display: inline-block;
/*max-width: 40vw;*/
/*max-height: 50vw;*/
margin-top: 2em; margin-top: 2em;
max-width: 90vw; max-width: 90vw;
height: auto; height: auto;
@ -235,13 +238,6 @@ JSON.parse(`{
margin-top: 6em; margin-top: 6em;
} }
.logo-json-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.data-display { .data-display {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;