mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-17 11:29:58 +08:00
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>
This commit is contained in:
Ali Abdalla
GitHub
parent
98b15c24a5
commit
d59ceec99d
5
.changeset/pink-squids-throw.md
Normal file
5
.changeset/pink-squids-throw.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"website": minor
|
||||
---
|
||||
|
||||
feat:Removes smooth scrolling from website
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
>    {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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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="themes-header" class="group text-3xl font-light py-4">
|
||||
Themes
|
||||
<a
|
||||
href="#themes"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
<a href="#themes" 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>
|
||||
@ -180,7 +164,6 @@
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
@ -230,7 +213,6 @@
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
@ -273,7 +255,6 @@
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
@ -293,7 +274,6 @@
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
@ -383,7 +363,6 @@
|
||||
<a
|
||||
href="#{obj.name}-methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
@ -402,10 +381,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>
|
||||
@ -440,7 +416,6 @@
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
@ -507,11 +482,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="#themes"
|
||||
on:click={handleAnchorClick}>Themes</a
|
||||
>
|
||||
<a class="thin-link py-2 block text-lg" href="#themes">Themes</a>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#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]}</a
|
||||
>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
@ -530,7 +501,6 @@
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link sub-link"
|
||||
on:click={handleAnchorClick}
|
||||
>    {method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
|
||||
@ -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}</a
|
||||
href="..{guide.url}">{guide.pretty_name}</a
|
||||
>
|
||||
|
||||
<div
|
||||
@ -125,8 +114,7 @@
|
||||
{#each guide_slug as heading}
|
||||
<a
|
||||
class="subheading block thin-link -indent-2 ml-4 mr-2"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
href={heading.href}>{heading.text}</a
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -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"
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<MetaTags
|
||||
@ -49,16 +38,14 @@
|
||||
<div class="flex">
|
||||
<a
|
||||
class="subheading block thin-link mr-1 px-2 rounded-lg w-min border border-orange-500"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
href={heading.href}>{heading.text}</a
|
||||
>
|
||||
<p class="inline">🔥</p>
|
||||
</div>
|
||||
{:else}
|
||||
<a
|
||||
class="subheading block thin-link mr-2 px-2 rounded-lg"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
href={heading.href}>{heading.text}</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user