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

place toast message at the top of the screen on mobile (#4796)

Browse Source
This commit is contained in:
pngwn 2023-07-06 09:12:46 +01:00 committed by GitHub
parent b8eb481473
commit 726115785b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -35,6 +35,7 @@
- Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691).
- Scroll top when clicking "View API" in spaces by [@pngwn](https://github.com/pngwn) in [PR 4714](https://github.com/gradio-app/gradio/pull/4714)
- Fix bug where `show_label` was hiding the entire component for `gr.Label` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4713](https://github.com/gradio-app/gradio/pull/4713)
- Place toast messages at the top of the screen by [@pngwn](https://github.com/pngwn) in [PR 4796](https://github.com/gradio-app/gradio/pull/4796)
## Other Changes:

11
js/app/src/components/StatusTracker/Toast.svelte
View File

@ -11,8 +11,7 @@
function scroll_to_top(_messages: ToastMessage[]): void {
if (_messages.length > 0) {
if ("parentIFrame" in window) {
let is_large = window.matchMedia("(min-width: 640px)").matches;
window.parentIFrame?.scrollTo(0, is_large ? 0 : 999999);
window.parentIFrame?.scrollTo(0, 0);
}
}
}
@ -30,9 +29,10 @@
.toast-wrap {
display: flex;
position: fixed;
top: var(--size-4);
right: var(--size-4);
bottom: var(--size-4);
flex-direction: column-reverse;
flex-direction: column;
align-items: end;
gap: var(--size-2);
z-index: var(--layer-top);
@ -41,9 +41,6 @@
@media (--screen-sm) {
.toast-wrap {
top: var(--size-4);
bottom: unset;
flex-direction: column;
width: calc(var(--size-96) + var(--size-10));
}
}