mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Sidebar fixed positioning (#10737)

Browse Source 
* return back to fixed positioning

* add changeset

* fix mobile double sidebars

* add changeset

* remove sidebar embedded demo

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Dawood Khan 2025-03-06 11:13:31 -05:00 committed by GitHub
parent a89fa288f4
commit 1cf992b042
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/six-lands-sink.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/sidebar": patch
"gradio": patch
---
feat:Sidebar fixed positioning

1
guides/03_building-with-blocks/02_controlling-layout.md
View File

@ -98,7 +98,6 @@ The sidebar is a collapsible panel that renders child components on the left sid
For example:
$code_blocks_sidebar
$demo_blocks_sidebar
Learn more about [Sidebar](https://gradio.app/docs/gradio/sidebar) in the docs.

76
js/sidebar/shared/Sidebar.svelte
View File

@ -16,29 +16,23 @@
let overlap_amount = 0;
let width_css = typeof width === "number" ? `${width}px` : width;
let prefersReducedMotion: boolean;
// Check if the sidebar overlaps with the main content
function check_overlap(): void {
if (!sidebar_div.closest(".gradio-container")) return;
const parent_rect = sidebar_div
.closest(".gradio-container")
?.getBoundingClientRect();
if (!sidebar_div.closest(".wrap")) return;
const parent_rect = sidebar_div.closest(".wrap")?.getBoundingClientRect();
if (!parent_rect) return;
const parentHeight = parent_rect.height;
sidebar_div.style.height = `${parentHeight}px`;
const sidebar_rect = sidebar_div.getBoundingClientRect();
const available_space =
position === "left"
? parent_rect.left
: window.innerWidth - parent_rect.right;
overlap_amount = Math.max(0, sidebar_rect.width - available_space);
overlap_amount = Math.max(0, sidebar_rect.width - available_space + 30);
}
onMount(() => {
sidebar_div.closest(".gradio-container")?.classList.add("sidebar-parent");
sidebar_div.closest(".wrap")?.classList.add("sidebar-parent");
check_overlap();
window.addEventListener("resize", check_overlap);
const update_parent_overlap = (): void => {
@ -49,16 +43,12 @@
};
update_parent_overlap();
mounted = true;
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
prefersReducedMotion = mediaQuery.matches;
const updateMotionPreference = (e: MediaQueryListEvent): void => {
prefersReducedMotion = e.matches;
};
mediaQuery.addEventListener("change", updateMotionPreference);
return () => {
window.removeEventListener("resize", check_overlap);
mediaQuery.removeEventListener("change", updateMotionPreference);
@ -76,7 +66,7 @@
class:right={position === "right"}
class:reduce-motion={prefersReducedMotion}
bind:this={sidebar_div}
style="width: {width_css}; {position}: calc({width_css} * -1.10)"
style="width: {width_css}; {position}: calc({width_css} * -1)"
>
<button
on:click={() => {
@ -104,30 +94,20 @@
@media (max-width: 768px) {
.sidebar {
width: 100vw !important;
left: -110vw !important;
right: auto !important;
position: absolute !important;
top: calc(var(--size-4) * -1);
height: 100vh !important;
}
.sidebar:not(.right) {
left: -100vw !important;
}
.sidebar.right {
right: -100vw !important;
}
.sidebar:not(.reduce-motion) {
transition: transform 0.3s ease-in-out !important;
}
.sidebar.right {
left: auto !important;
right: -110vw !important;
}
.sidebar.open {
transform: translateX(100vw) !important;
}
.sidebar.open.right {
transform: translateX(-100vw) !important;
}
:global(.sidebar-parent) {
padding-left: 0 !important;
padding-right: 0 !important;
@ -137,27 +117,18 @@
padding-left: 0 !important;
padding-right: 0 !important;
}
.sidebar.right .toggle-button {
left: calc(var(--size-8) * -1) !important;
right: auto !important;
transform: rotate(180deg) !important;
}
.sidebar.open.right .toggle-button {
left: auto !important;
right: var(--size-2-5) !important;
transform: rotate(0deg) !important;
.sidebar.open {
z-index: 1001 !important;
}
}
:global(.sidebar-parent) {
display: flex !important;
position: relative;
/* padding-left: 0 !important; */
padding-left: 0;
padding-right: 0;
}
:global(.sidebar-parent:not(:has(.reduce-motion))) {
:global(.sidebar-parent:not(.reduce-motion)) {
transition:
padding-left 0.3s ease-in-out,
padding-right 0.3s ease-in-out;
@ -174,11 +145,11 @@
.sidebar {
display: flex;
flex-direction: column;
position: absolute;
top: calc(var(--size-4) * -1);
position: fixed;
top: 0;
height: 100%;
background-color: var(--background-fill-secondary);
transform: translateX(0);
transform: translateX(0%);
z-index: 1000;
}
@ -187,10 +158,12 @@
}
.sidebar.open:not(.right) {
transform: translateX(100%);
box-shadow: var(--size-1) 0 var(--size-2) rgba(100, 89, 89, 0.1);
}
.sidebar.open.right {
transform: translateX(-100%);
box-shadow: calc(var(--size-1) * -1) 0 var(--size-2) rgba(100, 89, 89, 0.1);
}
@ -204,7 +177,6 @@
display: flex;
align-items: center;
justify-content: center;
transition: none;
width: var(--size-8);
height: var(--size-8);
z-index: 1001;