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:30 UTC

[incubator-devlake-website] 03/14: Revert "fix: mobile adapt header"

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 3057f612b6f8cdba9bec66f603297fa4127dceaf
Author: Yumeng Wang <yu...@merico.dev>
AuthorDate: Wed Sep 14 18:39:24 2022 +0800

    Revert "fix: mobile adapt header"
    
    This reverts commit 249986fc7a371422c2187729926fa5979d727b8f.
---
 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, 26 insertions(+), 52 deletions(-)

diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index 3f3f23aa0..ab2689d03 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -29,7 +29,6 @@ export const TextSection = ({ children }: { children: React.ReactNode }) =>
   <div
     className="
       text-start w-[448px]
-      mobile:w-auto
     ">
     {children}
   </div>
@@ -44,7 +43,6 @@ 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 }) =>
@@ -53,7 +51,7 @@ export const InlineLink = ({ link, children }: { link: string, children: React.R
   </a>
 
 export const BreakLine = () => <div className="
-  h-[2px] bg-neutral-100 mx-[140px] mobile:hidden
+  h-[2px] bg-neutral-100 mx-[140px]
   " />
 
 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 a24fc2c5f..90f78767e 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -9,66 +9,47 @@ export function HomepageHeader() {
     <header
       className="relative
         pt-[64px] pb-[90px] px-[80px]
-        mobile:pt-5 mobile:px-[32px] mobile:pb-[0px]
-        flex mobile:flex-col
-        justify-between items-center
-        mobile:bg-primary-100"
+        flex
+        justify-between items-center"
     >
       <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
-            mobile:text-label16 mobile:leading-[20px]
-            mobile:font-normal mobile:text-center
-            mb-[32px] mobile:mb-3"
+            mb-[32px]"
         >
-          Debug Your Software{' '}
-          <br className="mobile:hidden" />
+          Debug Your Software
+          <br />
           Engineering Process
         </div>
-        <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"
+        <div
+          className="text-primary-800
+            text-label24 font-inter font-normal
+            mb-[48px]
+          "
         >
-          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.
+          Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
         </div>
         <Link
-          className="primary-button mobile:hidden"
+          className="primary-button"
           to="https://devlake.apache.org/docs/GettingStarted"
         >
           Getting Started
         </Link>
       </div>
       <HeaderSvg className="
-        w-auto h-auto z-10 mobile:hidden
-      "/>
+        w-auto h-auto z-10
+      "
+      />
     </header>
   );
 }
\ No newline at end of file
diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx
index b95807887..40b91f004 100644
--- a/src/components/Sections/JoinCommunity.tsx
+++ b/src/components/Sections/JoinCommunity.tsx
@@ -5,11 +5,9 @@ import Join from "@site/static/img/Homepage/Join.png";
 import { InlineLink } from "./Components";
 
 export function JoinCommunity() {
-  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">
+  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">
       <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 01f9f0b22..030d275ff 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -14,7 +14,6 @@ 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 9ff3013b9..ff71a1814 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -16,8 +16,7 @@ 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
-      mobile:flex-col">
+    <div className="flex w-full justify-between items-center">
       {children}
     </div>
   );
@@ -26,7 +25,7 @@ function Feature({ children }: { children: React.ReactNode }) {
 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]">
@@ -52,8 +51,7 @@ function Supports() {
 export function WhyDevlake() {
   return (<section className="flex flex-col flex-nowrap py-5 items-stretch">
     <span
-      className="section-title text-center
-      mobile:text-heading2 mobile:leading-[32px]"
+      className="section-title text-center"
     >
       Why Apache DevLake (Incubating)
     </span>