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:55 UTC
[incubator-devlake-website] 17/25: feat: feature section mobile adapt
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 a81b6d4344af64b6a18426a33dec91bed9997bf8
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Wed Sep 14 16:32:07 2022 +0800
feat: feature section mobile adapt
---
src/components/Sections/Components.tsx | 19 +++++++++++--------
src/components/Sections/HomepageHeader.tsx | 2 +-
src/components/Sections/UseCases.tsx | 2 +-
src/components/Sections/WhyDevlake.tsx | 28 ++++++++++++++--------------
src/css/custom.css | 4 ++--
src/pages/index.js | 3 ++-
tailwind.config.js | 2 +-
7 files changed, 32 insertions(+), 28 deletions(-)
diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index eb658ce03..96131cb70 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -4,7 +4,7 @@ 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">
+ mobile:text-heading4 sm:mb-2 sm:mt-5">
{children}
</span>
@@ -17,13 +17,13 @@ export const H3Title = ({ children }: { children: React.ReactNode }) =>
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">
+ mobile:text-label16 mobile:text-start">
{children}
</div>
export const TextLink = ({ link, children }: { link: string, children: React.ReactNode }) =>
<a className="text-label16 text-secondary-500 flex items-center mt-[16px]
- mobile:hidden"
+ mobile:justify-center hover:text-secondary-500"
href={link}>{children}
<ArrowRight width={20} height={20} />
</a>
@@ -41,7 +41,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]
+ mobile:w-[200px] mobile:h-[150px]
" />
export const InlineLink = ({ link, children }: { link: string, children: React.ReactNode }) =>
@@ -50,17 +50,20 @@ export const InlineLink = ({ link, children }: { link: string, children: React.R
</a>
export const BreakLine = () => <div className="
- h-[2px] bg-neutral-100 mobile:hidden
+ h-[2px] bg-neutral-100
" />
export const Sup = ({ children, title }: { children: React.ReactNode, title: string }) =>
- <span className="w-[100px] flex flex-col items-center">
+ <span className="w-[100px] flex flex-col items-center
+ sm:w-[60px]">
{children}
- <span className="font-inter text-label14
- flex items-center h-[24px]
+ <span className="font-inter text-label14 text-center
+ flex h-[24px] text-neutral-500 mt-[4px]
+ sm:text-[12px] sm:leading-[12px] sm:mt-1
">{title}</span>
</span>
export const SupImg = ({ src }: { src: string }) =>
<img src={src} className='
w-[80px] h-[80px]
+ sm:w-[48px] sm:h-[48px]
'/>
\ No newline at end of file
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index 36acffd7b..64864764f 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -42,7 +42,7 @@ export function HomepageHeader() {
</div>
<div className="text-primary-800
text-label24 font-inter font-normal mb-[48px]
- mobile:text-label16 mobile:leading-[22px] mobile:text-start mobile:mb-3
+ mobile:text-label16 mobile:text-start mobile:mb-3
">
Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
</div>
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index 7e1165a10..6f0912223 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -63,7 +63,7 @@ export function UseCases() {
</UCCard>
<UCCard
lead="Tech Leads"
- title="Bring Out the Best in Your Team"
+ 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={UC3} />
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 76415e284..f3c18823e 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -17,7 +17,6 @@ import SupA from "@site/static/img/Homepage/sup-A-feishu.png";
function Feature({ className, children }: { className?: string, children: React.ReactNode }) {
return (
<div className={`flex w-full justify-between items-center
- mobile:text-center
mobile:flex-col ${className}`}>
{children}
</div>
@@ -27,23 +26,24 @@ function Feature({ className, children }: { className?: string, children: React.
function Supports() {
return (
<div className=" flex flex-col items-center
- mt-[48px] mb-[72px] mobile:hidden
+ mt-[48px] mb-[72px]
">
<C.H3Title>Supported Data Sources</C.H3Title>
- <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]">
+ <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]
+ sm:gap-x-1">
<C.Sup title="Jira"><C.SupImg src={Sup1} /></C.Sup>
- <C.Sup title="TAPD"><Sup2 /></C.Sup>
- <C.Sup title="GitHub"><Sup3 /></C.Sup>
- <C.Sup title="GitLab"><Sup4 /></C.Sup>
- <C.Sup title="BitBucket"><Sup5 /></C.Sup>
- <C.Sup title="Gitee"><Sup6 /></C.Sup>
- <C.Sup title="Jenkins"><Sup7 /></C.Sup>
- <C.Sup title="GitHub Action"><Sup8 /></C.Sup>
- <C.Sup title="GitLab CI"><Sup9 /></C.Sup>
+ <C.Sup title="TAPD"><Sup2 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="GitHub"><Sup3 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="GitLab"><Sup4 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="BitBucket"><Sup5 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="Gitee"><Sup6 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="Jenkins"><Sup7 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="GitHub Action"><Sup8 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
+ <C.Sup title="GitLab CI"><Sup9 className="sm:w-[48px] sm:h-[48px]" /></C.Sup>
<C.Sup title="Feishu"><C.SupImg src={SupA} /></C.Sup>
</div>
- <div className="text-label18 font-inter text-neutral-500
- mt-[48px]">
+ <div className="text-label18 font-inter text-neutral-500 mt-6
+ sm:text-label16 sm:mt-4">
<C.InlineLink link="https://devlake.apache.org/docs/Overview/Roadmap">More data sources</C.InlineLink> comming soon...
</div>
</div>
@@ -56,7 +56,7 @@ export function WhyDevlake() {
<span
className="section-title text-center"
>
- Why Apache DevLake<span className="mobile:hidden"> (Incubating)</span>
+ Why Apache DevLake (Incubating)
</span>
<div
className=" flex flex-col
diff --git a/src/css/custom.css b/src/css/custom.css
index c61236557..c544fa9c7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -48,8 +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];
+ @apply mobile:text-heading3;
+ @apply mobile:mb-4 mobile:mt-3;
}
.floating-link-icon {
diff --git a/src/pages/index.js b/src/pages/index.js
index 2ef77a781..4dbf41d47 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -18,7 +18,8 @@ export default function Home() {
<div className='bg-[#f8f8f8]'>
<div className=' mx-auto bg-white'>
<HomepageHeader />
- <main className='max-w-[1128px] xl:mx-auto mx-[140px] sm:mx-[0px]'>
+ <main className='max-w-[1128px] xl:mx-auto mx-[140px]
+ sm:max-w-[90%] sm:mx-auto'>
<WhyDevlake />
<UseCases />
<UserFlow />
diff --git a/tailwind.config.js b/tailwind.config.js
index 89503d69e..7c552d8cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,9 +11,9 @@ module.exports = {
inter: ['"Inter"', ...defaultTheme.fontFamily.sans],
},
screens: {
- 'mobile': { 'max': '390px' },
'xl': '1280px',
'sm': { 'max': '744px' },
+ 'mobile': { 'max': '390px' },
},
spacing: {
1: '8px',