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/14 10:39:29 UTC
[incubator-devlake-website] 02/14: Revert "feat: use case mobile"
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 <yu...@merico.dev>
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)',
},
},
},