From b2107c5d123a42bc0e8e06acc2cb0c4aba62b69f Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Tue, 6 Sep 2022 16:52:33 -0400
Subject: [PATCH] A couple CSS tweaks and general clean-up.

---
 src/app.css             |  6 +++++
 src/routes/+page.svelte | 54 +++++++++++++++++++----------------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/app.css b/src/app.css
index 653f04e..9cca01d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -255,3 +255,9 @@ button:focus:not(:focus-visible) {
 		font-size: 2rem;
 	}
 }
+
+@media (max-width: 719px) {
+	.wide-only {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b68c0c1..cf97639 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -30,12 +30,6 @@ JSON.parse(`{
   "purchaseId": "${id}"
 }`)
     ], 3)
-  let realTimeIndex = 0
-  const randomizeRealTime = () => setTimeout(() => {
-    realTimeIndex = (realTimeIndex + 1) % fakeObjects.length
-    randomizeRealTime()
-  }, 1500)
-  randomizeRealTime()
 
   let line = 0
   let oneShotText = JSON.stringify(fakeObjects[0])
@@ -71,19 +65,15 @@ JSON.parse(`{
     }
   }
   $: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
-  const nextFilterText = () => setTimeout(() => {
-    filterTextIndex = (filterTextIndex + 1) % filterTexts.length
-    nextFilterText()
-  }, 2800)
-  nextFilterText()
+
+  let realTimeIndex = 0
+  if (typeof window !== 'undefined') {
+    window.setInterval(() => realTimeIndex = (realTimeIndex + 1) % fakeObjects.length, 1500)
+    window.setInterval(() => filterTextIndex = (filterTextIndex + 1) % filterTexts.length, 2800)
+  }
 
 </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="eye-catch">
         <h1>Data should be <span class="fun">Fun</span></h1>
@@ -121,8 +111,9 @@ JSON.parse(`{
         <h2>Flexible search</h2>
         <h3>Powered by Javascript</h3>
         <div class="data-display">
-            <div class="data-display-section">
-                <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>
+            <div class="data-display-section standalone-data-display">
+                <pre><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</pre>
+                <hr>
                 <pre>{filteredObject}</pre>
             </div>
         </div>
@@ -134,6 +125,22 @@ JSON.parse(`{
         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 {
         padding-right: 0.2em;
         display: flex;
@@ -142,8 +149,6 @@ JSON.parse(`{
         flex-wrap: nowrap;
     }
 
-    .data-display-section h3 {
-    }
     .data-display-section {
         padding: 1em 1em 0;
         border-radius: 4px;
@@ -218,8 +223,6 @@ JSON.parse(`{
 
     img.big-photo {
         display: inline-block;
-        /*max-width: 40vw;*/
-        /*max-height: 50vw;*/
         margin-top: 2em;
         max-width: 90vw;
         height: auto;
@@ -235,13 +238,6 @@ JSON.parse(`{
         margin-top: 6em;
     }
 
-    .logo-json-box {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
-
     .data-display {
         display: flex;
         flex-wrap: wrap;