You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by le...@apache.org on 2021/11/01 08:27:43 UTC
[dolphinscheduler-website] branch master updated:
[DS-6379][web-site] Add 'User' column in web-site (#493)
This is an automated email from the ASF dual-hosted git repository.
leonbao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 37da4fc [DS-6379][web-site] Add 'User' column in web-site (#493)
37da4fc is described below
commit 37da4fc6db84da2ed5e1f84bfaec68beb8b6f4c6
Author: DuChaoJiaYou <10...@qq.com>
AuthorDate: Mon Nov 1 16:26:25 2021 +0800
[DS-6379][web-site] Add 'User' column in web-site (#493)
* add column 'User'
* move the logo wall into the 'User'
* move the comments into the 'User'
This closes #6379
---
site_config/home.jsx | 12 +-
site_config/site.js | 11 ++
src/pages/docs/index.md.jsx | 4 +-
src/pages/home/index.jsx | 75 +++--------
src/pages/user/index.jsx | 116 +++++++++++++++++
src/pages/user/user.scss | 297 ++++++++++++++++++++++++++++++++++++++++++++
6 files changed, 449 insertions(+), 66 deletions(-)
diff --git a/site_config/home.jsx b/site_config/home.jsx
index a4f44cf..a83a0c2 100644
--- a/site_config/home.jsx
+++ b/site_config/home.jsx
@@ -265,16 +265,16 @@ export default {
},
{
img: '/img/ourusers/dell.png',
- },
+ },
{
img: '/img/ourusers/shansong.png',
},
{
img: '/img/ourusers/189.png',
- },
+ },
{
img: '/img/ourusers/360.png',
- },
+ },
],
},
userreview: {
@@ -522,16 +522,16 @@ export default {
},
{
img: '/img/ourusers/dell.png',
- },
+ },
{
img: '/img/ourusers/shansong.png',
},
{
img: '/img/ourusers/189.png',
- },
+ },
{
img: '/img/ourusers/360.png',
- },
+ },
],
},
events: {
diff --git a/site_config/site.js b/site_config/site.js
index 095b3d0..2c5a3be 100644
--- a/site_config/site.js
+++ b/site_config/site.js
@@ -154,6 +154,11 @@ export default {
},
],
},
+ {
+ key: 'user',
+ text: 'USER',
+ link: '/en-us/user/index.html',
+ },
],
documentation: {
title: 'Documentation',
@@ -377,6 +382,12 @@ export default {
},
],
},
+ {
+ key: 'user',
+ text: '用户',
+ // link: '',
+ link: '/zh-cn/user/index.html',
+ },
],
documentation: {
title: '文档',
diff --git a/src/pages/docs/index.md.jsx b/src/pages/docs/index.md.jsx
index 9f6a008..a583f04 100644
--- a/src/pages/docs/index.md.jsx
+++ b/src/pages/docs/index.md.jsx
@@ -32,7 +32,7 @@ const docsSource = {
'1.3.8': docs138Config,
'1.3.9': docs139Config,
'2.0.0': docs200Config,
- 'dev': docsDevConfig,
+ dev: docsDevConfig,
};
const isValidVersion = version => version && docsSource.hasOwnProperty(version);
@@ -63,7 +63,7 @@ class Docs extends Md2Html(Language) {
} else {
submenu.children.forEach((menuLevel3) => {
menuLevel3.link = menuLevel3.link.replace(`docs/${siteConfig.docsLatest}`, 'docs/latest');
- })
+ });
}
});
});
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 9d0182c..9c06057 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -66,7 +66,7 @@ class Home extends Language {
}
}
- minusClick =(length) => {
+ minusClick = (length) => {
if (this.state.index > 0) {
this.setState({
...this.state,
@@ -95,7 +95,7 @@ class Home extends Language {
}
}
- minusClick =(length) => {
+ minusClick = (length) => {
if (this.state.index > 0) {
this.setState({
...this.state,
@@ -110,7 +110,7 @@ class Home extends Language {
}
render() {
- const { starCount, forkCount, index } = this.state;
+ const { starCount, forkCount } = this.state;
const language = this.getLanguage();
const dataSource = homeConfig[language];
const { headerType } = this.state;
@@ -132,9 +132,9 @@ class Home extends Language {
</div>
<p className="product-desc">{dataSource.brand.briefIntroduction}</p>
<div className="button-area">
- {
- dataSource.brand.buttons.map(b => <Button type={b.type} key={b.type} link={b.link} target={b.target}>{b.text}</Button>)
- }
+ {
+ dataSource.brand.buttons.map(b => <Button type={b.type} key={b.type} link={b.link} target={b.target}>{b.text}</Button>)
+ }
</div>
<div className="github-buttons">
<a href="https://github.com/apache/dolphinscheduler" target="_blank" rel="noopener noreferrer">
@@ -173,62 +173,21 @@ class Home extends Language {
<section className="feature-section">
<h3>{dataSource.features.title}</h3>
<ul>
- {
- dataSource.features.list.map((feature, i) => (
- <Item feature={feature} key={i} />
- ))
- }
+ {
+ dataSource.features.list.map((feature, i) => (
+ <Item feature={feature} key={i} />
+ ))
+ }
</ul>
</section>
<section className="events-section">
- <h3>{dataSource.events.title}</h3>
- <Slider>
- {dataSource.events.list.map((event, i) => (
- <EventCard event={event} key={i} />
- ))}
- </Slider>
- </section>
-
- <section className="ourusers-section">
- <h3>{dataSource.ourusers.title}</h3>
- <div className="button1-section" id="buttonleft">
- {/* <button onClick={() => this.minusClick(dataSource.ourusers.list.length)}><img src="/img/gotoleft.png" /></button> */}
- <div className="overflow-section">
- <ul>
- {
- dataSource.ourusers.list.map((ureview, i) => (
- <li key={i}>
- <img src={ureview.img} />
- </li>
- ))
- }
- </ul>
- </div>
- {/* <button onClick={() => this.addClick(dataSource.userreview.list.length)}><img src="/img/gotoright.png" /></button> */}
- </div>
- </section>
- <section className="review-section">
- <h3>{dataSource.userreview.title}</h3>
- <div className="button-section" id="buttonleft">
- <button onClick={() => this.minusClick(dataSource.userreview.list.length)}><img src="/img/gotoleft.png" /></button>
- <div className="overflow-section">
- <ul>
- {
- dataSource.userreview.list.map((ureview, i) => (
- <li key={i}>
- <img src={ureview.img} />
- <div className="name-section">
- <p className="pr">{ureview.review}</p>
- <p className="pn">{ureview.name}</p>
- </div>
- </li>
- ))[index]
- }
- </ul>
- </div>
- <button onClick={() => this.addClick(dataSource.userreview.list.length)}><img src="/img/gotoright.png" /></button>
- </div>
+ <h3>{dataSource.events.title}</h3>
+ <Slider>
+ {dataSource.events.list.map((event, i) => (
+ <EventCard event={event} key={i} />
+ ))}
+ </Slider>
</section>
<Footer logo="/img/ds_gray.svg" language={language} />
</div>
diff --git a/src/pages/user/index.jsx b/src/pages/user/index.jsx
new file mode 100644
index 0000000..1bd983f
--- /dev/null
+++ b/src/pages/user/index.jsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Header from '../../components/header';
+import Language from '../../components/language';
+import homeConfig from '../../../site_config/home';
+import './user.scss';
+
+class User extends Language {
+ constructor(props) {
+ super(props);
+ this.state = {
+ headerType: 'dark',
+ starCount: 0,
+ forkCount: 0,
+ index: 0,
+ };
+ }
+
+ addClick = (length) => {
+ if (this.state.index < length - 1) {
+ this.setState({
+ ...this.state,
+ index: this.state.index + 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: 0,
+ });
+ }
+ }
+
+ minusClick = (length) => {
+ if (this.state.index > 0) {
+ this.setState({
+ ...this.state,
+ index: this.state.index - 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: length - 1,
+ });
+ }
+ }
+
+ render() {
+ const { index } = this.state;
+ const language = this.getLanguage();
+ const { headerType } = this.state;
+ const headerLogo = headerType === 'normal' ? '/img/hlogo_colorful.svg' : '/img/hlogo_white.svg';
+ const dataSource = homeConfig[language];
+ return (
+ <div className="user-page">
+ <section className="top-section">
+ <Header
+ currentKey="user"
+ type={headerType}
+ logo={headerLogo}
+ language={language}
+ onLanguageChange={this.onLanguageChange}
+ />
+ </section>
+ <section className="ourusers-section">
+ <h3>
+ {dataSource.ourusers.title}
+ </h3>
+ <div className="button1-section" id="buttonleft">
+ <div className="overflow-section">
+ <ul>
+ {
+ dataSource.ourusers.list.map((ureview, i) => (
+ <li key={i}>
+ <img src={ureview.img} />
+ </li>
+ ))
+ }
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section className="review-section">
+ <h3>{dataSource.userreview.title}</h3>
+ <div className="button-section" id="buttonleft">
+ <button onClick={() => this.minusClick(dataSource.userreview.list.length)} >
+ <img src="/img/gotoleft.png" />
+ </button>
+ <div className="overflow-section">
+ <ul>
+ {
+ dataSource.userreview.list.map((ureview, i) => (
+ <li key={i}>
+ <img src={ureview.img} />
+ <div className="name-section">
+ <p className="pr">{ureview.review} </p>
+ <p className="pn">{ureview.name} </p>
+ </div>
+ </li>
+ ))[index]
+ }
+ </ul>
+ </div>
+ <button onClick={() => this.addClick(dataSource.userreview.list.length)}>
+ <img src="/img/gotoright.png" />
+ </button>
+ </div>
+ </section>
+ </div>
+ );
+ }
+}
+
+document.getElementById('root') && ReactDOM.render(<User />, document.getElementById('root'));
+
+
+export default User;
diff --git a/src/pages/user/user.scss b/src/pages/user/user.scss
new file mode 100644
index 0000000..22c89f4
--- /dev/null
+++ b/src/pages/user/user.scss
@@ -0,0 +1,297 @@
+@import '../../variables.scss';
+@import '../../reset.scss';
+
+@keyframes slashStar {
+ 0% {
+ opacity: 1; }
+ 100% {
+ opacity: 0; }
+}
+
+.user-page {
+ .top-section {
+ position: relative;
+
+ img {
+ width: 100%;
+ }
+ .animation {
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #1BE1F6;
+ }
+ .animation1 {
+ left: 15%;
+ top: 70%;
+ animation: slashStar 2s ease-in-out 0.3s infinite;
+ }
+ .animation2 {
+ left: 34%;
+ top: 35%;
+ animation: slashStar 2s ease-in-out 1.2s infinite;
+ }
+ .animation3 {
+ left: 53%;
+ top: 20%;
+ animation: slashStar 2s ease-in-out 0.5s infinite;
+ }
+ .animation4 {
+ left: 72%;
+ top: 64%;
+ animation: slashStar 2s ease-in-out 0.8s infinite;
+ }
+ .animation5 {
+ left: 87%;
+ top: 30%;
+ animation: slashStar 2s ease-in-out 1.5s infinite;
+ }
+ .vertical-middle {
+ position: absolute;
+ left: 0;
+ top: 40%;
+ transform: translateY(-50%);
+ box-sizing: border-box;
+ width: 100%;
+ text-align: center;
+ padding: 0 20px;
+ }
+ .product-name {
+ position: relative;
+ display: inline-block;
+ h2 {
+ font-family: Avenir-Heavy;
+ font-size: 46px;
+ color: #FFF;
+ text-align: center;
+ word-break: break-word;
+ margin: 0;
+ }
+ }
+ .product-desc {
+ opacity: 0.6;
+ font-family: Avenir-Medium;
+ font-size: 24px;
+ color: #FFF;
+ text-align: center;
+ margin: 12px auto 0;
+ max-width: 730px;
+ }
+ .button-area {
+ text-align: center;
+ margin-top: 40px;
+ .button {
+ margin-right: 20px;
+ }
+ .button:last-child {
+ margin-right: 0;
+ }
+ }
+ .github-buttons {
+ margin-top: 20px;
+ text-align: center;
+ a {
+ margin-right: 12px;
+ &:last-child {
+ margin-right: 0;
+ }
+ div {
+ border-radius: 2px;
+ display: inline-block;
+ height: 24px;
+ line-height: 24px;
+ font-size: 12px;
+ padding: 0 8px;
+ color: #fff;
+ background: rgba(255, 255, 255, 0.2);
+ img {
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ margin-top: -6px;
+ }
+ .count {
+ font-family: TXD_D_Medium;
+ font-size: 16px;
+ padding-left: 4px;
+ display: inline-block;
+ height: 100%;
+ min-width: 30px;
+ }
+ }
+ }
+ }
+ .version-note {
+ text-align: center;
+ margin: 22px 0 10px;
+ a {
+ text-decoration: none;
+ display: inline-block;
+ font-family: Avenir-Heavy;
+ font-size: 14px;
+ color: #FFF;
+ text-align: center;
+ background: #46484B;
+ border-radius: 2px;
+ line-height: 24px;
+ padding: 0 6px;
+ margin-right: 10px;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ .release-date {
+ font-family: Avenir-Medium;
+ font-size: 12px;
+ color: #999;
+ text-align: center;
+ }
+ }
+
+ .ourusers-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 40px;
+ margin:110px auto;
+ h3 {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #333;
+ text-align: center;
+ margin-top: 40px;
+ margin-bottom: 60px;
+ }
+ .button1-section{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ img{
+ width: 80px;
+ height: 80px;
+ &:hover {
+ box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
+ }
+ }
+ button{
+ border: hidden;
+ background-color: transparent;
+ }
+ .overflow-section{
+ display: flex;
+ width: 70%;
+ ul{
+ display: inline-flex;
+ flex-wrap: wrap;
+ li{
+ list-style: none;
+ margin: 5px 5px 5px 5px;
+ img{
+ width: 100px;
+ height: 100px;
+ &:hover {
+ box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .review-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 40px;
+ h3 {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #333;
+ text-align: center;
+ margin-top: 40px;
+ }
+ .button-section{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ img{
+ width: 80px;
+ height: 80px;
+ &:hover {
+ box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
+ }
+ }
+ button{
+ border: hidden;
+ background-color: transparent;
+ }
+ .overflow-section{
+ overflow: hidden;
+ width: 65%;
+ height: 350px;
+ margin: 40px 0px 20px 0px;
+ background: #F9FAFA;
+ display: flex;
+ align-items: center;
+ ul{
+ display: -webkit-box;
+ align-items: center;
+ flex-direction: row;
+ width: 100%;
+ li{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ list-style: none;
+ width: 100%;
+ img{
+ width: 150px;
+ height: 150px;
+ margin: 0 40px 0 50px;
+ }
+ .name-section{
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ }
+ p{
+ font-family: Avenir-Heavy;
+ }
+ .pr{
+ font-size: 20px;
+ margin-right: 20px;
+ }
+ .pn{
+ font-size: 18px;
+ text-align: right;
+ margin-top: 40px;
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: $mobileWidth) {
+ .introduction-section {
+ padding: 0 20px;
+ &::before {
+ left: 20px;
+ }
+ &::after {
+ left: 19px;
+ }
+ }
+ .feature-section, .users-section {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ }
+}