This is an automated email from the ASF dual-hosted git repository.
kirs 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 57fb27f modify the style of footer (#350)
57fb27f is described below
commit 57fb27f72c45a1dac0c8884b25b61ff87a5dd7be
Author: GaoTianDuo <[email protected]>
AuthorDate: Thu May 6 18:31:19 2021 +0800
modify the style of footer (#350)
* modify the style of footer
* modified the config of twitter img
* modified the auto-adapted of footer
* modified the style of about us
---
img/emailblue.png | Bin 0 -> 3063 bytes
img/emailgray.png | Bin 0 -> 3050 bytes
img/twitterblue.png | Bin 0 -> 4777 bytes
img/twittergray.png | Bin 0 -> 4750 bytes
site_config/site.js | 36 +++++++++
src/components/footer/index.jsx | 59 ++++++++++----
src/components/footer/index.scss | 164 ++++++++++++++++++++++++++++-----------
7 files changed, 197 insertions(+), 62 deletions(-)
diff --git a/img/emailblue.png b/img/emailblue.png
new file mode 100644
index 0000000..7cc04a7
Binary files /dev/null and b/img/emailblue.png differ
diff --git a/img/emailgray.png b/img/emailgray.png
new file mode 100644
index 0000000..876cfd7
Binary files /dev/null and b/img/emailgray.png differ
diff --git a/img/twitterblue.png b/img/twitterblue.png
new file mode 100644
index 0000000..8b30079
Binary files /dev/null and b/img/twitterblue.png differ
diff --git a/img/twittergray.png b/img/twittergray.png
new file mode 100644
index 0000000..32782ec
Binary files /dev/null and b/img/twittergray.png differ
diff --git a/site_config/site.js b/site_config/site.js
index 80a9bbf..8592ffa 100644
--- a/site_config/site.js
+++ b/site_config/site.js
@@ -177,6 +177,24 @@ export default {
},
],
},
+ contact:{
+ title :'About us',
+ content:'Do you need feedback? Please contact us through the following
ways.',
+ list:[
+ {
+ name:'Email List',
+ img1:'/img/emailgray.png',
+ img2:'/img/emailblue.png',
+ link:'/en-us/community/development/subscribe.html',
+ },
+ {
+ name:'@ApacheDolphinScheduler',
+ img1:'/img/twittergray.png',
+ img2:'/img/twitterblue.png',
+ link:'https://twitter.com/dolphinschedule',
+ }
+ ],
+ },
copyright: 'Copyright © 2019-2021 The Apache Software Foundation. Apache
DolphinScheduler, DolphinScheduler, and its feather logo are trademarks of The
Apache Software Foundation.',
},
'zh-cn': {
@@ -350,6 +368,24 @@ export default {
},
],
},
+ contact:{
+ title :'联系我们',
+ content:'有问题需要反馈？请通过以下方式联系我们。',
+ list:[
+ {
+ name:'邮件列表',
+ img1:'/img/emailgray.png',
+ img2:'/img/emailblue.png',
+ link:'/zh-cn/community/development/subscribe.html',
+ },
+ {
+ name:'@ApacheDolphinScheduler',
+ img1:'/img/twittergray.png',
+ img2:'/img/twitterblue.png',
+ link:'https://twitter.com/dolphinschedule',
+ }
+ ],
+ },
copyright: 'Copyright © 2019-2021 The Apache Software Foundation. Apache
DolphinScheduler, DolphinScheduler, and its feather logo are trademarks of The
Apache Software Foundation.',
},
};
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
index ce95e67..61befc1 100644
--- a/src/components/footer/index.jsx
+++ b/src/components/footer/index.jsx
@@ -16,28 +16,53 @@ class Footer extends React.Component {
return (
<footer className="footer-container">
<div className="footer-body">
- <img src={getLink(logo)} />
+ <div>
+ <h3>{dataSource.contact.title}</h3>
+ <h4>{dataSource.contact.content}</h4>
+ </div>
+ <div className="contact-container">
+ <ul>
+ {
+ dataSource.contact.list.map((contact, i) => (
+ <li key={i}>
+ <img className="img-base" src={contact.img1}></img>
+ <img className="img-change" src={contact.img2}></img>
+ <a href={getLink(contact.link)}>
+ <p>{contact.name}</p></a>
+ </li>
+ ))
+ }
+ </ul>
+ </div>
<div className="cols-container">
- <div className="col col-12" />
- <div className="col col-6">
- <dl>
- <dt>{dataSource.documentation.title}</dt>
+ <div className="docu-container">
+ <h4>{dataSource.documentation.title}</h4>
+ <ul>
{
- dataSource.documentation.list.map((d, i) => (
- <dd key={i}><a href={getLink(d.link)} target={d.target ||
'_self'}>{d.text}</a></dd>
+ dataSource.documentation.list.map((docu, i) => (
+ <li key={i}>
+ <a href={getLink(docu.link)}>
+ <p>{docu.text}</p></a>
+ </li>
))
}
- </dl>
+ </ul>
</div>
- <div className="col col-6">
- <dl>
- <dt>{dataSource.asf.title}</dt>
- {
- dataSource.asf.list.map((d, i) => (
- <dd key={i}><a href={getLink(d.link)} target={d.target ||
'_self'}>{d.text}</a></dd>
- ))
- }
- </dl>
+ <div>
+
+ </div>
+ <div className="asf-container">
+ <h4>{dataSource.asf.title}</h4>
+ <ul>
+ {
+ dataSource.asf.list.map((asf, i) => (
+ <li key={i}>
+ <a href={getLink(asf.link)}>
+ <p>{asf.text}</p></a>
+ </li>
+ ))
+ }
+ </ul>
</div>
</div>
<div className="copyright"><span>{dataSource.copyright}</span></div>
diff --git a/src/components/footer/index.scss b/src/components/footer/index.scss
index 8988aa2..a9dc8dc 100644
--- a/src/components/footer/index.scss
+++ b/src/components/footer/index.scss
@@ -18,55 +18,129 @@
margin-bottom: 10px;
vertical-align: middle;
}
+ h3 {
+ font-family: Avenir-Heavy;
+ text-align: center;
+ font-size: 36px;
+ color: #000F20;
+ margin-bottom: 20px;
+ word-break: break-word;
+ height: 54px;
+ }
+ h4 {
+ font-family: Avenir-Heavy;
+ text-align: center;
+ font-size: 22px;
+ color: #666666;
+ margin-bottom: 40px;
+ word-break: break-word;
+ height: 32px;
+ }
+ .contact-container{
+ ul{
+ display: flex;
+ justify-content: space-between;
+ margin-top:80px;
+ margin-bottom: 40px;
+ margin-left: 200px;
+ margin-right: 200px;
+ li {
+ list-style: none;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ p{
+ font-family: Avenir-Heavy;
+ font-size: 22px;
+ color: #000F20;
+ width: 280px;
+ text-align: center;
+ }
+ &:hover p{
+ color: #288FFF;
+ }
+ img{
+ width: 80px;
+ height: 80px;
+ }
+ .img-base{
+ display: block;
+ }
+ .img-change{
+ display: none;
+ }
+ &:hover .img-base{
+ display: none;
+ }
+ &:hover .img-change{
+ display: block;
+ }
+ }
+ }
+
+ }
.cols-container {
+ margin-top: 100px;
margin-bottom: 60px;
- .col {
- display: inline-block;
- box-sizing: border-box;
- vertical-align: top;
- }
- .col-12 {
- width: 50%;
- padding-right: 125px;
- }
- .col-6 {
- width: 25%;
- }
- h3 {
- font-family: Avenir-Heavy;
- font-size: 18px;
- color: #333;
- line-height: 18px;
- margin-bottom: 20px;
- }
- p {
- font-family: Avenir-Medium;
- font-size: 12px;
- color: #999;
- line-height: 18px;
- }
- dl {
- font-family: Avenir-Heavy;
- line-height: 18px;
- }
- dt {
- font-weight: bold;
- font-size: 18px;
- color: #333;
- margin-bottom: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ .docu-container{
+ margin-left: 100px;
+ h4{
+ color: #000F20;
+ font-family: Avenir-Heavy;
+ font-size: 22px;
+ text-align: left;
+ margin-bottom: 10px;
+
+ }
+ ul{
+ display: flex;
+ flex-direction: row;
+ border-top: 1px solid #ccc;
+ li{
+ margin-top: 10px;
+ list-style: none;
+ margin-right: 35px;
+ p{
+ font-family: Avenir-Heavy;
+ font-size: 16px;
+ color: #000F20;
+ }
+ &:hover p{
+ color: #288FFF;
+ }
+ }
+ }
}
- dd {
- padding: 0;
- margin: 0;
- a {
- text-decoration: none;
- display: block;
- font-size: 14px;
- color: #999;
- margin: 10px 0;
+ .asf-container{
+ margin-left: 200px;
+ h4{
+ color: #000F20;
+ font-family: Avenir-Heavy;
+ font-size: 22px;
+ text-align: left;
+ margin-bottom: 10px;
+
}
- a:hover {
- color: $brandColor;
+ ul{
+ display: flex;
+ flex-direction: row;
+ border-top: 1px solid #ccc;
+ li{
+ margin-top: 10px;
+ list-style: none;
+ margin-right: 30px;
+ p{
+ font-family: Avenir-Heavy;
+ font-size: 16px;
+ color: #000F20;
+ }
+ &:hover p{
+ color: #288FFF;
+ }
+ }
}
}
}
