Eye candy

- Transition between pages

ui/src/App.svelte

@@ -1,17 +1,26 @@
 <script>
     import Upload from './main/Upload.svelte';
+    import { blur } from 'svelte/transition';
 
     import { parseResult, debug } from './store';
     import DebugView from './debug/DebugView.svelte';
 </script>
 
-<div class="text-2xl font-semibold font-serif text-center bg-gray-400">PDF to Markdown Converter</div>
+<div in:blur={{ duration: 450 }} class="text-2xl font-semibold font-serif text-center bg-gray-400">
+    PDF to Markdown Converter
+</div>
 <main class="mt-2 h-full">
-    {#if $debug}
-        <DebugView debug={$debug} />
-    {:else}
-        <Upload />
-    {/if}
+    <div class="transition-container">
+        {#if $debug}
+            <span in:blur={{ duration: 1200 }} out:blur={{ duration: 900 }}>
+                <DebugView debug={$debug} />
+            </span>
+        {:else}
+            <span in:blur={{ duration: 900 }} out:blur={{ duration: 900 }}>
+                <Upload />
+            </span>
+        {/if}
+    </div>
 </main>
 
 <style>
@@ -21,4 +30,15 @@
         @apply text-gray-800;
         @apply bg-gray-50;
     }
+
+    .transition-container {
+        display: grid;
+        grid-template-rows: 1;
+        grid-template-columns: 1;
+    }
+
+    .transition-container > * {
+        grid-row: 1;
+        grid-column: 1;
+    }
 </style>

ui/src/debug/TransformerSelectionPopup.svelte

@@ -33,6 +33,7 @@
     .selected {
         @apply cursor-default;
         @apply bg-gray-300;
+        @apply rounded;
         /* @apply underline; */
     }
     .selectable {
@@ -41,5 +42,6 @@
     .selectable:hover {
         @apply bg-gray-400;
         @apply text-green-700;
+        @apply rounded;
     }
 </style>

ui/src/index.ts

@@ -3,6 +3,7 @@ import './Tailwind.css';
 
 var app = new App({
     target: document.body,
+    intro: true,
 });
 
 export default app;