This is an automated email from the ASF dual-hosted git repository. yumeng pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
commit 3cb0ee53d0cdfdfd505842439f19c03c60e9ab6a Author: ZiyuTao <[email protected]> AuthorDate: Mon Sep 12 03:40:49 2022 +0800 feat: use case mobile --- src/components/Sections/Components.tsx | 29 +++++++++----------- src/components/Sections/UseCases.tsx | 48 ++++++++++++++++++---------------- src/components/Sections/WhyDevlake.tsx | 28 ++++++++++---------- src/css/custom.css | 5 +++- tailwind.config.js | 3 ++- 5 files changed, 59 insertions(+), 54 deletions(-) diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx index 3f3f23aa0..1febcde41 100644 --- a/src/components/Sections/Components.tsx +++ b/src/components/Sections/Components.tsx @@ -3,43 +3,40 @@ import ArrowRight from "@site/static/img/Homepage/arrow-right.svg"; export const TextTitle = ({ children }: { children: React.ReactNode }) => <span className="block font-inter - text-heading2 text-primary-800 font-semibold mb-[16px]"> + text-heading2 text-primary-800 font-semibold mb-[16px] + mobile:text-heading4 mobile:text-neutral-600 mobile:mb-2 mobile:mt-5"> {children} </span> export const H3Title = ({ children }: { children: React.ReactNode }) => <span className="block font-inter - text-heading3 text-primary-800 font-semibold mb-[24px]"> + text-heading3 text-primary-800 font-semibold mb-[24px]"> {children} </span> export const TextDescription = ({ children }: { children: React.ReactNode }) => - <p className="font-inter pr-[20px] - text-label18 text-neutral-500 "> + <div className="font-inter pr-[20px] mobile:pr-[0] + text-label18 text-neutral-500 + mobile:w-[260px] mobile:text-label14"> {children} - </p> + </div> export const TextLink = ({ link, children }: { link: string, children: React.ReactNode }) => - <a className="text-label16 text-secondary-500 flex items-center mt-[16px]" + <a className="text-label16 text-secondary-500 flex items-center mt-[16px] + mobile:hidden" href={link}>{children} <ArrowRight width={20} height={20} /> </a> export const TextSection = ({ children }: { children: React.ReactNode }) => - <div - className=" - text-start w-[448px] - mobile:w-auto - "> + <div className={`text-start mobile:text-center w-[448px] mobile:w-auto`}> {children} </div> export const SvgImg = ({ svg: Svg }: { svg: React.ComponentType<React.SVGProps<SVGSVGElement>> }) => - <div - className=" - w-auto h-auto - " - > + <div className=" + w-auto h-auto + " > <Svg role="img" /> </div> export const SectionImg = ({ src }: { src: string }) => <img src={src} alt="" className=" diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index 01f9f0b22..ce28c3b0f 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -14,30 +14,34 @@ function UCCard({ lead, title, desc, children }: { }) { return (<div className='use-case-card relative shadow-card overflow-hidden w-[460px] h-[468px] rounded-[16px] - mobile:w-auto + mobile:w-[312px] mobile:shadow-hide '> - <div className="flex items-center h-[228px] justify-center"> + <div className="flex items-center h-[228px] justify-center + mobile:h-auto mobile:mb-4"> {children} </div> - <div className="bg-white px-4 py-2 h-[240px]"> - <div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1">{lead}</div> - <div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1">{title}</div> - <div className="font-inter text-neutral-500 text-label18 font-normal pr-1">{desc}</div> + <div className="bg-white px-4 py-2 h-[240px] mobile:bg-transparent mobile:h-auto mobile:p-[0]"> + <div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1 + mobile:text-heading4 mobile:text-neutral-600 mobile:font-semibold mobile:mb-3">{lead}</div> + <div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1 + mobile:text-neutral-600 mobile:mb-3">{title}</div> + <div className="font-inter text-neutral-500 text-label18 font-normal pr-1 + mobile:text-label14 mobile:text-neutral-400">{desc}</div> </div> </div>) } const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className=" w-[240px] h-[180px] + mobile:w-[308px] mobile:h-[250px] " /> export function UseCases() { return (<div className="flex flex-col relative items-center - h-[1206px] mobile:h-auto"> + h-[1206px] mobile:h-auto mobile:bg-primary-100 mobile:pb-6"> <BG className='absolute z-0 mobile:hidden' /> - <span - className="section-title text-center mt-7" - >Use Cases</span> + <span className="section-title text-center mt-7 + mobile:mt-[0]">Use Cases</span> <div className="grid grid-cols-2 gap-x-[72px] gap-y-6 mobile:grid-cols-1"> <UCCard @@ -48,25 +52,25 @@ export function UseCases() { <UCIcon src={UC1} /> </UCCard> <UCCard - lead="Open-source Software Maintainers" - title="Contribution Analysis for Community Growth" - desc="Grow your community strategically by learning how developers participate, contribute and collaborate." + lead="Product Managers" + title="Dev Workflow Improvement" + desc="Align sprint planning with high-level goals and ensure the development progress is on track with metrics that help with improving the workflow." > - <UCIcon src={UC1} /> + <UCIcon src={UC2} /> </UCCard> <UCCard - lead="Open-source Software Maintainers" - title="Contribution Analysis for Community Growth" - desc="Grow your community strategically by learning how developers participate, contribute and collaborate." + lead="Tech Leads" + title="Bring Out the Best in Your Team" + desc="Gain insights into the development and delivery process. Remove blockers and risks to establish best practices." > - <UCIcon src={UC1} /> + <UCIcon src={UC3} /> </UCCard> <UCCard - lead="Open-source Software Maintainers" - title="Contribution Analysis for Community Growth" - desc="Grow your community strategically by learning how developers participate, contribute and collaborate." + lead="Data Engineers" + title="The Foundation to Build What You Want" + desc="Integrate user-defined data sources with DevLake and easily implement customized metrics and dashboards without reinventing the wheel." > - <UCIcon src={UC1} /> + <UCIcon src={UC4} /> </UCCard> </div> </div>) diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index 9ff3013b9..4142c7922 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -14,10 +14,11 @@ import Sup8 from "@site/static/img/Homepage/sup-8-ghaction.svg"; import Sup9 from "@site/static/img/Homepage/sup-9-glci.svg"; import SupA from "@site/static/img/Homepage/sup-A-feishu.png"; -function Feature({ children }: { children: React.ReactNode }) { +function Feature({ className, children }: { className?: string, children: React.ReactNode }) { return ( - <div className="flex w-full justify-between items-center - mobile:flex-col"> + <div className={`flex w-full justify-between items-center + mobile:text-center + mobile:flex-col ${className}`}> {children} </div> ); @@ -50,19 +51,17 @@ function Supports() { } export function WhyDevlake() { - return (<section className="flex flex-col flex-nowrap py-5 items-stretch"> + return (<section className="flex flex-col flex-nowrap py-5 items-stretch + mobile:py-[0px]"> <span - className="section-title text-center - mobile:text-heading2 mobile:leading-[32px]" + className="section-title text-center" > - Why Apache DevLake (Incubating) + Why Apache DevLake<span className="mobile:hidden"> (Incubating)</span> </span> <div - className=" - flex flex-col - px-[140px] mb-[72px] - space-y-7 - mobile:px-[0px] + className=" flex flex-col + px-[140px] mb-[72px] space-y-7 + mobile:px-[0px] mobile:space-y-6 mobile:mb-6 "> <Feature> <C.SectionImg src={WAD1} /> @@ -75,7 +74,7 @@ export function WhyDevlake() { </C.TextDescription> </C.TextSection> </Feature> - <Feature> + <Feature className="mobile:flex-col-reverse"> <C.TextSection> <C.TextTitle>Out-of-the-box Analysis</C.TextTitle> <C.TextDescription> @@ -90,9 +89,10 @@ export function WhyDevlake() { <C.SectionImg src={WAD3} /> <C.TextSection> <C.TextTitle>A Highly Flexible Framework</C.TextTitle> + {/* FIXME: A weird margin right happend here, didn't find solution yet */} <C.TextDescription> Easily extend DevLake to support your data sources, metrics, and dashboards with a flexible framework for data collection and transformation. - <br /> + <br className="mobile:hidden" /> <C.TextLink link="https://devlake.apache.org/docs/DataModels/DevLakeDomainLayerSchema";>Learn about DevLake’s data model</C.TextLink> </C.TextDescription> </C.TextSection> diff --git a/src/css/custom.css b/src/css/custom.css index 9b8bef00b..c61236557 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -48,6 +48,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { .section-title { @apply text-heading1 mb-[64px]; @apply text-primary-800 font-semibold; + @apply mobile:text-heading2 mobile:leading-[32px] mobile:text-neutral-600; + @apply mobile:py-6 mobile:mb-[0]; } .floating-link-icon { @@ -59,6 +61,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { } .use-case-card { - background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%); + background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%); + @apply mobile:bg-none; } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 788fb62d2..d4ffb9be9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -52,7 +52,7 @@ module.exports = { heading2: ['24px', { lineHeight: '30px' }], heading3: ['20px', { lineHeight: '25px' }], heading4: ['16px', { lineHeight: '20px' }], - label14: ['14px', { lineHeight: 1.43 }], + label14: ['14px', { lineHeight: '20px' }], label16: ['16px', { lineHeight: '24px' }], label18: ['18px', { lineHeight: '24px' }], label24: ['24px', { lineHeight: '32px' }], @@ -69,6 +69,7 @@ module.exports = { lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)', high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)', card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)', + hide: '0px 0px 0px 0px rgba(0, 0, 0, 0)', }, }, },
