You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by yu...@apache.org on 2022/09/15 03:14:50 UTC
[incubator-devlake-website] 12/25: fix: mobile adapt header
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 e5b8bd8293eae0163cc4b64769a5cbaf335be302
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Mon Sep 12 02:47:07 2022 +0800
fix: mobile adapt header
---
src/components/Sections/Components.tsx | 4 ++-
src/components/Sections/HomepageHeader.tsx | 57 ++++++++++++++++++++----------
src/components/Sections/JoinCommunity.tsx | 8 +++--
src/components/Sections/UseCases.tsx | 1 +
src/components/Sections/WhyDevlake.tsx | 8 +++--
5 files changed, 52 insertions(+), 26 deletions(-)
diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index ab2689d03..3f3f23aa0 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -29,6 +29,7 @@ export const TextSection = ({ children }: { children: React.ReactNode }) =>
<div
className="
text-start w-[448px]
+ mobile:w-auto
">
{children}
</div>
@@ -43,6 +44,7 @@ export const SvgImg = ({ svg: Svg }: { svg: React.ComponentType<React.SVGProps<S
</div>
export const SectionImg = ({ src }: { src: string }) => <img src={src} alt="" className="
w-[384px] h-[288px]
+ mobile:w-[160px] mobile:h-[124px]
" />
export const InlineLink = ({ link, children }: { link: string, children: React.ReactNode }) =>
@@ -51,7 +53,7 @@ export const InlineLink = ({ link, children }: { link: string, children: React.R
</a>
export const BreakLine = () => <div className="
- h-[2px] bg-neutral-100 mx-[140px]
+ h-[2px] bg-neutral-100 mx-[140px] mobile:hidden
" />
export const Sup = ({ children, title }: { children: React.ReactNode, title: string }) =>
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index 90f78767e..a24fc2c5f 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -9,47 +9,66 @@ export function HomepageHeader() {
<header
className="relative
pt-[64px] pb-[90px] px-[80px]
- flex
- justify-between items-center"
+ mobile:pt-5 mobile:px-[32px] mobile:pb-[0px]
+ flex mobile:flex-col
+ justify-between items-center
+ mobile:bg-primary-100"
>
<HeaderBgSvg className='
absolute top-[0px] left-[0px]
mobile:hidden' />
- <div
- className=" z-10
+ <div className=" z-10
flex flex-col flex-nowrap
justify-start w-[590px]
- "
- >
+ mobile:flex-wrap mobile:w-auto
+ mobile:text-center mobile:justify-center
+ " >
+ <div className="hidden mobile:block
+ text-primary text-center
+ font-bold font-inter
+ text-heading2
+ mb-[16px]">
+ Apache DevLake (Incubating)
+ </div>
<div
className="text-primary
font-bold font-inter
text-heading0
- mb-[32px]"
+ mobile:text-label16 mobile:leading-[20px]
+ mobile:font-normal mobile:text-center
+ mb-[32px] mobile:mb-3"
>
- Debug Your Software
- <br />
+ Debug Your Software{' '}
+ <br className="mobile:hidden" />
Engineering Process
</div>
- <div
- className="text-primary-800
- text-label24 font-inter font-normal
- mb-[48px]
- "
+ <Link
+ className="hidden primary-button mobile:flex w-[160px] h-5 p-[0px]
+ whitespace-nowrap mx-auto rounded-[5px] mb-4"
+ to="https://devlake.apache.org/docs/GettingStarted"
>
- Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
+ Getting Started
+ </Link>
+ <HeaderSvg className="hidden mobile:block
+ w-[240px] h-[240px] mx-auto mb-5" />
+ <div className="text-primary-800
+ text-label24 font-inter font-normal mb-[48px]
+ mobile:text-heading3 mobile:font-semibold
+ mobile:text-primary-500
+ ">
+ <span className="hidden mobile:inline">I</span>
+ <span className="mobile:hidden">Apache DevLake (Incubating) i</span>ngests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
</div>
<Link
- className="primary-button"
+ className="primary-button mobile:hidden"
to="https://devlake.apache.org/docs/GettingStarted"
>
Getting Started
</Link>
</div>
<HeaderSvg className="
- w-auto h-auto z-10
- "
- />
+ w-auto h-auto z-10 mobile:hidden
+ "/>
</header>
);
}
\ No newline at end of file
diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx
index 40b91f004..b95807887 100644
--- a/src/components/Sections/JoinCommunity.tsx
+++ b/src/components/Sections/JoinCommunity.tsx
@@ -5,9 +5,11 @@ import Join from "@site/static/img/Homepage/Join.png";
import { InlineLink } from "./Components";
export function JoinCommunity() {
- return (<div className="flex justify-between
- my-[72px] mx-[140px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter">
- <div className="w-[600px] pr-3">
+ return (<div className="flex justify-between mobile:flex-col-reverse
+ my-[72px] mx-[140px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter
+ mobile:m-[0px] mobile:rounded-none mobile:p-[0px]">
+ <div className="w-[600px] pr-3
+ mobile:w-auto">
<div className="text-heading1 mb-3 text-primary-800 font-semibold">Join the Community</div>
<div className="text-label18 mb-4 text-neutral-500">Join our community to stay up to date on the latest news, ask and answer questions, make contributions, and connect with fellow community members!</div>
<div className="text-label16 space-y-[8px] flex flex-col">
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index 030d275ff..01f9f0b22 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -14,6 +14,7 @@ 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
'>
<div className="flex items-center h-[228px] justify-center">
{children}
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index ff71a1814..9ff3013b9 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -16,7 +16,8 @@ import SupA from "@site/static/img/Homepage/sup-A-feishu.png";
function Feature({ children }: { children: React.ReactNode }) {
return (
- <div className="flex w-full justify-between items-center">
+ <div className="flex w-full justify-between items-center
+ mobile:flex-col">
{children}
</div>
);
@@ -25,7 +26,7 @@ function Feature({ children }: { children: React.ReactNode }) {
function Supports() {
return (
<div className=" flex flex-col items-center
- mt-[48px] mb-[72px]
+ mt-[48px] mb-[72px] mobile:hidden
">
<C.H3Title>Supported Data Sources</C.H3Title>
<div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]">
@@ -51,7 +52,8 @@ function Supports() {
export function WhyDevlake() {
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 (Incubating)
</span>