This is an automated email from the ASF dual-hosted git repository.
luzhijing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new bdd9da789ee [fix] Website fix styles (#368)
bdd9da789ee is described below
commit bdd9da789ee85f5463578a823b915cf00e37f1c3
Author: velodb-Linjiang <[email protected]>
AuthorDate: Fri Dec 22 11:40:59 2023 +0800
[fix] Website fix styles (#368)
---
src/components/PageBanner/index.tsx | 2 +-
src/components/PageBanner/styles.scss | 1 -
src/components/PageColumn/index.tsx | 5 ++++-
src/components/PageColumn/styles.scss | 9 ++++-----
.../achievement-banner/achievement-banner.scss | 3 +--
.../achievement-banner/achievement-banner.tsx | 2 +-
src/components/get-started/get-started.tsx | 2 +-
src/hooks/use-animation-frame.ts | 7 ++++++-
src/pages/index.tsx | 20 +++++++++++---------
src/pages/users/index.tsx | 2 +-
src/pages/users/user-item.tsx | 2 +-
static/images/what-is-doris-new.png | Bin 0 -> 908574 bytes
12 files changed, 31 insertions(+), 24 deletions(-)
diff --git a/src/components/PageBanner/index.tsx
b/src/components/PageBanner/index.tsx
index 9129b5442f2..00644ac8422 100644
--- a/src/components/PageBanner/index.tsx
+++ b/src/components/PageBanner/index.tsx
@@ -24,7 +24,7 @@ export default function PageBanner(props: PageBannerProps):
JSX.Element {
return (
<section className={clsx('banner-section', className)}>
<div className="banner-container container">
- <div className="banner-info">
+ <div className="banner-info mb-10 lg:mb-20">
<div className="banner-title-wrap">
<div className="banner-title">{title}</div>
<div className="banner-sub-title">{subTitle}</div>
diff --git a/src/components/PageBanner/styles.scss
b/src/components/PageBanner/styles.scss
index 07e9c291335..4881a40f0f7 100644
--- a/src/components/PageBanner/styles.scss
+++ b/src/components/PageBanner/styles.scss
@@ -124,7 +124,6 @@
.banner-info {
margin-top: 3rem;
- margin-bottom: 5rem;
.banner-title {
font-size: 2.25rem;
line-height: 1.5;
diff --git a/src/components/PageColumn/index.tsx
b/src/components/PageColumn/index.tsx
index c41ceb920c3..c54606de54c 100644
--- a/src/components/PageColumn/index.tsx
+++ b/src/components/PageColumn/index.tsx
@@ -12,7 +12,10 @@ interface PageColumnProps extends
ComponentProps<JSXElementConstructor<any>> {
export default function PageColumn(props: PageColumnProps): JSX.Element {
const { align = 'center', title, footer, children, subTitle, wrapperStyle,
className } = props;
return (
- <div style={wrapperStyle} className={clsx('page-column', className,
align, footer && 'has-footer')}>
+ <div
+ style={wrapperStyle}
+ className={clsx('page-column lg:py-[6.25rem] py-16', className,
align, footer && 'has-footer')}
+ >
<h1 className="page-column-title">
<div className="container">{title}</div>
</h1>
diff --git a/src/components/PageColumn/styles.scss
b/src/components/PageColumn/styles.scss
index 59e4cc158a5..4a9846723e6 100644
--- a/src/components/PageColumn/styles.scss
+++ b/src/components/PageColumn/styles.scss
@@ -1,11 +1,10 @@
.page-column {
- padding: 6.25rem 0;
+ // padding: 6.25rem 0;
font-size: 1.25rem;
color: var(--global-colors-text-primary);
line-height: 2;
.page-column-title {
- font-size: 44px;
font-weight: 540;
line-height: 70px;
}
@@ -33,9 +32,9 @@
}
}
- &.has-footer {
- padding-bottom: 2.5rem;
- }
+ // &.has-footer {
+ // padding-bottom: 2.5rem;
+ // }
&-title {
text-align: inherit;
diff --git a/src/components/achievement-banner/achievement-banner.scss
b/src/components/achievement-banner/achievement-banner.scss
index 741c03a2c52..2ac7644a79c 100644
--- a/src/components/achievement-banner/achievement-banner.scss
+++ b/src/components/achievement-banner/achievement-banner.scss
@@ -1,8 +1,7 @@
.achievement-banner-wrapper {
display: flex;
gap: 24px;
- margin-bottom: 5rem;
- margin-top: 7.5rem;
+ margin-bottom: 4rem;
.achievement-banner-item {
width: 282px;
diff --git a/src/components/achievement-banner/achievement-banner.tsx
b/src/components/achievement-banner/achievement-banner.tsx
index 2d8824fc2ea..29d6ccee018 100644
--- a/src/components/achievement-banner/achievement-banner.tsx
+++ b/src/components/achievement-banner/achievement-banner.tsx
@@ -5,7 +5,7 @@ import './achievement-banner.scss';
export function AchievementBanner() {
return (
<section
- className="container achievement-banner-wrapper flex-col
lg:flex-row items-center lg:mt-[7.5rem];
+ className="container achievement-banner-wrapper mt-16 flex-col
lg:flex-row items-center lg:mt-[7.5rem];
"
>
{AchievementBannerItemsData.map(({ title, content }) => (
diff --git a/src/components/get-started/get-started.tsx
b/src/components/get-started/get-started.tsx
index 0c6099d7493..3e86f57dd00 100644
--- a/src/components/get-started/get-started.tsx
+++ b/src/components/get-started/get-started.tsx
@@ -10,7 +10,7 @@ export default function GetStarted() {
{/* <div className="border-[rgba(255, 255, 255, 0.63)] absolute
top-0 h-[40rem] w-[40rem] -translate-x-2/3 -translate-y-2/3 transform
rounded-full border-[20rem] bg-transparent opacity-10"></div>
<div className="border-[rgba(255, 255, 255, 0.63)] absolute
bottom-0 right-0 h-[40rem] w-[40rem] translate-x-1/2 translate-y-1/2 transform
rounded-full border-[20rem] bg-transparent opacity-10"></div> */}
<div className="container mx-auto">
- <h2 className="text-center text-[2.75rem] font-[540]
text-white lg:text-title-md">{data.title}</h2>
+ <h2 className="text-center text-[2.75rem] lg:font-[540]
text-white lg:text-title-md">{data.title}</h2>
{data?.description && <div className="mt-4 text-center
text-white">{data.description}</div>}
<div className="relative z-[1] mt-12 flex justify-center
space-x-4 lg:space-x-10">
{data.buttons.map((item, index) => {
diff --git a/src/hooks/use-animation-frame.ts b/src/hooks/use-animation-frame.ts
index 17bb09b8f06..34b805f7fe1 100644
--- a/src/hooks/use-animation-frame.ts
+++ b/src/hooks/use-animation-frame.ts
@@ -12,10 +12,15 @@ export const useAnimationFrame = (callback, stop) => {
React.useEffect(() => {
console.log(stop);
+ if (stop) {
+ if (requestRef.current) return () =>
cancelAnimationFrame(requestRef.current);
+ return;
+ }
+
const animate = time => {
if (previousTimeRef.current !== undefined) {
const deltaTime = time - previousTimeRef.current;
- if (!stop) callback(deltaTime);
+ callback(deltaTime);
}
previousTimeRef.current = time;
requestRef.current = requestAnimationFrame(animate);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f2485540420..dcf5ed59d78 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -434,7 +434,7 @@ export default function Home(): JSX.Element {
alt={newsletter.title}
/>
</div>
- <div className=" w-[48rem] ml-12 flex
flex-col ">
+ <div className="lg:w-[48rem] px-6 lg:px-0
lg:ml-12 mt-4 lg:mt-0 flex flex-col ">
<div className="flex gap-1 mb-1">
{newsletter.tags.map(value => (
<div
className="color-[#4c576c] font-medium text-xs leading-5">
@@ -500,7 +500,8 @@ export default function Home(): JSX.Element {
</section>
<section className="apache-doris">
<PageColumn
- wrapperStyle={{ paddingBottom: '7.5rem' }}
+ // wrapperStyle={{ paddingBottom: '7.5rem' }}
+ className="lg:pb-[7.5rem] py-16"
title={
<Translate id="homepage.what" description="What is
Apache Doris">
What is Apache Doris?
@@ -520,18 +521,19 @@ export default function Home(): JSX.Element {
}
>
{isPhone ? (
- <img
src={require('@site/static/images/what-is-doris.png').default} alt="" />
+ <img
src={require('@site/static/images/what-is-doris-new.png').default} alt="" />
) : (
<img
style={{ maxWidth: '85%', margin: 'auto' }}
-
src={require('@site/static/images/what-is-doris.png').default}
+
src={require('@site/static/images/what-is-doris-new.png').default}
alt=""
/>
)}
</PageColumn>
</section>
<PageColumn
- wrapperStyle={{ paddingTop: '7.5rem', paddingBottom: '5.5rem',
backgroundColor: '#F7F9FE' }}
+ className="lg:py-[7.5rem]"
+ wrapperStyle={{ backgroundColor: '#F7F9FE' }}
title={
<Translate id="homepage.capabilities" description="Core
capabilities">
Core capabilities
@@ -566,7 +568,7 @@ export default function Home(): JSX.Element {
}
>
<div className="cases-tabs" onMouseEnter={() => setStop(true)}
onMouseLeave={() => setStop(false)}>
- {/* <Tabs
+ <Tabs
activeKey={activeKey}
onChange={activeKey => {
setCount(0);
@@ -599,8 +601,8 @@ export default function Home(): JSX.Element {
),
};
})}
- /> */}
- {VariousAnalyticsData.map(({ title, content, links, icon
}) => (
+ />
+ {/* {VariousAnalyticsData.map(({ title, content, links,
icon }) => (
<div className="various-analytics-group flex-col
lg:flex-row">
<div className="items-title w-auto lg:w-[27.25rem]
">
<div>{icon}</div>
@@ -617,7 +619,7 @@ export default function Home(): JSX.Element {
</div>
</div>
</div>
- ))}
+ ))} */}
</div>
</PageColumn>
<PageColumn
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index c452ddd6ebc..c3056bb7fc9 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -173,7 +173,7 @@ export default function Users(): JSX.Element {
))}
</ul>
</div>
- <ul className="mt-6 grid gap-1 grid-cols-3 lg:gap-6 lg:mt-12
lg:grid-cols-4 pb-[88px]">
+ <ul className="mt-6 grid gap-1 grid-cols-2 lg:gap-6 lg:mt-12
lg:grid-cols-4 pb-[88px]">
{users.map(user => (
<UserItem key={user.name} {...user} />
))}
diff --git a/src/pages/users/user-item.tsx b/src/pages/users/user-item.tsx
index 8859272e5a7..f56a4c5fc95 100644
--- a/src/pages/users/user-item.tsx
+++ b/src/pages/users/user-item.tsx
@@ -13,7 +13,7 @@ interface UserItemProps {
export default function UserItem(props: UserItemProps) {
return (
- <div className="group cursor-pointer flex flex-col items-center
swipe-top-button lg:h-[17.5rem] lg:w-[17.5rem] h-[8rem] w-[8rem]
shadow-[0px_2px_8px_0px_rgba(49,77,136,0.16)] rounded-lg">
+ <div className="group cursor-pointer flex flex-col items-center
swipe-top-button lg:h-[17.5rem] lg:w-[17.5rem] h-[12rem] w-[12rem]
shadow-[0px_2px_8px_0px_rgba(49,77,136,0.16)] rounded-lg">
<div className="group-hover:hidden flex justify-between py-2 px-2
lg:px-[2.375rem] lg:pt-[4.25rem] lg:pb-[2.375rem] flex-col items-center h-full
w-full gap-[2.375rem]">
<img src={props?.image} alt={props?.name} />
<span className="text-xs lg:text-base">{props?.name}</span>
diff --git a/static/images/what-is-doris-new.png
b/static/images/what-is-doris-new.png
new file mode 100644
index 00000000000..ae8d129b53e
Binary files /dev/null and b/static/images/what-is-doris-new.png differ
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
