Removes smooth scrolling from website (#6650)

* smooth scrolling with css * add changeset * formatting * remove smooth scrolling * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Dec 4, 2023 · d59ceec · d59ceec
1 parent 98b15c2
commit d59ceec
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 171 deletions.
diff --git a/.changeset/pink-squids-throw.md b/.changeset/pink-squids-throw.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Removes smooth scrolling from website
diff --git a/js/_website/src/lib/components/FunctionDoc.svelte b/js/_website/src/lib/components/FunctionDoc.svelte
@@ -1,18 +1,6 @@
 <script lang="ts">
 	export let fn: any;
 	import anchor from "../assets/img/anchor.svg";
-
-	function handleAnchorClick(event: MouseEvent) {
-		event.preventDefault();
-		const link = event.currentTarget as HTMLAnchorElement;
-
-		const anchorId = new URL(link.href).hash.replace("#", "");
-		const anchor = document.getElementById(anchorId);
-		window.scrollTo({
-			top: anchor?.offsetTop,
-			behavior: "smooth"
-		});
-	}
 </script>
 
 <!-- name, signature, description, params -->
@@ -21,10 +9,8 @@
 	<div class="flex flex-row items-center justify-between">
 		<h3 class="group text-3xl font-light py-4">
 			{fn.name}
-			<a
-				href="#{fn.slug}"
-				class="invisible group-hover-visible"
-				on:click={handleAnchorClick}><img class="anchor-img" src={anchor} /></a
+			<a href="#{fn.slug}" class="invisible group-hover-visible"
+				><img class="anchor-img" src={anchor} /></a
 			>
 		</h3>
 	</div>
@@ -56,10 +42,7 @@
 		id="{fn.slug}-description"
 	>
 		Description
-		<a
-			href="#{fn.slug}-description"
-			class="invisible group-hover-visible"
-			on:click={handleAnchorClick}
+		<a href="#{fn.slug}-description" class="invisible group-hover-visible"
 			><img class="anchor-img-small" src={anchor} /></a
 		>
 	</h4>
@@ -71,10 +54,7 @@
 			id="{fn.slug}-example-usage"
 		>
 			Example Usage
-			<a
-				href="#{fn.slug}-example-usage"
-				class="invisible group-hover-visible"
-				on:click={handleAnchorClick}
+			<a href="#{fn.slug}-example-usage" class="invisible group-hover-visible"
 				><img class="anchor-img-small" src={anchor} /></a
 			>
 		</h4>
@@ -91,10 +71,7 @@
 			id="{fn.slug}-arguments"
 		>
 			Agruments
-			<a
-				href="#{fn.slug}-arguments"
-				class="invisible group-hover-visible"
-				on:click={handleAnchorClick}
+			<a href="#{fn.slug}-arguments" class="invisible group-hover-visible"
 				><img class="anchor-img-small" src={anchor} /></a
 			>
 		</h4>

diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
@@ -29,17 +29,6 @@
 
 	let current_selection = 0;
 
-	function handleAnchorClick(event: MouseEvent) {
-		event.preventDefault();
-		const link = event.currentTarget as HTMLAnchorElement;
-		const anchorId = new URL(link?.href).hash.replace("#", "");
-		const anchor = document.getElementById(anchorId);
-		window.scrollTo({
-			top: anchor?.offsetTop,
-			behavior: "smooth"
-		});
-	}
-
 	let y: number;
 	let header_targets: { [key: string]: HTMLElement } = {};
 	let target_elem: HTMLElement;
@@ -164,7 +153,6 @@
 								<a
 									href="#{obj.slug}-header"
 									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
 									><img class="anchor-img" src={anchor} /></a
 								>
 							</h3>
@@ -222,10 +210,7 @@
 						<div id="description">
 							<h4 class="mt-8 text-xl text-orange-500 font-light group">
 								Description
-								<a
-									href="#description"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
+								<a href="#description" class="invisible group-hover-visible"
 									><img class="anchor-img-small" src={anchor} /></a
 								>
 							</h4>
@@ -269,10 +254,7 @@
 							<div id="example-usage">
 								<h4 class="mt-4 text-xl text-orange-500 font-light group">
 									Example Usage
-									<a
-										href="#example-usage"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
+									<a href="#example-usage" class="invisible group-hover-visible"
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -345,10 +327,7 @@
 							<div id="shortcuts">
 								<h4 class="mt-6 text-xl text-orange-500 font-light group">
 									Shortcuts
-									<a
-										href="#shortcuts"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
+									<a href="#shortcuts" class="invisible group-hover-visible"
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -395,10 +374,7 @@
 								<div class="category my-8" id="examples">
 									<h4 class="text-xl text-orange-500 font-light group">
 										Demos
-										<a
-											href="#demos"
-											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
+										<a href="#demos" class="invisible group-hover-visible"
 											><img class="anchor-img-small" src={anchor} /></a
 										>
 									</h4>
@@ -447,7 +423,6 @@
 										<a
 											href="#event-listeners"
 											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
 											><img class="anchor-img-small" src={anchor} /></a
 										>
 									</h4>
@@ -460,10 +435,7 @@
 								<div id="methods">
 									<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
 										Methods
-										<a
-											href="#methods"
-											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
+										<a href="#methods" class="invisible group-hover-visible"
 											><img class="anchor-img-small" src={anchor} /></a
 										>
 									</h4>
@@ -481,10 +453,7 @@
 							<div id="guides">
 								<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
 									Guides
-									<a
-										href="#guides"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
+									<a href="#guides" class="invisible group-hover-visible"
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -547,10 +516,7 @@
 			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12"
 		>
 			<div class="mx-8">
-				<a
-					class="thin-link py-2 block text-lg"
-					href="#{obj.slug}"
-					on:click={handleAnchorClick}>{obj.name}</a
+				<a class="thin-link py-2 block text-lg" href="#{obj.slug}">{obj.name}</a
 				>
 				{#if headers.length > 0}
 					<ul class="text-slate-700 text-lg leading-6">
@@ -560,7 +526,7 @@
 									bind:this={header_targets[header[1]]}
 									href="#{header[1]}"
 									class="thin-link block py-2 font-light second-nav-link"
-									on:click={handleAnchorClick}>{header[0]}</a
+									>{header[0]}</a
 								>
 							</li>
 						{/each}
@@ -571,7 +537,6 @@
 										bind:this={header_targets[method_header[1]]}
 										href="#{method_header[1]}"
 										class="thin-link block py-2 font-light second-nav-link sub-link"
-										on:click={handleAnchorClick}
 										>&nbsp&nbsp&nbsp&nbsp{method_header[0]}</a
 									>
 								</li>
@@ -583,7 +548,7 @@
 									bind:this={header_targets["guides"]}
 									href="#guides"
 									class="thin-link block py-2 font-light second-nav-link"
-									on:click={handleAnchorClick}>Guides</a
+									>Guides</a
 								>
 							</li>
 						{/if}

diff --git a/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte b/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte
@@ -21,16 +21,6 @@
 	let py_client = data.py_client;
 
 	let current_selection = 0;
-	function handleAnchorClick(event: MouseEvent) {
-		event.preventDefault();
-		const link = event.currentTarget as HTMLAnchorElement;
-		const anchorId = new URL(link.href).hash.replace("#", "");
-		const anchor = document.getElementById(anchorId);
-		window.scrollTo({
-			top: anchor?.offsetTop,
-			behavior: "smooth"
-		});
-	}
 
 	let y: number;
 	let header_targets: { [key: string]: HTMLElement } = {};
@@ -143,10 +133,7 @@
 						<div class="flex flex-row items-center justify-between">
 							<h3 id="flagging-header" class="group text-3xl font-light py-4">
 								Flagging
-								<a
-									href="#flagging"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
+								<a href="#flagging" class="invisible group-hover-visible"
 									><img class="anchor-img" src={anchor} /></a
 								>
 							</h3>
@@ -157,10 +144,7 @@
 							id="description"
 						>
 							Description
-							<a
-								href="#description"
-								class="invisible group-hover-visible"
-								on:click={handleAnchorClick}
+							<a href="#description" class="invisible group-hover-visible"
 								><img class="anchor-img-small" src={anchor} /></a
 							>
 						</h4>
@@ -178,7 +162,6 @@
 									<a
 										href="#{obj.slug}-header"
 										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
 										><img class="anchor-img" src={anchor} /></a
 									>
 								</h3>
@@ -227,7 +210,6 @@
 								<a
 									href="#{obj.name}-description"
 									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
 									><img class="anchor-img-small" src={anchor} /></a
 								>
 							</h4>
@@ -267,7 +249,6 @@
 									<a
 										href="#{obj.name}-example-usage"
 										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -287,7 +268,6 @@
 									<a
 										href="#{obj.name}-initialization"
 										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -384,10 +364,7 @@
 									id="guides"
 								>
 									Guides
-									<a
-										href="#guides"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
+									<a href="#guides" class="invisible group-hover-visible"
 										><img class="anchor-img-small" src={anchor} /></a
 									>
 								</h4>
@@ -422,7 +399,6 @@
 										<a
 											href="#{obj.name}-demos"
 											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
 											><img class="anchor-img-small" src={anchor} /></a
 										>
 									</h4>
@@ -489,11 +465,7 @@
 			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12"
 		>
 			<div class="mx-8">
-				<a
-					class="thin-link py-2 block text-lg"
-					href="#flagging"
-					on:click={handleAnchorClick}>Flagging</a
-				>
+				<a class="thin-link py-2 block text-lg" href="#flagging">Flagging</a>
 				{#if headers.length > 0}
 					<ul class="text-slate-700 text-lg leading-6">
 						{#each headers as header}
@@ -502,7 +474,7 @@
 									bind:this={header_targets[header[1]]}
 									href="#{header[1]}"
 									class="thin-link block py-2 font-light second-nav-link"
-									on:click={handleAnchorClick}>{header[0]}</a
+									>{header[0]}</a
 								>
 							</li>
 						{/each}
@@ -512,7 +484,7 @@
 									<a
 										href="#{method_header[1]}"
 										class="thin-link block py-2 font-light second-nav-link"
-										on:click={handleAnchorClick}>{method_header[0]}</a
+										>{method_header[0]}</a
 									>
 								</li>
 							{/each}