This is an automated email from the ASF dual-hosted git repository.
danny0405 pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 8e1ebe6b1a Added some styling to authors list and blog post (#5817)
8e1ebe6b1a is described below
commit 8e1ebe6b1acab0758554cf17ad4bd1795eb87b02
Author: yadav-jai <[email protected]>
AuthorDate: Thu Jun 9 18:04:58 2022 +0530
Added some styling to authors list and blog post (#5817)
---
website/src/css/custom.css | 5 ++-
website/src/theme/BlogPostItem/index.js | 56 +++++++++++++++++++-----
website/src/theme/BlogPostItem/styles.module.css | 40 +++++++++++------
3 files changed, 75 insertions(+), 26 deletions(-)
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 57eeca4bb2..94f10971e9 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -211,6 +211,9 @@ footer .container {
.tagRegular_node_modules-\@docusaurus-theme-classic-lib-next-theme-Tag-styles-module{
color:black
}
+.authorTimeTags_src-theme-BlogPostItem-styles-module {
+ vertical-align:text-top;
+}
.blog-list-page article {
@@ -248,7 +251,7 @@ footer .container {
.blogPostTitle_src-theme-BlogPostItem-styles-module{
display:inline;
overflow: hidden;
-
+ vertical-align: text-top;
}
diff --git a/website/src/theme/BlogPostItem/index.js
b/website/src/theme/BlogPostItem/index.js
index 8c9525e2f2..92215d06bf 100644
--- a/website/src/theme/BlogPostItem/index.js
+++ b/website/src/theme/BlogPostItem/index.js
@@ -64,7 +64,7 @@
const truncatedPost = !isBlogPostPage && truncated;
const tagsExists = tags.length > 0;
- const tagsList = () => {
+ const tagsList = () => {
return (
<>
<ul className={clsx(styles.tags, styles.authorTimeTags,
'padding--none', 'margin-left--sm')}>
@@ -79,8 +79,8 @@
);
}
const AuthorsList = () => {
-
- const authorsCount = authors.length;
+
+const authorsCount = authors.length;
if (authorsCount === 0) {
return (
<div className={clsx(styles.authorTimeTags, "row margin-top--sm
margin-bottom--sm 'margin-vert--md'")}>
@@ -93,30 +93,62 @@ const AuthorsList = () => {
}
return (
- <div className={clsx(styles.authorTimeTags, "row margin-top--sm
margin-bottom--sm 'margin-vert--md'")}>
+ <>
+ {isBlogPostPage ? <div className={clsx(styles.blogPostText, "row
margin-top--sm margin-bottom--sm 'margin-vert--md'")}>
<time dateTime={date} itemProp="datePublished">
- {formattedDate}
+ {formattedDate}
</time>
+
{authors.map((author, idx) => (
+
+ <div key={idx}>
+ <div className="avatar margin-bottom--sm">
+
+ {author.name && (
+ <div>
+ <>
+ {idx!== 0 ? idx!== authors.length - 1 ? ','
: 'and':''}</>
+ <Link href={author.url} itemProp="url">
+ <span
className={clsx(styles.blogPostAuthorsList)}
itemProp="name">{author.name}</span>
+ </Link>
+
+ </div>
+ )
+ }
+ </div>
+ </div>
+ ))}
+
+ </div> : <div className={clsx(styles.authorTimeTags, "row margin-top--sm
margin-bottom--sm 'margin-vert--md'")}>
+ <time dateTime={date} itemProp="datePublished">
+ {formattedDate} by
+ </time>
+
+ {authors.map((author, idx) => (
+
<div key={idx}>
<div className="avatar margin-bottom--sm">
+
{author.name && (
<div>
- {authorsCount < 3 ?
+ <>
+ {idx!== 0 ? idx!== authors.length - 1 ? ',' :
'and': '' }</>
<Link href={author.url} itemProp="url">
- <span className={clsx(styles.authorsList)}
itemProp="name">{author.name}</span>
- </Link> : <Link href={author.url}
itemProp="url">
- <span
className={clsx(styles.authorsListLong)} itemProp="name">{author.name}</span>
- </Link>
- }
+
+ <span className={clsx(styles.authorsList)}
itemProp="name">{author.name}</span>
+ </Link>
+
</div>
)
}
</div>
</div>
))}
- </div>
+
+ </div>}
+
+ </>
);
}
diff --git a/website/src/theme/BlogPostItem/styles.module.css
b/website/src/theme/BlogPostItem/styles.module.css
index b0656dc025..1795d737a9 100644
--- a/website/src/theme/BlogPostItem/styles.module.css
+++ b/website/src/theme/BlogPostItem/styles.module.css
@@ -16,7 +16,7 @@
}
.blogPostData {
- font-size: 0.9rem;
+ font-size: 1.1rem;
margin-top: 0 !important;
margin-left:1px
}
@@ -36,23 +36,15 @@
color: rgb(28, 30, 33);
column-gap: 5px;
margin-top:-10px;
- margin-right:10px;
- display:inline-flex;
- justify-content: space-around;
- margin-left:5px
-}
-
-.authorsListLong{
- white-space: nowrap;
- font-size:0.9rem;
- color: rgb(28, 30, 33);
+ margin-right:3px;
display:inline-flex;
justify-content: space-around;
margin-left:5px;
-
}
+
+
@media(max-width:1820px){
.authorsListLong{
font-size:0.75rem;
@@ -77,7 +69,7 @@
color: rgb(28, 30, 33);
display:flex;
flex-direction: row;
-
+ vertical-align:text-top;
margin-left:2px;
@@ -105,3 +97,25 @@ h4{
text-decoration-color: rgb(28, 30, 33);
}
+
+.blogPostText{
+ font-size: 1.1rem;
+ color: rgb(28, 30, 33);
+ display:flex;
+ flex-direction: row;
+
+ margin-left:2px;
+}
+
+.blogPostAuthorsList{
+ font-size:1.1rem;
+ white-space: nowrap;
+ text-align:justify;
+ color: rgb(28, 30, 33);
+ column-gap: 5px;
+ margin-top:-10px;
+ margin-right:3px;
+ display:inline-flex;
+ justify-content: space-around;
+ margin-left:5px
+}
