This is an automated email from the ASF dual-hosted git repository.
morningman 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 eb64b5740f8 (feature) update user images (#255)
eb64b5740f8 is described below
commit eb64b5740f846bd4e3adb5b63e62c08c8c9310cd
Author: Jeffrey <[email protected]>
AuthorDate: Wed Jun 28 20:45:15 2023 +0800
(feature) update user images (#255)
---
src/pages/users/index.scss | 9 ++++
src/pages/users/index.tsx | 126 ++++++++++++++++++++++++++++++---------------
2 files changed, 94 insertions(+), 41 deletions(-)
diff --git a/src/pages/users/index.scss b/src/pages/users/index.scss
index f7260c20cc8..64948953def 100644
--- a/src/pages/users/index.scss
+++ b/src/pages/users/index.scss
@@ -1,4 +1,5 @@
.users-wall {
+ margin-bottom: -4rem;
.page-column {
padding-bottom: 0;
@@ -9,6 +10,14 @@
}
}
+ // .swiper-pagination {
+ // bottom: -4rem !important;
+ // }
+
+ .swiper-button-next, .swiper-button-prev {
+ top: calc(50% - 2rem);
+ }
+
.users-wall-list {
padding: 0 1rem;
padding-bottom: 4rem;
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 8885d9946cd..6c8f1d9d973 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -1,5 +1,5 @@
import Layout from '../../theme/Layout';
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Translate, { translate } from '@docusaurus/Translate';
import './index.scss';
@@ -7,25 +7,106 @@ import Link from '@docusaurus/Link';
import PageColumn from '@site/src/components/PageColumn';
import userCasesCn from '@site/userCases/zh_CN.json';
import userCasesEn from '@site/userCases/en_US.json';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
-import { Pagination } from 'swiper';
+import 'swiper/css/navigation';
+import { Pagination, Navigation } from 'swiper';
+import usePhone from '@site/src/hooks/use-phone';
export default function Users(): JSX.Element {
const { i18n } = useDocusaurusContext();
const userCases = i18n.currentLocale === 'en' ? userCasesEn : userCasesCn;
+ const { isPhone } = usePhone();
const getUserLogos = (page: number = 1, total: number = 30) => {
const arr = new Array(total).fill('');
return arr.map((item, index) =>
require(`@site/static/images/user-logo-${page}/u-${index + 1}.png`).default);
};
+ const [swiperRef, setSwiperRef] = useState<SwiperClass>();
+
+ const theSlides = useMemo(() => ['slide one', 'slide two'], []);
+
+ const handlePrevious = useCallback(() => {
+ swiperRef?.slidePrev();
+ }, [swiperRef]);
+
+ const handleNext = useCallback(() => {
+ swiperRef?.slideNext();
+ }, [swiperRef]);
+
const pagination = {
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '"></span>';
},
};
+
+ function renderSwiper() {
+ const modules = [Pagination];
+ // if (!isPhone) {
+ // modules.push(Navigation);
+ // }
+ return (
+ <div style={{ position: 'relative' }}>
+ {!isPhone && (
+ <div
+ onClick={handlePrevious}
+ className="swiper-button-prev"
+ style={{ position: 'absolute', top: 'calc(50% -
2rem)', left: '-3rem', zIndex: 99 }}
+ ></div>
+ )}
+
+ <Swiper
+ pagination={pagination}
+ spaceBetween={50}
+ slidesPerView={1}
+ navigation={false}
+ modules={modules}
+ loop={true}
+ className="mySwiper"
+ // style={{ minHeight: 480 }}
+ onSlideChange={() => console.log('slide change')}
+ onSwiper={setSwiperRef}
+ >
+ <SwiperSlide>
+ <div className="users-wall-list row">
+ <img
+ className="users-wall-img"
+
src={require(`@site/static/images/user-logos-1.jpg`).default}
+ alt=""
+ />
+ </div>
+ </SwiperSlide>
+ <SwiperSlide>
+ <div className="users-wall-list row">
+ <img
+ className="users-wall-img"
+
src={require(`@site/static/images/user-logos-2.jpg`).default}
+ alt=""
+ />
+ </div>
+ </SwiperSlide>
+ <SwiperSlide>
+ <div className="users-wall-list row">
+ <img
+ className="users-wall-img"
+
src={require(`@site/static/images/user-logos-3.png`).default}
+ alt=""
+ />
+ </div>
+ </SwiperSlide>
+ </Swiper>
+ {!isPhone && (
+ <div
+ onClick={handleNext}
+ className="swiper-button-next"
+ style={{ position: 'absolute', top: 'calc(50% -
2rem)', right: '-3rem', zIndex: 99 }}
+ ></div>
+ )}
+ </div>
+ );
+ }
return (
<Layout
title={translate({ id: 'users.title', message: 'Users' })}
@@ -43,44 +124,7 @@ export default function Users(): JSX.Element {
</Translate>
}
>
- <Swiper
- pagination={pagination}
- modules={[Pagination]}
- spaceBetween={50}
- slidesPerView={1}
- className="mySwiper"
- style={{ height: 490 }}
- onSlideChange={() => console.log('slide change')}
- onSwiper={(swiper: any) => console.log(swiper)}
- >
- <SwiperSlide>
- <div className="users-wall-list row">
- <img
- className="users-wall-img"
-
src={require(`@site/static/images/user-logos-1.jpg`).default}
- alt=""
- />
- </div>
- </SwiperSlide>
- <SwiperSlide>
- <div className="users-wall-list row">
- <img
- className="users-wall-img"
-
src={require(`@site/static/images/user-logos-2.jpg`).default}
- alt=""
- />
- </div>
- </SwiperSlide>
- <SwiperSlide>
- <div className="users-wall-list row">
- <img
- className="users-wall-img"
-
src={require(`@site/static/images/user-logos-3.png`).default}
- alt=""
- />
- </div>
- </SwiperSlide>
- </Swiper>
+ {renderSwiper()}
</PageColumn>
</section>
<section className="story">
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
