This is an automated email from the ASF dual-hosted git repository.
xiaoyu pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new ad6a33656a User Page Update (#661)
ad6a33656a is described below
commit ad6a33656a5d5f1d9f908cdcbb1ac7d48640fb4d
Author: gouzixing <[email protected]>
AuthorDate: Sat Jul 30 23:16:09 2022 +0800
User Page Update (#661)
* newsPage
* news page
* bugfix
* news page update
* bugfix --path bug
* conflict
* conflict
* img update
* blog page refractor
* blog page new style
* delete annotate
* index page highlight for slogon
* bugfix:document for node
* bugfix--link false
* i18n & link fix
* 'translate'
* translate
* urlchange bugfix
* docs fix
* delete unused import
* fix
* event page & navibar update & overview doc & pic update for news
* lint
* lint
* translate
* lint
* trans
* feat
* fix--locale=zh
* docs fix
* footer
* i18n
* userList
Co-authored-by: gouzixing <[email protected]>
Co-authored-by: gouzixing <[email protected]>
---
src/pages/index.module.css | 132 ++++++++++++++++++++++-----------------------
src/pages/users.tsx | 79 +++++++++++++++++++++------
2 files changed, 129 insertions(+), 82 deletions(-)
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 1c1f33e93d..e931defa83 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -4,6 +4,7 @@
.section {
padding: 72px 0;
+ width: 100%;
}
.sectionAlt {
@@ -166,89 +167,86 @@
text-shadow: 4px 6px 0 rgb(0 0 0 / 7%);
}
-.userSwiperContent {
+.blockDescription{
+ margin-top: 40px;
+}
+
+.userPart{
+ display: block;
+ position: relative;
height: 360px;
+ width: 100%;
+ overflow: hidden;
}
+.scrollView{
+ margin-top: 40px;
+ animation: 45s linear 0s infinite alternate none running animation-autoplay;
+ position:absolute;
+}
-.swiper-slide {
- width: 160px;
- height: 65px;
- margin-right: 10px;
- margin-bottom: 20px;
- overflow: hidden;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
- border: 1px solid #eaecef;
- border-radius: 2px;
- padding: 10px;
- box-shadow: #f8f9fa 0px 1px 2px 0px;
+@keyframes animation-autoplay {
+ 0% {
+ transform: translate3d(0px, 0px, 0px);
+ }
+
+ 100% {
+ transform: translate3d(-4500px, 0px, 0px);
+ }
}
-.swiper-slide a {
- width: 100%;
- height: 100%;
+.scrollLine1{
display: flex;
- justify-content: center;
align-items: center;
}
-.swiper-slide img {
- max-height: 90%;
- max-width: 90%;
- transition: opacity 0.5s;
+.scrollLine2{
+ display: flex;
+ /* padding-left: 130px; */
+ align-items: center;
}
-@media only screen and (max-width: 768px) {
- .hero {
- padding-left: 20px;
- padding-right: 20px;
- }
-
- .heroInner {
- padding: 0;
- }
-
- .heroProjectTagline {
- font-size: 36px;
- text-align: center;
- }
+.scrollLine3{
+ display: flex;
+ align-items: center;
+}
- .heroLogo {
- display: block;
- float: none;
- margin: 0 auto;
- }
- .indexCtas {
- justify-content: center;
- }
+.scrollItem{
+ flex-shrink: 0;
+ width: 320px;
+ padding: 15px 30px;
+ height: 100px;
+}
- .indexCtas a {
- margin: 20px 36px;
- }
+.scrollImage{
+ width: 55%;
+ height: 55%;
+ object-fit: contain;
+}
- .indexCtasGitHubButton {
- display: none;
- }
+.scrollItemLeft{
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+}
- .userSwiperContent {
- height: 250px;
- }
+.scrollItemRight{
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
- .swiper-slide {
- width: 45px;
- height: 35px;
- margin-right: 2px;
- margin-bottom: 2px;
- overflow: hidden;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
- border: 1px solid #eaecef;
- border-radius: 2px;
- padding: 10px;
- box-shadow: #f8f9fa 0px 1px 2px 0px;
- }
+.scrollItemLeftInner{
+ background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+ width: 88px;
+ height: 100%;
}
+
+.scrollItemRightInner{
+ background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+ width: 88px;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/pages/users.tsx b/src/pages/users.tsx
index 2d75bb3872..71054698be 100644
--- a/src/pages/users.tsx
+++ b/src/pages/users.tsx
@@ -24,8 +24,8 @@ function group(array, subGroupLength) {
var index = 0;
var newArray = [];
- while(index < array.length) {
- newArray.push(array.slice(index, index += subGroupLength));
+ while (index < array.length) {
+ newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
}
@@ -37,17 +37,66 @@ function Users() {
tagline,
},
} = useDocusaurusContext();
- const userGroups = group(users,4);
+ const userGroups = group(users, (users.length) / 3);
return (
<Layout title={tagline} description={description as string}>
<main>
- <div className={clsx(styles.section, styles.userSwiperContainer)}>
+ <div className={clsx(styles.section, styles.userSwiperContainer)}>
<div className="container">
<h1 className={styles.blockTitle}><Translate>Our
Users</Translate></h1>
- <p>
+ <p className={styles.blockDescription}>
<Translate>Here is a list of companies or organizations that we
know have used all or some of Apache ShenYu’s components in production.This
list is in no particular order.</Translate>
- </p>
- <Swiper navigation={{
+ </p >
+ <div className={styles.userPart}>
+ <div className={styles.scrollView}>
+ <div className={styles.scrollLine1}>
+ {
+ userGroups[0].map((user, i) => {
+ return (
+ <div className={styles.scrollItem} key={i}>
+ < a href="noopener noreferrer" target="_blank">
+ < img className={styles.scrollImage} src={user.src
&& (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))}
alt={user.name} />
+ </ a>
+ </div>
+ )
+ })
+ }
+ </div>
+ <div className={styles.scrollLine2}>
+ {
+ userGroups[1].map((user, i) => {
+ return (
+ <div className={styles.scrollItem} key={i}>
+ < a href={user.link} rel="noopener noreferrer"
target="_blank">
+ < img className={styles.scrollImage} src={user.src
&& (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))}
alt={user.name} />
+ </ a>
+ </div>
+ )
+ })
+ }
+ </div>
+ <div className={styles.scrollLine3}>
+ {
+ userGroups[2].map((user, i) => {
+ return (
+ <div className={styles.scrollItem} key={i}>
+ < a href={user.link} rel="noopener noreferrer"
target="_blank">
+ < img className={styles.scrollImage} src={user.src
&& (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))}
alt={user.name} />
+ </ a>
+ </div>
+ )
+ })
+ }
+ </div>
+ </div>
+ <div className={styles.scrollItemLeft}>
+ <div className={styles.scrollItemLeftInner}></div>
+ </div>
+ <div className={styles.scrollItemRight}>
+ <div className={styles.scrollItemRightInner}></div>
+ </div>
+ </div>
+ {/* <Swiper navigation={{
nextEl: '.user-swiper-button-next',
prevEl: '.user-swiper-button-prev',
}}
@@ -63,24 +112,24 @@ function Users() {
{
userList.map((user, j) => {
return <div key={j} className={styles["swiper-slide"]}>
- <a href={user.link} rel="noopener noreferrer"
target="_blank">
- <img
src={user.src&&(user.src.startsWith("http")?user.src:useBaseUrl(user.src))}
alt={user.name} />
- </a>
+ < a href={user.link} rel="noopener noreferrer"
target="_blank">
+ < img
src={user.src&&(user.src.startsWith("http")?user.src:useBaseUrl(user.src))}
alt={user.name} />
+ </ a>
</div>
})
}
</SwiperSlide>
})
}
- </Swiper>
- <p><Translate>To better serve you, please register</Translate><a
target="_blank"
href="https://github.com/apache/incubator-shenyu/issues/68";><Translate>[Here].</Translate></a></p>
+ </Swiper> */}
+ <p><Translate>To better serve you, please register</Translate><a
target="_blank"
href="https://github.com/apache/incubator-shenyu/issues/68";><Translate>[Here].</Translate></
a></p >
</div>
- <div className="swiper-button-prev user-swiper-button-prev" style={{
left: "50px" }}></div>
- <div className="swiper-button-next user-swiper-button-next" style={{
right: "50px" }}></div>
+ {/* <div className="swiper-button-prev user-swiper-button-prev"
style={{ left: "50px" }}></div>
+ <div className="swiper-button-next user-swiper-button-next" style={{
right: "50px" }}></div> */}
</div>
</main>
</Layout>
);
}
-export default Users;
+export default Users;
\ No newline at end of file
