This is an automated email from the ASF dual-hosted git repository. yumeng pushed a commit to branch revert-199-overhaul/new-vi in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
commit 20a315e923497820cebffad4864efb2765fcd76c Author: Yumeng Wang <[email protected]> AuthorDate: Wed Sep 14 18:39:24 2022 +0800 Revert "feat: use case mobile" This reverts commit 0d90f7efeb8606ef4160fe962c78e2695051ae47. --- 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, 54 insertions(+), 59 deletions(-) diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx index 1febcde41..3f3f23aa0 100644 --- a/src/components/Sections/Components.tsx +++ b/src/components/Sections/Components.tsx @@ -3,40 +3,43 @@ 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] - mobile:text-heading4 mobile:text-neutral-600 mobile:mb-2 mobile:mt-5"> + text-heading2 text-primary-800 font-semibold mb-[16px]"> {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 }) => - <div className="font-inter pr-[20px] mobile:pr-[0] - text-label18 text-neutral-500 - mobile:w-[260px] mobile:text-label14"> + <p className="font-inter pr-[20px] + text-label18 text-neutral-500 "> {children} - </div> + </p> export const TextLink = ({ link, children }: { link: string, children: React.ReactNode }) => - <a className="text-label16 text-secondary-500 flex items-center mt-[16px] - mobile:hidden" + <a className="text-label16 text-secondary-500 flex items-center mt-[16px]" href={link}>{children} <ArrowRight width={20} height={20} /> </a> export const TextSection = ({ children }: { children: React.ReactNode }) => - <div className={`text-start mobile:text-center w-[448px] mobile:w-auto`}> + <div + className=" + text-start 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 ce28c3b0f..01f9f0b22 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -14,34 +14,30 @@ 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-[312px] mobile:shadow-hide + mobile:w-auto '> - <div className="flex items-center h-[228px] justify-center - mobile:h-auto mobile:mb-4"> + <div className="flex items-center h-[228px] justify-center"> {children} </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 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> </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 mobile:bg-primary-100 mobile:pb-6"> + h-[1206px] mobile:h-auto"> <BG className='absolute z-0 mobile:hidden' /> - <span className="section-title text-center mt-7 - mobile:mt-[0]">Use Cases</span> + <span + className="section-title text-center mt-7" + >Use Cases</span> <div className="grid grid-cols-2 gap-x-[72px] gap-y-6 mobile:grid-cols-1"> <UCCard @@ -52,25 +48,25 @@ export function UseCases() { <UCIcon src={UC1} /> </UCCard> <UCCard - 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." + lead="Open-source Software Maintainers" + title="Contribution Analysis for Community Growth" + desc="Grow your community strategically by learning how developers participate, contribute and collaborate." > - <UCIcon src={UC2} /> + <UCIcon src={UC1} /> </UCCard> <UCCard - 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." + lead="Open-source Software Maintainers" + title="Contribution Analysis for Community Growth" + desc="Grow your community strategically by learning how developers participate, contribute and collaborate." > - <UCIcon src={UC3} /> + <UCIcon src={UC1} /> </UCCard> <UCCard - 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." + lead="Open-source Software Maintainers" + title="Contribution Analysis for Community Growth" + desc="Grow your community strategically by learning how developers participate, contribute and collaborate." > - <UCIcon src={UC4} /> + <UCIcon src={UC1} /> </UCCard> </div> </div>) diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index 4142c7922..9ff3013b9 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -14,11 +14,10 @@ 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({ className, children }: { className?: string, children: React.ReactNode }) { +function Feature({ children }: { children: React.ReactNode }) { return ( - <div className={`flex w-full justify-between items-center - mobile:text-center - mobile:flex-col ${className}`}> + <div className="flex w-full justify-between items-center + mobile:flex-col"> {children} </div> ); @@ -51,17 +50,19 @@ function Supports() { } export function WhyDevlake() { - return (<section className="flex flex-col flex-nowrap py-5 items-stretch - mobile:py-[0px]"> + return (<section className="flex flex-col flex-nowrap py-5 items-stretch"> <span - className="section-title text-center" + className="section-title text-center + mobile:text-heading2 mobile:leading-[32px]" > - Why Apache DevLake<span className="mobile:hidden"> (Incubating)</span> + Why Apache DevLake (Incubating) </span> <div - className=" flex flex-col - px-[140px] mb-[72px] space-y-7 - mobile:px-[0px] mobile:space-y-6 mobile:mb-6 + className=" + flex flex-col + px-[140px] mb-[72px] + space-y-7 + mobile:px-[0px] "> <Feature> <C.SectionImg src={WAD1} /> @@ -74,7 +75,7 @@ export function WhyDevlake() { </C.TextDescription> </C.TextSection> </Feature> - <Feature className="mobile:flex-col-reverse"> + <Feature> <C.TextSection> <C.TextTitle>Out-of-the-box Analysis</C.TextTitle> <C.TextDescription> @@ -89,10 +90,9 @@ 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 className="mobile:hidden" /> + <br /> <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 c61236557..9b8bef00b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -48,8 +48,6 @@ 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 { @@ -61,7 +59,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { } .use-case-card { - background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%); - @apply mobile:bg-none; + background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%); } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index d4ffb9be9..788fb62d2 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: '20px' }], + label14: ['14px', { lineHeight: 1.43 }], label16: ['16px', { lineHeight: '24px' }], label18: ['18px', { lineHeight: '24px' }], label24: ['24px', { lineHeight: '32px' }], @@ -69,7 +69,6 @@ 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)', }, }, },
