Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance web responsive design for mobile #3010

Merged
merged 2 commits into from
Oct 8, 2024
Merged

Enhance web responsive design for mobile #3010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c0cb01
enhance web responsive design for mobile
SYangster Oct 8, 2024
80eb1fb
Merge branch 'main' into web_responsive
SYangster Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions web/src/components/gettingStarted.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const series = [

<!-- FLARE Walkthrough: CIFAR-10 / End-to-End: Kaplan-Meier -->
<div class="mt-5 mb-2 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap -mb-px text-xl font-medium text-center place-content-center space-x-24" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-nvidia hover:text-nvidia dark:text-nvidia-light dark:hover:text-nvidia-light border-nvidia dark:border-nvidia-light" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-transparent hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
<ul class="flex flex-wrap -mb-px text-xl font-medium text-center place-content-center lg:space-x-24" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-nvidia hover:text-nvidia dark:text-nvidia-light dark:hover:text-nvidia-light border-nvidia dark:border-nvidia-light" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-transparent hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
<li class="me-2" role="presentation">
<button class="inline-block p-4 border-b-2 rounded-t-lg font-bold hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="walkthrough-tab" data-tabs-target="#series0" type="button" role="tab" aria-controls="settings" aria-selected="false">Walkthrough: CIFAR-10</button>
</li>
Expand All @@ -124,7 +124,7 @@ const series = [
{
series.map((item, index) => (
<div id={"series" + index}>
<div class="glide px-20 py-8 bg-gray-50 bg-opacity-60 rounded-3xl" role="tabpanel">
<div class="glide px-8 lg:px-20 py-8 bg-gray-50 bg-opacity-60 rounded-3xl" role="tabpanel">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
{
Expand Down Expand Up @@ -175,11 +175,9 @@ const series = [
</div>
<!-- Right Carousel Arrow -->
<button class="glide__arrow glide__arrow--right right-0 shadow-none border-none" data-glide-dir=">">
<div class="h-14 w-14 flex justify-center items-center">
<svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m9 5 7 7-7 7"/>
</svg>
</div>
<svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m9 5 7 7-7 7"/>
</svg>
</button>
</div>
</div>
Expand All @@ -189,7 +187,7 @@ const series = [
{
item.map((card) => (
<div id={"series" + index + card.id + "-video"} class="mt-20 flex flex-wrap place-content-center hidden">
<video class="h-3/4 w-3/4" controls="controls">
<video class="lg:h-3/4 lg:w-3/4" controls="controls">
<source src={card.video} type="video/mp4">
</video>
</div>
Expand Down Expand Up @@ -217,7 +215,7 @@ const series = [
startAt: 0,
perView: 3,
gap: 32,
peek: {before: 0, after: 45},
peek: {before: 0, after: 48},
dragThreshold: true,
breakpoints: {
1280: {
Expand Down
10 changes: 5 additions & 5 deletions web/src/components/hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,22 @@ const base_url = import.meta.env.BASE_URL;
enables platform developers to build a secure, privacy-preserving
offering for a distributed multi-party collaboration.
</p>
<div class="mt-10 mb-10 flex items-center gap-x-4">
<div class="mt-10 mb-10 items-center space-x-1">
<a
href="https://nvflare.readthedocs.io/en/main/index.html"
class="rounded-md bg-nvidia px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
class="inline-flex rounded-md bg-nvidia px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
>Documentation</a
>
<a
href="catalog"
class="rounded-md bg-clear ring-inset ring-2 ring-gray-300 px-3.5 py-2.5 text-sm font-semibold text-gray-200 shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
class="inline-flex whitespace-nowrap rounded-md bg-clear ring-inset ring-2 ring-gray-300 px-3.5 py-2.5 text-sm font-semibold text-gray-200 shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
>Tutorial Catalog</a
>
<a
href=`https://github.com/NVIDIA/NVFlare/tree/${gh_branch}`
class="text-sm font-semibold leading-6 text-gray-200 hover:text-neutral-100"
class="inline-flex text-sm font-semibold leading-6 text-gray-200 hover:text-neutral-100 py-2.5 align-middle"
>
<span id="default-message" class="inline-flex px-3.5 py-2.5">
<span id="default-message" class="inline-flex py-2.5">
<svg class="invert w-6 h-6 text-black dark:text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/series.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ const series_list = [
<div class="mt-20 max-w-[1500px] mx-auto py-4 text-left flex flex-col md:flex-row">

<!-- Series Glider -->
<div id="series-glide" class="w-[400px] glide px-2 pb-8 rounded-3xl mt-12">
<div id="series-glide" class="lg:w-[400px] glide px-2 lg:pb-8 rounded-3xl mt-12">

<div class="glide__track" data-glide-el="track">
<ul id="series-slides" class="glide__slides">
Expand Down Expand Up @@ -369,7 +369,7 @@ const series_list = [
{series_list.map((series, series_index) => (
<div id={"series"+series.id+"-content"} class="hidden">
{series.subseries_list.map((subseries, index) => (
<div id={"subseries-content"+subseries.id} class="flex flex-col m-auto p-auto w-[925px] mt-12">
<div id={"subseries-content"+subseries.id} class="flex flex-col m-auto p-auto lg:w-[925px] lg:mt-12">
<div class="flex overflow-x-auto pb-4 hide-scroll-bar">
<div class="flex flex-nowrap ml-4 ">
{
Expand Down
Loading
Loading