You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/09/08 00:38:00 UTC
[apisix-website] branch master updated: chore: make plugin hub page
plugins icon horizontal center (#501)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 3d4a82d chore: make plugin hub page plugins icon horizontal center (#501)
3d4a82d is described below
commit 3d4a82d5edfd2ee66506293e865b5095dadbec31
Author: foolwc <29...@qq.com>
AuthorDate: Wed Sep 8 08:37:52 2021 +0800
chore: make plugin hub page plugins icon horizontal center (#501)
---
website/src/css/customTheme.css | 10 +++++++---
website/src/pages/plugins.js | 39 +++++++++++++++++++++++++++++----------
website/static/data/plugin.json | 2 +-
3 files changed, 37 insertions(+), 14 deletions(-)
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 6bc7a26..8f03f06 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -61,8 +61,8 @@ div.inner {
}
.image {
padding: 75px 10px 75px 75px;
- height: 200;
- width: 200;
+ height: 200px;
+ width: 200px;
}
.more-users {
padding-top: 75px;
@@ -724,7 +724,7 @@ a:hover {
transform: scale(1.2);
}
-.read-more-link{
+.read-more-link {
color: #d0312d;
font-size: 0.8rem;
font-weight: 500;
@@ -732,6 +732,10 @@ a:hover {
padding-bottom: 2px;
display: flex;
}
+.read-more-link:hover {
+ color: var(--color-primary);
+ text-decoration: var(--ifm-link-hover-decoration);
+}
/*Sidebar Section*/
diff --git a/website/src/pages/plugins.js b/website/src/pages/plugins.js
index 626803d..f2377e1 100644
--- a/website/src/pages/plugins.js
+++ b/website/src/pages/plugins.js
@@ -35,7 +35,7 @@ const PageSubtitle = styled.div`
font-weight: 400;
`;
-const Sidebaritem = styled.div`
+const SidebarItem = styled.div`
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
@@ -60,9 +60,15 @@ const PluginsContainer = styled.div`
margin-left: 200px;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
+ @media (max-width: 1200px) {
+ margin-left: 0;
+ }
@media (max-width: 812px) {
- grid-template-columns: repeat(2, 1fr);
-}
+ grid-template-columns: repeat(2, 1fr);
+ }
+ @media (max-width: 576px) {
+ grid-template-columns: repeat(1, 1fr);
+ }
`;
const SidebarContainer = styled.div`
@@ -76,16 +82,18 @@ const SidebarContainer = styled.div`
padding-right: 10px;
border-style: solid;
border-color: #ffffff #efeff5 #ffffff #ffffff ;
+ @media (max-width: 1200px) {
+ display: none;
+ }
`;
-const PluginCard = styled.div`
+const PluginCard = styled.a`
border-radius: 0.75rem;
border: 1px solid #eee;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: left;
- justify-content: center;
text-align: left;
padding: 1rem;
min-width: calc(180px + 5rem);
@@ -97,6 +105,14 @@ const PluginCard = styled.div`
}
`;
+const PluginIcon = styled.div`
+ padding: 1rem;
+ display: flex;
+ min-height: 200px;
+ align-items: center;
+ justify-content: center;
+`
+
const PluginName = styled.div`
font-size: 1rem;
font-weight: 600;
@@ -120,6 +136,9 @@ const SectionTitle = styled.h2`
margin-bottom: 24px;
margin-top: 84px;
text-transform: uppercase;
+ @media (max-width: 1200px) {
+ margin-left: 0;
+ }
`;
@@ -134,7 +153,7 @@ function Plugins(props) {
const { siteConfig } = useDocusaurusContext();
const sidebar = siteConfig.customFields.plugins.map((section) => {
return (
- <Sidebaritem key={section.groupName}><a className="sidebar-link" href={`#${section.groupName}`}>{section.groupName}</a></Sidebaritem>
+ <SidebarItem key={section.groupName}><a className="sidebar-link" href={`#${section.groupName}`}>{section.groupName}</a></SidebarItem>
);
});
@@ -142,17 +161,17 @@ function Plugins(props) {
const pluginCards = section.plugins.map((plugin) => {
return (
<div key={plugin.name}>
- <PluginCard>
- <a href={`https://apisix.apache.org/docs/apisix/plugins/${plugin.name}`} target="_blank">
+ <PluginCard href={`https://apisix.apache.org/docs/apisix/plugins/${plugin.name}`} target="_blank">
+ <PluginIcon>
{plugin.useDefaultIcon ?
<img className="plugin-logo shadow default" src={'/img/plugin/default-icon.png'} alt={plugin.name} /> :
<svg className="plugin-logo shadow" aria-hidden="true">
<use xlinkHref={`#icon${plugin.name}`} />
</svg>}
- </a>
+ </PluginIcon>
<PluginName>{plugin.name}</PluginName>
<PluginDescription>{plugin.description}</PluginDescription>
- <a className="read-more-link" href={`https://apisix.apache.org/docs/apisix/plugins/${plugin.name}`}>{'Read more >'}</a>
+ <span className="read-more-link">{'Read more >'}</span>
</PluginCard>
</div>
);
diff --git a/website/static/data/plugin.json b/website/static/data/plugin.json
index 70580d7..db315dc 100644
--- a/website/static/data/plugin.json
+++ b/website/static/data/plugin.json
@@ -165,7 +165,7 @@
},
{
"name": "proxy-mirror",
- "description": "TThe proxy-mirror plugin provides the ability to mirror client requests"
+ "description": "The proxy-mirror plugin provides the ability to mirror client requests"
},
{
"name": "proxy-rewrite",