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

Playground: Better spacing on navbar (#6021)

Browse Source 
* navbar spacing

* add changeset

* add collapse

* fix collapse

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Ali Abdalla 2023-10-19 11:48:19 -07:00 committed by GitHub
parent d186165c14
commit 86cff0c293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/whole-women-clean.md Normal file
View File

@ -0,0 +1,5 @@
---
"website": minor
---
feat:Playground: Better spacing on navbar

13
js/_website/src/routes/playground/+page.svelte
View File

@ -17,6 +17,10 @@
let all_demos = data.demos_by_category.flatMap((category) => category.demos);
let current_selection = all_demos[0].name;
let show_nav = true;
$: show_nav;
</script>
<MetaTags
@ -45,7 +49,13 @@
</p>
<div class="flex w-full border border-gray-200 shadow-xl rounded-xl p-4 mb-3">
<div class="mr-4 overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip w-3/12 xl:w-[12%]" style="height: 70vh; word-break: normal; overflow-wrap: break-word; white-space:nowrap">
<div class:w-10={!show_nav} class:xl:w-10={!show_nav} class:w-[33%]={show_nav} class:xl:w-[15%]={show_nav} class="mr-4 overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip" style="height: 70vh; word-break: normal; overflow-wrap: break-word; white-space:nowrap">
<button
on:click={() => (show_nav = !show_nav)}
class="float-right p-1 px-2 text-gray-600"
>{#if show_nav}&larr;{:else}&rarr;{/if}</button
>
{#if show_nav}
{#each data.demos_by_category as { category, demos } (category)}
<p class="px-4 my-2">{category}</p>
{#each demos as demo, i}
@ -57,6 +67,7 @@
>
{/each}
{/each}
{/if}
</div>
<DemosLite