This is an automated email from the ASF dual-hosted git repository.
lgcareer pushed a commit to branch master
in repository
https://gitbox.apache.org/repos/asf/incubator-dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new fd518a7 [community] Add Sidemenu in community
new 8c2c10d Merge pull request #221 from chengshiwen/master
fd518a7 is described below
commit fd518a7b695b3bd11315744b94f53cf1b0c7660a
Author: chengshiwen <[email protected]>
AuthorDate: Wed Dec 23 15:41:22 2020 +0800
[community] Add Sidemenu in community
---
site_config/community.jsx | 12 ++++++++
src/pages/community/index.jsx | 62 +++++++++++++++++++++++-------------------
src/pages/community/index.scss | 36 ++++++++++++++++++++++--
3 files changed, 79 insertions(+), 31 deletions(-)
diff --git a/site_config/community.jsx b/site_config/community.jsx
index e088b94..4c3baef 100755
--- a/site_config/community.jsx
+++ b/site_config/community.jsx
@@ -3,6 +3,12 @@ import React from 'react';
export default {
'en-us': {
barText: 'Community',
+ sidemenu: [
+ {
+ title: 'Community News',
+ children: []
+ }
+ ],
events: {
title: 'Events & News',
list: [
@@ -102,6 +108,12 @@ export default {
},
'zh-cn': {
barText: '社区',
+ sidemenu: [
+ {
+ title: '社区动态',
+ children: []
+ }
+ ],
events: {
title: '事件 & 新闻',
list: [
diff --git a/src/pages/community/index.jsx b/src/pages/community/index.jsx
index 500138f..697ecaf 100755
--- a/src/pages/community/index.jsx
+++ b/src/pages/community/index.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import Language from '../../components/language';
import Header from '../../components/header';
import Bar from '../../components/bar';
+import Sidemenu from '../../components/sidemenu';
import Slider from '../../components/slider';
import EventCard from './eventCard';
import ContactItem from './contactItem';
@@ -27,34 +28,39 @@ class Community extends Language {
onLanguageChange={this.onLanguageChange}
/>
<Bar img="/img/system/community.png" text={dataSource.barText} />
- <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="contact-section">
- <h3>{dataSource.contacts.title}</h3>
- <p>{dataSource.contacts.desc}</p>
- <div className="contact-list">
- {
- dataSource.contacts.list.map((contact, i) => (
- <ContactItem contact={contact} key={i} />
- ))
- }
- </div>
- </section>
- <section className="contributor-section">
- <h3>{dataSource.contributorGuide.title}</h3>
- <p>{dataSource.contributorGuide.desc}</p>
- <div className="contributor-list">
- {
- dataSource.contributorGuide.list.map((contributor, i) => (
- <ContributorItem contributor={contributor} key={i} />
- ))
- }
+ <section className="content-section">
+ <Sidemenu dataSource={dataSource.sidemenu} />
+ <div className="doc-content markdown-body">
+ <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="contact-section">
+ <h3>{dataSource.contacts.title}</h3>
+ <p>{dataSource.contacts.desc}</p>
+ <div className="contact-list">
+ {
+ dataSource.contacts.list.map((contact, i) => (
+ <ContactItem contact={contact} key={i} />
+ ))
+ }
+ </div>
+ </section>
+ <section className="contributor-section">
+ <h3>{dataSource.contributorGuide.title}</h3>
+ <p>{dataSource.contributorGuide.desc}</p>
+ <div className="contributor-list">
+ {
+ dataSource.contributorGuide.list.map((contributor, i) => (
+ <ContributorItem contributor={contributor} key={i} />
+ ))
+ }
+ </div>
+ </section>
</div>
</section>
<Footer logo="/img/ds_gray.svg" language={language} />
diff --git a/src/pages/community/index.scss b/src/pages/community/index.scss
index 9823a67..2c0d083 100755
--- a/src/pages/community/index.scss
+++ b/src/pages/community/index.scss
@@ -2,11 +2,41 @@
@import '../../reset.scss';
.community-page {
+ .content-section {
+ max-width: $contentWidth;
+ margin: 0 auto;
+ box-sizing: border-box;
+ padding: 40px 40px 60px;
+ position: relative;
+ min-height: 1100px;
+ .doc-content {
+ display: inline-block;
+ vertical-align: top;
+ box-sizing: border-box;
+ padding: 20px 6% 0;
+ width: calc(100% - #{$sideMenuWidth});
+ }
+ }
+ @media screen and (max-width: $mobileWidth) {
+ .content-section {
+ padding-left: 20px;
+ padding-right: 20px;
+ .doc-content {
+ width: 100%;
+ }
+ }
+ .sidemenu {
+ position: absolute;
+ z-index: 100;
+ left: 0;
+ top: 40px;
+ min-height: 510px;
+ }
+ }
.events-section {
max-width: $contentWidth;
margin: 0 auto;
box-sizing: border-box;
- padding: 80px 40px 60px;
@media screen and (max-width: $mobileWidth) {
padding: 0;
}
@@ -66,7 +96,7 @@
max-width: $contentWidth;
margin: 0 auto;
box-sizing: border-box;
- padding: 60px 40px 40px;
+ padding-top: 60px;
@media screen and (max-width: $mobileWidth) {
padding-left: 20px;
padding-right: 20px;
@@ -111,7 +141,7 @@
max-width: $contentWidth;
margin: 0 auto;
box-sizing: border-box;
- padding: 60px 40px 40px;
+ padding-top: 60px;
h3 {
font-family: Avenir-Heavy;
font-size: 36px;
