Skip to content

Commit

Permalink
enhance web responsive design for mobile (#3010)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SYangster
SYangster authored Oct 8, 2024
1 parent 53e65e0 commit 6f132de
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 225 deletions.
16 changes: 7 additions & 9 deletions web/src/components/gettingStarted.astro
View file
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
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
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

0 comments on commit 6f132de

Please sign in to comment.