From d59ceec99d16f52e71d165448d959ba6b5624425 Mon Sep 17 00:00:00 2001 From: Ali Abdalla Date: Mon, 4 Dec 2023 23:43:52 +0000 Subject: [PATCH] Removes smooth scrolling from website (#6650) * smooth scrolling with css * add changeset * formatting * remove smooth scrolling * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/pink-squids-throw.md | 5 ++ .../src/lib/components/FunctionDoc.svelte | 33 ++---------- .../[[version]]/docs/[doc]/+page.svelte | 53 ++++--------------- .../[[version]]/docs/flagging/+page.svelte | 40 +++----------- .../[[version]]/docs/themes/+page.svelte | 40 ++------------ .../[[version]]/guides/[guide]/+page.svelte | 18 ++----- js/_website/src/routes/changelog/+page.svelte | 17 +----- 7 files changed, 35 insertions(+), 171 deletions(-) create mode 100644 .changeset/pink-squids-throw.md diff --git a/.changeset/pink-squids-throw.md b/.changeset/pink-squids-throw.md new file mode 100644 index 0000000000..70e00883bb --- /dev/null +++ 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 index df35c91e0b..0f808114fc 100644 --- a/js/_website/src/lib/components/FunctionDoc.svelte +++ b/js/_website/src/lib/components/FunctionDoc.svelte @@ -1,18 +1,6 @@ @@ -21,10 +9,8 @@

{fn.name} -

@@ -56,10 +42,7 @@ id="{fn.slug}-description" > Description - @@ -71,10 +54,7 @@ id="{fn.slug}-example-usage" > Example Usage - @@ -91,10 +71,7 @@ id="{fn.slug}-arguments" > Agruments - diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte index 5b972ea921..8ead7556b3 100644 --- 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 @@ @@ -222,10 +210,7 @@

Description -

@@ -269,10 +254,7 @@

Example Usage -

@@ -345,10 +327,7 @@

Shortcuts -

@@ -395,10 +374,7 @@

Demos -

@@ -447,7 +423,6 @@ @@ -460,10 +435,7 @@

Methods -

@@ -481,10 +453,7 @@

Guides -

@@ -547,10 +516,7 @@ class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12" >
- {obj.name}{obj.name} {#if headers.length > 0}
    @@ -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]}{header[0]} {/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} >    {method_header[0]} @@ -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}>GuidesGuides {/if} diff --git a/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte b/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte index 62ac48e49c..7b71e160f0 100644 --- 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 @@

    Flagging -

    @@ -157,10 +144,7 @@ id="description" > Description - @@ -178,7 +162,6 @@ @@ -227,7 +210,6 @@ @@ -267,7 +249,6 @@ @@ -287,7 +268,6 @@ @@ -384,10 +364,7 @@ id="guides" > Guides - @@ -422,7 +399,6 @@ @@ -489,11 +465,7 @@ class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12" >
    - Flagging + Flagging {#if headers.length > 0}
      {#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]}{header[0]} {/each} @@ -512,7 +484,7 @@ {method_header[0]}{method_header[0]} {/each} diff --git a/js/_website/src/routes/[[version]]/docs/themes/+page.svelte b/js/_website/src/routes/[[version]]/docs/themes/+page.svelte index 65e9349096..78afa2ef13 100644 --- a/js/_website/src/routes/[[version]]/docs/themes/+page.svelte +++ b/js/_website/src/routes/[[version]]/docs/themes/+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 @@

      Themes -

      @@ -157,10 +144,7 @@ id="description" > Description - @@ -180,7 +164,6 @@ @@ -230,7 +213,6 @@ @@ -273,7 +255,6 @@ @@ -293,7 +274,6 @@ @@ -383,7 +363,6 @@ @@ -402,10 +381,7 @@ id="guides" > Guides - @@ -440,7 +416,6 @@ @@ -507,11 +482,7 @@ class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12" >
      - Themes + Themes {#if headers.length > 0}
        {#each headers as header} @@ -520,7 +491,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]}{header[0]} {/each} @@ -530,7 +501,6 @@     {method_header[0]} diff --git a/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte b/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte index b25d9000c1..e239ab4406 100644 --- a/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte +++ b/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte @@ -3,6 +3,7 @@ import MetaTags from "$lib/components/MetaTags.svelte"; import { page } from "$app/stores"; import DropDown from "$lib/components/VersionDropdown.svelte"; + import { goto } from "$app/navigation"; export let data: { guide: any; @@ -38,17 +39,6 @@ let navigation; let y: number; - 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 flattened_guides = guide_names.map((category) => category.guides).flat(); let prev_guide: any; let next_guide: any; @@ -115,8 +105,7 @@ class:current-nav-link={guide.name == guide_page.name} class="guide-link -indent-2 ml-2 thin-link px-4 block overflow-hidden" style="max-width: 12rem" - href="..{guide.url}" - on:click={handleAnchorClick}>{guide.pretty_name}{guide.pretty_name}
        {heading.text}{heading.text} {/each}
        diff --git a/js/_website/src/routes/changelog/+page.svelte b/js/_website/src/routes/changelog/+page.svelte index f7e5665073..74ccfaabdc 100644 --- a/js/_website/src/routes/changelog/+page.svelte +++ b/js/_website/src/routes/changelog/+page.svelte @@ -12,17 +12,6 @@ let content = data.content; let slugs = data.changelog_slug; - - 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" - }); - } {heading.text}{heading.text}

        🔥

      {:else} {heading.text}{heading.text} {/if} {/each}