This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-site.git
The following commit(s) were added to refs/heads/master by this push:
new 382cdf407 [YUNIKORN-1042] render home page on mobile screen (#156)
382cdf407 is described below
commit 382cdf4072d79cb60a50ec4a65d3ce3385c59470
Author: Wilfred Spiegelenburg <[email protected]>
AuthorDate: Thu Apr 14 11:00:53 2022 -0500
[YUNIKORN-1042] render home page on mobile screen (#156)
Container resizing for mobile devices or on narrow screens flows the
text correctly in the section Why YuniKorn
Closes: #156
Signed-off-by: Craig Condit <[email protected]>
---
.../zh-cn/docusaurus-plugin-content-pages/index.js | 24 ++++++++--------
src/pages/index.js | 25 ++++++++---------
src/pages/styles.module.css | 32 ++++++++++------------
3 files changed, 37 insertions(+), 44 deletions(-)
diff --git a/i18n/zh-cn/docusaurus-plugin-content-pages/index.js
b/i18n/zh-cn/docusaurus-plugin-content-pages/index.js
index 53ec4b2af..85ebfb4e5 100644
--- a/i18n/zh-cn/docusaurus-plugin-content-pages/index.js
+++ b/i18n/zh-cn/docusaurus-plugin-content-pages/index.js
@@ -123,7 +123,7 @@ function Home() {
</div>
</div>
<div className='hero_column_logo'>
- <img className={styles.heroImg}
src="./img/logo/yunikorn_classic_logo.png"/>
+ <img className={styles.heroImg}
src="./img/logo/yunikorn_classic_logo.png" alt="YuniKorn logo"/>
</div>
</div>
</div>
@@ -137,7 +137,7 @@ function Home() {
<div key={idx} className={clsx('col col--4')}>
{imageUrl && (
<div className="text--center">
- <img
className={styles.featureImage} src={imageUrl} alt={title}/>
+ <img
className={styles.featureImage} src={imageUrl} alt={title.toString()}/>
</div>
)}
<h3>{title}</h3>
@@ -148,19 +148,17 @@ function Home() {
</div>
</section>
)}
-
- <h1 className={styles.whyText}>☺ 为什么选YUNIKORN?</h1>
- {why.map(({imageUrl, title, description}, idx) => (
<div className={styles.postContainer}>
- <div className={styles.postThumb}><img src={imageUrl}/></div>
- <div className={styles.postContent}>
- <h4>{title}</h4>
- <p>{description}</p>
- </div>
+ <h1 className={styles.whyText}>☺ 为什么选YuniKorn?</h1>
+ {why.map(({imageUrl, title, description}) => (
+ <div className={styles.postContent}>
+ <img src={imageUrl} alt={title.toString()}/>
+ <h4>{title}</h4>
+ <p>{description}</p>
+ </div>
+ ))}
+ <h3 className={styles.learnMoreURL}><a
href="./docs/get_started/core_features">了解更多 >>></a></h3>
</div>
- ))}
-
- <h3 className={styles.learnMoreURL}><a
href="./docs/get_started/core_features">了解更多 >>></a></h3>
</main>
</Layout>
);
diff --git a/src/pages/index.js b/src/pages/index.js
index 9e14a4cfb..d7449a908 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -123,7 +123,7 @@ function Home() {
</div>
</div>
<div className='hero_column_logo'>
- <img className={styles.heroImg}
src="/img/logo/yunikorn_classic_logo.png"/>
+ <img className={styles.heroImg}
src="/img/logo/yunikorn_classic_logo.png" alt="YuniKorn logo"/>
</div>
</div>
</div>
@@ -137,7 +137,7 @@ function Home() {
<div key={idx} className={clsx('col col--4')}>
{imageUrl && (
<div className="text--center">
- <img
className={styles.featureImage} src={imageUrl} alt={title}/>
+ <img
className={styles.featureImage} src={imageUrl} alt={title.toString()}/>
</div>
)}
<h3>{title}</h3>
@@ -148,20 +148,17 @@ function Home() {
</div>
</section>
)}
-
-
- <h1 className={styles.whyText}>☺ WHY YUNIKORN?</h1>
- {why.map(({imageUrl, title, description}, idx) => (
<div className={styles.postContainer}>
- <div className={styles.postThumb}><img src={imageUrl}/></div>
- <div className={styles.postContent}>
- <h4>{title}</h4>
- <p>{description}</p>
- </div>
+ <h1 className={styles.whyText}>☺ Why YuniKorn?</h1>
+ {why.map(({imageUrl, title, description}) => (
+ <div className={styles.postContent}>
+ <img src={imageUrl} alt={title.toString()}/>
+ <h4>{title}</h4>
+ <p>{description}</p>
+ </div>
+ ))}
+ <h3 className={styles.learnMoreURL}><a
href="https://yunikorn.apache.org/docs/get_started/core_features";>Learn more
>>></a></h3>
</div>
- ))}
-
- <h3 className={styles.learnMoreURL}><a
href="https://yunikorn.apache.org/docs/get_started/core_features";>Learn more
>>></a></h3>
</main>
</Layout>
);
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 14903f0d0..c2e8b9a55 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -60,43 +60,41 @@
}
.postContainer {
- margin: 0 30%;
+ alignment: center;
+ min-width: 300px;
+ max-width: 800px;
+ margin: 0 20%;
overflow: auto;
}
-.postThumb {
- height: 120px;
- width: 120px;
- float: left;
- padding: 0 10px 10px 0
+.postContent {
+ padding: 0 10px 10px 0;
+ float: right;
+ display: block;
}
-.postThumb img {
+.postContent img {
height: 120px;
width: 120px;
- display: block
-}
-
-.postContent {
- margin-left: 150px
+ float: left;
+ padding: 0 10px 10px 0;
+ display: block;
}
.postTitle {
font-weight: bold;
- font-size: 200%
+ font-size: 200%;
}
.whyText {
text-align:center;
color: cadetblue;
margin-top: 50px;
- margin-bottom: 50px
+ margin-bottom: 50px;
}
.learnMoreURL {
text-align:center;
color: cadetblue;
- margin-bottom: 30px
+ margin-bottom: 30px;
}
-
-
