mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Better docs navigation on mobile (#3112)
* fix responsiveness of embedded lineplot * regenerate notebook * nav button and sidebar * better styling * fix broken quickstart link * fix styling on close button * styling * undo assets change * changelog * refactor code --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Ali Abdalla
GitHub
parent
1306ab3865
commit
0773205fdb
@ -99,6 +99,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3101](https://git
|
||||
## Documentation Changes:
|
||||
* Update chatbot guide to include blocks demo and markdown support section by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3023](https://github.com/gradio-app/gradio/pull/3023)
|
||||
- Fix a broken link in the Quick Start guide, by [@cakiki](https://github.com/cakiki) in [PR 3109](https://github.com/gradio-app/gradio/pull/3109)
|
||||
- Better docs navigation on mobile by [@aliabd](https://github.com/aliabd) in [PR 3112](https://github.com/gradio-app/gradio/pull/3112)
|
||||
- Add a guide on using Gradio with [Comet](https://comet.com/), by [@DN6](https://github.com/DN6/) in [PR 3058](https://github.com/gradio-app/gradio/pull/3058)
|
||||
|
||||
## Testing and Infrastructure Changes:
|
||||
|
||||
@ -1 +1 @@
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: lineplot_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", " gr.LinePlot(\n", " data.stocks(),\n", " x=\"date\",\n", " y=\"price\",\n", " color=\"symbol\",\n", " color_legend_position=\"bottom\",\n", " title=\"Stock Prices\",\n", " tooltip=[\"date\", \"price\", \"symbol\"],\n", " height=300,\n", " width=500,\n", " show_label=False,\n", " ).style(\n", " container=False,\n", " )\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: lineplot_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", " gr.LinePlot(\n", " data.stocks(),\n", " x=\"date\",\n", " y=\"price\",\n", " color=\"symbol\",\n", " color_legend_position=\"bottom\",\n", " title=\"Stock Prices\",\n", " tooltip=[\"date\", \"price\", \"symbol\"],\n", " height=300,\n", " width=300,\n", " show_label=False,\n", " ).style(\n", " container=False,\n", " )\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
@ -13,7 +13,7 @@ with gr.Blocks(css=css) as demo:
|
||||
title="Stock Prices",
|
||||
tooltip=["date", "price", "symbol"],
|
||||
height=300,
|
||||
width=500,
|
||||
width=300,
|
||||
show_label=False,
|
||||
).style(
|
||||
container=False,
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<rect x="-7" y="4" width="14" height="2"></rect>
|
||||
</svg>
|
||||
<nav class="hidden w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8">
|
||||
<a class="thin-link flex items-center gap-3" href="/getting_started"><span>⚡</span> <span>Quickstart</span>
|
||||
<a class="thin-link flex items-center gap-3" href="/quickstart"><span>⚡</span> <span>Quickstart</span>
|
||||
</a>
|
||||
<a class="thin-link flex items-center gap-3" href="/docs"><span>✍️</span> <span>Docs</span>
|
||||
</a>
|
||||
@ -71,10 +71,15 @@
|
||||
</nav>
|
||||
</div>
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<div class="navigation pb-4 h-screen leading-relaxed sticky top-0 text-md overflow-y-auto hidden lg:block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
|
||||
style="width: 16.666667%;
|
||||
min-width: 16.666667%;">
|
||||
<div class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10">
|
||||
|
||||
<section class="top-0 fixed -ml-4 flex items-center p-4 hidden rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden" id="menu-bar">
|
||||
<button type="button" class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" onclick="document.getElementById('mobile-nav').classList.remove('hidden')">
|
||||
<svg width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="navigation mobile-nav overflow-y-auto hidden fixed backdrop-blur-lg z-50 bg-gray-200/50 pr-6 pl-4 py-4 -ml-4 h-full inset-0 w-5/6 lg:inset-auto lg:h-auto lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12 lg:min-w-2/12" id="mobile-nav">
|
||||
<div class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block">
|
||||
<input id="search"
|
||||
type="search"
|
||||
class="w-4/5 m-4 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
|
||||
@ -83,6 +88,9 @@
|
||||
onkeyup="search(this.value);"
|
||||
onsearch="search(this.value);"/>
|
||||
</div>
|
||||
<button type="button" class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden" tabindex="0" onclick="document.getElementById('mobile-nav').classList.add('hidden');">
|
||||
<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"><path d="M0 0L10 10M10 0L0 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
|
||||
</button>
|
||||
<a class="link current-nav-link px-4 mb-2 block" href="#building_demos">Building Demos</a>
|
||||
<a class="thin-link px-4 block" href="#interface">Interface</a>
|
||||
<div class="sub-links hidden" hash="#interface">
|
||||
@ -144,7 +152,7 @@
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left">
|
||||
New to Gradio? Start here: <a class="link" href="/getting_started">Getting Started</a>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart">Getting Started</a>
|
||||
</p>
|
||||
<p class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right">
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
@ -159,7 +167,8 @@
|
||||
<pre class="language-bash" style="width: 97%"><code class="language-bash">pip install {{ gradio_wheel_url }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<section id="building_demos" class="pt-2 flex flex-col gap-10 mb-8">
|
||||
<section class="pt-2">
|
||||
<h2 class="text-4xl font-light mb-2 pt-2 text-orange-500"
|
||||
@ -385,8 +394,20 @@
|
||||
}
|
||||
|
||||
let mainNavLinks = document.querySelectorAll(".navigation a");
|
||||
let mainNavLinksMobile = document.querySelectorAll("#mobile-nav a");
|
||||
let menuBar = document.querySelector("#menu-bar");
|
||||
let mobileNav = document.querySelector("#mobile-nav");
|
||||
|
||||
mainNavLinksMobile.forEach(link => {
|
||||
link.onclick = function() {
|
||||
mobileNav.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", event => {
|
||||
menuBar.classList.remove("hidden");
|
||||
let fromTop = window.scrollY;
|
||||
|
||||
mainNavLinks.forEach(link => {
|
||||
let section = document.querySelector(link.hash);
|
||||
if (
|
||||
@ -398,6 +419,19 @@
|
||||
link.classList.remove("current-nav-link");
|
||||
}
|
||||
});
|
||||
|
||||
mainNavLinksMobile.forEach(link => {
|
||||
let section = document.querySelector(link.hash);
|
||||
if (
|
||||
section.offsetTop <= fromTop &&
|
||||
section.offsetTop + section.offsetHeight > fromTop
|
||||
) {
|
||||
link.classList.add("current-nav-link");
|
||||
} else {
|
||||
link.classList.remove("current-nav-link");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
let mainNavSubLinks = document.querySelectorAll(".navigation .sub-links");
|
||||
|
||||
@ -27,6 +27,9 @@ module.exports = {
|
||||
900: '#5C2D00',
|
||||
},
|
||||
},
|
||||
minWidth: {
|
||||
'2/12': '16.666667%',
|
||||
},
|
||||
},
|
||||
},
|
||||
mode: 'jit',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user