From 0e0595f3fa3f85bad4cbb87ed4786ee2f3192df4 Mon Sep 17 00:00:00 2001
From: AngryLoki <AngryLoki@users.noreply.github.com>
Date: Mon, 6 Feb 2023 17:49:00 +0300
Subject: [PATCH] Fix slashes minor style fixes

---
 src/lib/components/common/ColorInput.svelte  |  2 +-
 src/lib/components/common/InlineEdit.svelte  | 12 ++++-----
 src/lib/components/common/NumberInput.svelte | 12 ++++++---
 src/lib/components/common/Select.svelte      |  4 +--
 src/lib/worker/my.worker.ts                  | 27 --------------------
 src/routes/+layout.ts                        |  1 +
 src/routes/+page.svelte                      |  1 +
 src/routes/ViewForm.svelte                   |  2 +-
 src/routes/worker/+page.svelte               | 17 ------------
 tailwind.config.cjs                          |  4 +++
 10 files changed, 24 insertions(+), 58 deletions(-)
 delete mode 100644 src/lib/worker/my.worker.ts
 delete mode 100644 src/routes/worker/+page.svelte

diff --git a/src/lib/components/common/ColorInput.svelte b/src/lib/components/common/ColorInput.svelte
index d867098..b6a55c2 100644
--- a/src/lib/components/common/ColorInput.svelte
+++ b/src/lib/components/common/ColorInput.svelte
@@ -55,7 +55,7 @@
 		class="text-left border-[1.99px] rounded-sm
 		{dropdownVisible
 			? 'border-blue-500 bg-gray-950'
-			: 'border-transparent hover:border-white/5 hover:bg-white/5'}
+			: 'border-transparent hover:border-gray-300/5 hover:bg-gray-300/5 nohover:bg-gray-300/5'}
 		focus-visible:outline-none focus-visible:border-blue-500 focus-visible:hover:border-blue-500
 		transition px-1 leading-6 h-6 box-content flex items-center
 		{cls}"
diff --git a/src/lib/components/common/InlineEdit.svelte b/src/lib/components/common/InlineEdit.svelte
index 0e533de..6dc0f5f 100644
--- a/src/lib/components/common/InlineEdit.svelte
+++ b/src/lib/components/common/InlineEdit.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import IconEx from "./IconEx.svelte";
     import MultilineField from "./MultilineField.svelte";
-    import { mdiAlertCircleOutline } from "@mdi/js";
+    import { mdiAlertCircleOutline, mdiPencil } from "@mdi/js";
     import { createEventDispatcher, tick } from "svelte";
     import { useActions } from "svelte-useactions";
     import type { ActionList } from "svelte-useactions";
@@ -118,11 +118,12 @@
     role="button"
     use:useActions={use}
     class="flex items-stretch w-full transition-all rounded-sm border-[1.99px] cursor-text
-    text-gray-200 focus-within:border-blue-500 hover:focus-within:border-blue-500 selection:bg-blue-600/60 selection:text-gray-200
+    text-gray-200 selection:text-gray-200 selection:bg-blue-600/60
     {edit
-        ? 'bg-gray-950 hover:bg-gray-900 focus-within:bg-black hover:focus-within:bg-black ' +
-          (invalid ? 'border-red-500' : 'border-white/5')
-        : 'bg-transparent border-transparent hover:border-white/5 hover:bg-white/5'}
+        ? 'bg-gray-950 focus-within:bg-black hover:focus-within:bg-black ' +
+          (invalid ? 'border-red-500' : 'border-gray-300/5')
+        : 'bg-transparent hover:bg-gray-300/5 border-transparent hover:border-gray-300/5 nohover:bg-gray-400/5'}
+    focus-within:border-blue-500 hover:focus-within:border-blue-500
     {cls}"
     on:click={enterEditMode}
     on:keydown={enterEditMode}
@@ -167,7 +168,6 @@
                 <slot>{value + "\n"}</slot>
             {/if}
         </div>
-
         <button tabindex="-1" class="block min-w-[1rem] grow cursor-text">
             &nbsp;
         </button>
diff --git a/src/lib/components/common/NumberInput.svelte b/src/lib/components/common/NumberInput.svelte
index 31fedde..c6c7f2c 100644
--- a/src/lib/components/common/NumberInput.svelte
+++ b/src/lib/components/common/NumberInput.svelte
@@ -166,9 +166,11 @@
             tabindex="-1"
             class="w-6 flex-none flex justify-center items-center
             {canDecrement
-                ? 'cursor-pointer hover:bg-white/5'
+                ? 'cursor-pointer hover:bg-gray-300/5'
                 : 'cursor-default'}
-            {edit ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+            {edit
+                ? 'opacity-100'
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100'}
             transition-opacity"
         >
             <IconEx
@@ -186,9 +188,11 @@
             tabindex="-1"
             class="w-6 flex-none flex justify-center items-center 
             {canIncrement
-                ? 'cursor-pointer hover:bg-white/5'
+                ? 'cursor-pointer hover:bg-gray-300/5'
                 : 'cursor-default'}
-            {edit ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+            {edit
+                ? 'opacity-100'
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100'}
             transition-opacity"
         >
             <IconEx
diff --git a/src/lib/components/common/Select.svelte b/src/lib/components/common/Select.svelte
index e55106d..10d2c51 100644
--- a/src/lib/components/common/Select.svelte
+++ b/src/lib/components/common/Select.svelte
@@ -136,7 +136,7 @@
         focus-visible:outline-none focus-visible:border-blue-500
         {dropdownVisible
             ? 'border-blue-500 bg-black/10'
-            : 'bg-transparent hover:bg-white/5 border-transparent hover:border-white/5'}
+            : 'bg-transparent hover:bg-gray-300/5 nohover:bg-gray-300/5 border-transparent hover:border-gray-300/5'}
             {cls}"
         on:click={onClick}
         on:keydown={onButtonKeyDown}
@@ -153,7 +153,7 @@
             class="fill-gray-400 h-4 w-4 absolute top-1 right-0 transition-opacity
             {dropdownVisible
                 ? 'opacity-100'
-                : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'}"
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100 group-focus-visible:opacity-100'}"
             role="presentation"
         />
     </button>
diff --git a/src/lib/worker/my.worker.ts b/src/lib/worker/my.worker.ts
deleted file mode 100644
index f9940fd..0000000
--- a/src/lib/worker/my.worker.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-let mycanvas: OffscreenCanvas;
-let myctx: OffscreenCanvasRenderingContext2D;
-
-let step = 0;
-
-const run = () => {
-	myctx.clearRect(0, 0, 600, 600);
-	myctx.beginPath();
-	myctx.arc(step % 200, 100, 10, 0, 2 * Math.PI);
-	myctx.fillStyle = 'red';
-	myctx.fill();
-	step++;
-
-	self.requestAnimationFrame(run);
-};
-
-onmessage = ({data}) => {
-	console.log('Worker received a message from the main thread');
-	const {canvas: canvasMessage} = data;
-	if (canvasMessage) {
-		mycanvas = canvasMessage;
-	} else {
-		myctx = mycanvas.getContext('2d')!;
-		run();
-	}
-};
-
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index bdc33a1..e021ced 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -2,3 +2,4 @@ import '../app.css';
 
 export const prerender = true;
 export const ssr = false;
+export const trailingSlash = 'always';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94f0ce2..30a421c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,6 +36,7 @@
     const rootPage = $page.url.origin + $page.url.pathname;
 
     const onQueryFormSubmit = async (event: CustomEvent<QueryParameters>) => {
+        drawerVisible = false;
         await updateUrl(event.detail, appParameters.visParameters, false);
     };
 
diff --git a/src/routes/ViewForm.svelte b/src/routes/ViewForm.svelte
index e515051..cf82b34 100644
--- a/src/routes/ViewForm.svelte
+++ b/src/routes/ViewForm.svelte
@@ -58,7 +58,7 @@
 		on:click={() => {
 			expanded = !expanded;
 		}}
-		class="w-full leading-6 py-0.5 text-gray-300 bg-transparent hover:bg-white/5 active:bg-black/5 transition-colors"
+		class="w-full leading-6 py-0.5 text-gray-300 bg-transparent hover:bg-gray-300/5 active:bg-black/5 transition-colors"
 	>
 		{expanded ? "Collapse" : "Show visualization settings"}
 	</button>
diff --git a/src/routes/worker/+page.svelte b/src/routes/worker/+page.svelte
deleted file mode 100644
index 3a9275c..0000000
--- a/src/routes/worker/+page.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	let canvas: HTMLCanvasElement;
-	let worker: Worker;
-
-	onMount(async () => {
-		const SyncWorker = await import("$lib/worker/my.worker?worker");
-		worker = new SyncWorker.default();
-
-		const offscreenCanvas = canvas.transferControlToOffscreen();
-		worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);
-		worker.postMessage({});
-	});
-</script>
-
-<canvas width="300" height="300" bind:this={canvas} />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8e53721..443ad10 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -31,6 +31,7 @@ module.exports = {
 			},
 			screens: {
 				coarse: {raw: '(pointer: coarse)'},
+				nohover: {raw: '(hover: none)'},
 			},
 			keyframes: {
 				'spin-appear': {
@@ -53,4 +54,7 @@ module.exports = {
 	experimental: {
 		optimizeUniversalDefaults: true,
 	},
+	future: {
+		hoverOnlyWhenSupported: true,
+	},
 };